AngularJs 入门参考代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6 <style>
  7 table, th , td {
  8   border: 1px solid grey;
  9   border-collapse: collapse;
 10   padding: 5px;
 11 }
 12 table tr:nth-child(odd) {
 13   background-color: #f1f1f1;
 14 }
 15 table tr:nth-child(even) {
 16   background-color: #ffffff;
 17 }
 18 </style>
 19 </head>
 20 <body>
 21
 22 1.使用ng-model传值
 23 <div >
 24   <p>输入name : <input type="text" ng-model="name1"></p>
 25   <h1>Hello {{name1}}</h1>
 26 </div>
 27 2.ng-init初始化 很少用 一般用 controller
 28 <div ng-init="name2=‘John‘">
 29     <p>初始化名字 <span ng-bind="name2"></span></p>
 30 </div>
 31 3.表达式的使用
 32 <div >
 33    <p>我的第一个表达式： {{ name1 + name2 }}</p>
 34  </div>
 35
 36 <h1>AngularJS 实例</h1>
 37  4.ng-init初始化一个对象 类似于jason格式
 38 <div ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">
 39
 40  <p>姓为 {{ person.lastName }}</p>
 41
 42  </div>
 43  5.ng-init初始化一个数组 ng-repeat进行数据的遍历
 44  <div ng-init="names=[‘A‘,‘B‘,‘C‘]">
 45  <ul><li ng-repeat="x in names">{{x}}</li></ul>
 46  </div>
 47
 48
 49 6.定义一个控制器 js代码可外置
 50 <div ng-app="myApp" ng-controller="myCtrl">
 51
 52 <h1>{{carname}}</h1>
 53
 54 </div>
 55
 56 <script>
 57 var app = angular.module(‘myApp‘, []);
 58 app.controller(‘myCtrl‘, function($scope) {
 59     $scope.carname = "Volvo";
 60 });
 61 </script>
 62
 63 7.controller受 ng-model影响
 64 <div ng-app="myApp" ng-controller="myCtrl">
 65     <input ng-model="name"/>
 66     <h1>{{name}}</h1>
 67 </div>
 68  <script>
 69  var app = angular.module(‘myApp‘,[]);
 70  app.controller(‘myCtrl‘,function($scope){
 71      $scope.name="testname";
 72  });
 73  </script>
 74
 75  8.$rootScope 类似于全局变量
 76  <div ng-app="myApp" ng-controller="myCtrl">
 77      <ul><li ng-repeat="x in names">{{x}}{{h}}</li></ul>
 78  </div>
 79  <script>
 80     var a=‘hehe‘;//给 ajax 传值 提供了可能
 81      var app = angular.module(‘myApp‘,[]);
 82      app.controller(‘myCtrl‘,function($scope){
 83          $scope.names=[‘A‘,‘B‘,‘C‘];
 84          $scope.h=a;
 85      });
 86  </script>
 87
 88 9.controller 控制器方法
 89 <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
 90     <h1>{{fullname()}}</h1>
 91 </div>
 92 <script>
 93     var app = angular.module(‘myApp‘,[]);
 94     app.controller(‘myCtrl‘,function($scope){
 95         $scope.aname=‘A‘;
 96         $scope.bname=‘B‘;
 97         $scope.fullname=function(){
 98             return $scope.aname+‘  ‘+$scope.bname;
 99         }
100     });
101 </script>
102
103   10.controller升级版
104   <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
105       <ul><li ng-repeat=‘x in names‘>{{x}}</li></ul>
106   </div>
107   <script>
108       angular.module(‘myApp‘,[]).controller(‘myCtrl‘,function($scope){
109           $scope.names=[‘A‘,‘B‘,‘C‘];
110       });
111   </script>
112
113     11.过滤器uppercase大写 lowercase 格式化字符串为小写
114     <div ng-app=‘myApp‘ ng-init=‘name="aaa"‘>
115         {{name | currency}}
116     </div>
117     <script>
118         angular.module(‘myApp‘,[]);
119     </script>
120
121         12. currency 格式化数字为货币格式
122         <div ng-app=‘myApp‘ ng-init=‘name="aaa"‘>
123          数量：<input type=‘number‘ ng-model=‘quantity‘>
124          单价：<input type=‘number‘ ng-model=‘price‘>
125             <p>总价：{{quantity*price | currency}}</p>
126         </div>
127         <script>
128             angular.module(‘myApp‘,[]);
129         </script>
130
131    13.orderBy 过滤器根据表达式排列数组
132   <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
133       <ul><li ng-repeat=‘x in names  | orderBy : "num"‘>{{x.num}}  {{x.name}}</li></ul>
134   </div>
135   <script>
136       angular.module(‘myApp‘,[]).controller(‘myCtrl‘,function($scope){
137           $scope.names=[{num:2,name:‘B‘},{num:3,name:‘C‘},{num:1,name:‘A‘}];
138       });
139   </script>
140
141    14.服务 $location.absUrl() 返回当前页面的 URL 地址
142     <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
143           {{url}}
144       </div>
145   <script>
146       angular.module(‘myApp‘,[]).controller(‘myCtrl‘,function($scope,$location){
147           $scope.url=$location.absUrl();
148       });
149   </script>
150
151   15.$http 服务
152       <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
153           {{mydata}}
154       </div>
155   <script>
156     var app = angular.module(‘myApp‘, []);
157     app.controller(‘myCtrl‘, function($scope, $http) {
158     $http.get("syscfg/workermsg.action?fn=angular").then(function (response) {
159         $scope.mydata = response.data;
160     });
161 });
162
163   </script>
164
165      16.$timeout 服务 定时器
166     <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
167           {{myHeader}}
168       </div>
169   <script>
170 var app = angular.module(‘myApp‘, []);
171 app.controller(‘myCtrl‘, function($scope, $timeout) {
172     $scope.myHeader = "Hello World!";
173     $timeout(function () {
174         $scope.myHeader = "How are you today?";
175     }, 2000);
176 });
177
178   </script>
179
180   17.$interval 服务 间隔重复执行 心跳器
181     <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
182           {{theTime}}
183       </div>
184   <script>
185     var app = angular.module(‘myApp‘, []);
186     app.controller(‘myCtrl‘, function($scope, $interval) {
187         $scope.theTime = new Date().toLocaleTimeString();
188         $interval(function () {
189             $scope.theTime = new Date().toLocaleTimeString();
190             }, 1000);
191     });
192
193   </script>
194
195   18.创建自定义服务
196       <div ng-app=‘myApp‘ ng-controller=‘myCtrl‘>
197           {{hex}}
198       </div>
199   <script>
200     var app = angular.module(‘myApp‘, []);
201     app.service(‘hexafy‘, function() {
202         this.myFunc = function (x) {
203             return x.toString(16);
204             }
205     });
206     app.controller(‘myCtrl‘, function($scope, hexafy) {
207       $scope.hex = hexafy.myFunc(255);
208     });
209
210   </script>
211
212
213   19.过滤器中，使用自定义服务
214   <div ng-app="myApp">
215 <input type=‘number‘ng-init=‘num=0‘ ng-model=‘num‘/>
216 <h1>{{num | myFormat}}</h1>
217 </div>
218 <script>
219 var app = angular.module(‘myApp‘, []);
220 app.service(‘hexafy‘, function() {
221     this.myFunc = function (x) {
222         return x.toString(16);
223     }
224 });
225 app.filter(‘myFormat‘,[‘hexafy‘, function(hexafy) {
226     return function(x) {
227         return hexafy.myFunc(x);
228     };
229 }]);
230
231 </script>
232
233 20.AngularJS $http 存在跨域问题无法请求 需放置本地文件
234 <div ng-app=‘app‘ ng-controller=‘ctrl‘>
235     <ul><li ng-repeat=‘x in names‘>{{x.Name+‘,‘+x.Country+‘,‘+x.City}}</li></ul>
236 </div>
237 <script>
238     angular.module(‘app‘,[]).controller(‘ctrl‘,function($scope,$http){
239         $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
240         .success(function(response){$scope.names = response.records;});
241     });
242 </script>
243
244 21.下拉框select
245 <div ng-app="myApp" ng-controller="myCtrl">
246
247
248 <select ng-model="selectedSite" ng-options="x.site for x in sites">
249 </select>
250 <p><a href="{{selectedSite.url}}">{{selectedSite.site}}</a></p>
251
252 </div>
253
254 <script>
255 var app = angular.module(‘myApp‘, []);
256 app.controller(‘myCtrl‘, function($scope) {
257    $scope.sites = [
258         {site : "Google", url : "http://www.google.com"},
259         {site : "Runoob", url : "http://www.runoob.com"},
260         {site : "Taobao", url : "http://www.taobao.com"}
261     ];
262 });
263 </script>
264
265 22.表格 css 参考在头部 利用oderBy排序 $index+1显示排序
266 <div ng-app="myApp" ng-controller="myCtrl" >
267 <table >
268 <tr ng-repeat=‘x in sites | orderBy : "num"‘>
269     <td>{{$index+1}}</td>
270     <td>{{x.site}}</td>
271     <td>{{x.url}}</td>
272 </tr>
273 </table>
274
275 </div>
276
277 <script>
278 var app = angular.module(‘myApp‘, []);
279 app.controller(‘myCtrl‘, function($scope) {
280    $scope.sites = [
281         {num:3,site : "Google", url : "http://www.google.com"},
282         {num:1,site : "Runoob", url : "http://www.runoob.com"},
283         {num:2,site : "Taobao", url : "http://www.taobao.com"}
284     ];
285 });
286 </script>
287
288
289     </body>
290
291 </html>

时间： 2024-10-16 20:47:46

AngularJs 入门参考代码的相关文章

跟我学AngularJs:AngularJs入门及第一个实例

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 下载地址:https://angularjs.org/ 一.AngualrJs简介 AngularJS是由谷歌开发出来的,它是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

AngularJS入门心得2——何为双向数据绑定

前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉的.看过了大漠的视频,算是了解了AngularJS的一些优良特性.后来准备投身<AngularJS权威教程>,跟着它走,可是一来可能自己道行不够,二来,个人觉得这本书翻译的有些生硬以及一些瑕疵,比如: (1)9.2节:在指令中适用自作用域 (2)9.2节:在指令中适用自作用域当然,以上都是一些瑕

angularjs入门案例新玩具-中午吃神马

angularjs 是一个用来开发单页webAPP的mvv框架,由Google 开发,如果不知道angularjs 的可以先google 下按照angularjs 的开发一般顺序先搭建好需要做的视图,然后准备数据,最后绑定事件处理业务逻辑,操作DOM事件用户和程序的交互. 1.开始搭建界面,使用bootstrap作为UI框架,可以快速搭建清爽的界面效果,顺便引入 angular.js jquery.js 和我们需要写的app.js 作为业务逻辑 1 <!doctype html> 2 <

Angular系列----AngularJS入门教程04：迭代器过滤（转载）

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器我们对控制器不做

Angular系列---- AngularJS入门教程03：AngularJS 模板（转载）

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

Erlang cowboy 入门参考

Erlang cowboy 入门参考 cheungmine,2014-10-28 本文翻译自: http://ninenines.eu/docs/en/cowboy/HEAD/guide/getting_started/ 我没有按原文逐句翻译.仅仅是我自己的理解,力求简单明了.本文程序在RHEL6.4上写成并运行,参考下面的文章,安装Erlang: erlang在redhat上的安装 1 引言 Erlang不仅仅是一门语言,更是一个操作平台.Erlang开发者很少写单独的模块,而是写库和程序,然

Angular系列----AngularJS入门教程01：AngularJS模板（转载）

Angular系列----AngularJS入门教程00：引导程序（转载）

我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s