[关闭]
@iamfox 2015-10-19T20:07:29.000000Z 字数 15096 阅读 1867

JAVA CRUD程序员所理解的AngularJS

angular.js 前端 汇银



1 HelloWorld

1.1 简介

AngularJS是一个js框架,用来开发浏览器客户端显示的动态网页。
它通过一些自定义的JS和HTML标签语法扩展了静态HTML的功能,这样就能通过HTML标签或属性来处理动态信息。

AngularJS主要有以下五个特性:

  1. 双向数据绑定 —— 实现了把js中的model数据对象与页面展示视图完全绑定在一起,model如果变化,页面内容也会发生变化。反过来如果页面内容有变化(比如填表单),model对象的值也会立即跟着变。
  2. 模板 —— 模板就是HTML片段,AngularJS把模板当成HTML文件解析到了DOM里,然后会用一些指令来完成对模板的数据填充。
  3. MVVM —— (Moodel-View-ViewModel),比MVC更为松耦合,MVC里,M是数据实体,V是视图,而MVVM多出了一个ViewMode,用JAVA开发人员的理解就是,从实体-静态页面,变成了实体-DTO(或者VO)--静态页面。
  4. 依赖注入 —— AngularJS确实可以依赖注入,就像Spring一样,这样js也有了代码分层。
  5. 指令 —— 在js代码中创建自定义指令,指令的最终创建成果可以是个自定义的HTML标签,也可以是个标签上的元素属性,就像是JSP的自定义标签。指令可以用来在页面上加载一小块HTML模板,并且在加载时做些动态数据处理。

1.2 HelloWorld!

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <!-- 这里引入了AngularJS,就像用JQuery一样-->
  7. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <!--这里给name对象赋了个值-->
  11. <div ng-app="" ng-init="name='World'">
  12. <!--这里把name对象值又输了出来Hello World-->
  13. Hello {{ name }}!
  14. </div>
  15. </body>
  16. </html>

这段代码另存为html文件以后,在浏览器打开就能看到效果。
QQ图片20151019181959.png-19.9kB

为了方便运行,推荐去http://runjs.cn/code,只要往窗口中粘贴一下上面的代码,就可以直接预览效果了。

1.3 指令介绍

指令是一个自定义的HTML标签,比如<xxx></xxx>。或者自定义属性,比如<div xxx></div>

Angular自带的常见的属性指令有:ng-appng-initng-modelng-bindng-repeat等等。前面例子就用到了ng-appng-init两个自定义属性指令

每个指令背后都有一些JS代码来实现其功能,当浏览器在解析HTML时,AngularJS也在解析DOM上的这些属性指令,然后执行JS。

在HelloWorld例子里的ng-init,它的作用是在被解析到的时候,将'World'这个字符串,赋给了name变量,ng-init=""双引号内直接写了JS代码。由于AngularJS的双向绑定实时更新特性,下面那个{{ name }}占位符所在位置立马就变成了name的值。

1.4 指令:ng-app

ng-app是一个根元素一样的指令,用来标记AngularJS的作用域。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 如果把`ng-app`加在上面这个`div`标签中,那AngularJS只会去解析这个`div`里的AngularJS元素。 -->
  10. <div ng-app="">
  11. </div>
  12. </body>
  13. </html>
  1. <!DOCTYPE HTML>
  2. <!-- 如果这样加,那整个页面的AngularJS元素都会被解析。-->
  3. <html ng-app="">
  4. <head>
  5. <title> 测试页 </title>
  6. <meta charset="utf-8">
  7. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  8. </head>
  9. <body>
  10. <div>
  11. </div>
  12. </body>
  13. </html>

1.5 指令:ng-init

ng-init是用来初始化数据的。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body ng-app="">
  9. <!-- 初始化了两个数字 -->
  10. <div ng-init="quantity=1;price=5">
  11. </div>
  12. <!-- 初始化了一个数组 -->
  13. <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
  14. </div>
  15. </body>
  16. </html>

还可以初始化对象。

1.6 数据绑定表达式

如HelloWorld例子中所示,数据绑定标签是{{ expression }}。

{{}}中可以直接写变量名来输出值,也可以写JS表达式。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body ng-app="">
  9. <div ng-init="quantity=12;price=5">
  10. <!-- 这里会输出60 -->
  11. <p>总价: {{ quantity * price }}</p>
  12. </div>
  13. <div ng-init="names=['Tom','Jerry','Gaffey']">
  14. <!-- 这里会输出Tom -->
  15. <p>名字为: {{ names[0] }}</p>
  16. </div>
  17. </body>
  18. </html>

1.6-1.png-36kB

1.7 指令:ng-model

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="">
  10. <!-- 输入框和一个js中的model:name变量绑在了一起 -->
  11. <p>请输入任意值:<input type="text" ng-model="name"></p>
  12. <p>你输入的为: {{ name }}</p>
  13. </div>
  14. </body>
  15. </html>

1.7-1.png-55.3kB
你往输入框填值,就是在实时修改js中的name变量,也同时就影响了表达式的输出。就这样简单的标签就实现了页面的实时更新,不再需要那些臃肿的js DOM操作代码。

这只是个单向绑定例子,在后面学习控制器时会看到ng-model的双向绑定效果。

1.8 指令:ng-bind

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="">
  10. <p>请输入一个名字:<input type="text" ng-model="name"></p>
  11. <p>Hello <span ng-bind="name"></span></p>
  12. </div>
  13. </body>
  14. </html>

ng-bind其实就是把{{}}表达式换成了标签,这样就能避免在数据加载完成之前,比如ajax还在取数据时,让用户看到了不该看到的{{}}。

1.9 指令:ng-click

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 初始化了一个status变量为false-->
  10. <div ng-app="" ng-init="status=false">
  11. <!-- 每点一下button,就执行了一次'status = !status',于是status变量就在true和false之间来回切换-->
  12. <button ng-click="status= !status">隐藏/显示</button>
  13. <!-- div里的内容,通过一个'ng-hide'标签控制是否显示,也一直随着status在显示和隐藏中切换。-->
  14. <div ng-hide="status">
  15. <p>请输入一个名字:<input type="text" ng-model="name"></p>
  16. <p>Hello <span ng-bind="name"></span> </p>
  17. </div>
  18. </div>
  19. </body>
  20. </html>

1.9-1.png-52.8kB

模型和控制器

2.1 MVVM简介

MVVM是Model-View-ViewMode的简称,Model包含了业务实体和逻辑,来自数据库。View是我们最后要呈现的页面效果,ViewModel是从Model中提取的,用于维护特定View的数据和方法。

ModelViewModel通过$scope对象互动,可以监听到Model的变化,然后通过View来渲染,View通过$routeProvider对象支配。

使用MVVM模式有几大好处:

  1. 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

  2. 可重用性:可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。

  3. 独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

  4. 可测试性:可以针对ViewModel来对界面(View)进行测试。

2.2 控制器

你的需求不会总是简单到直接把已有变量打出来就行了,你需要写一些js脚本来获取或计算你想要的值,再输出,这件事由控制器来做。

  1. <!-- ng-controller指令就是用来定义应用程序控制器对象的,同时也创建了一个新的作用域,就是那一对div-->
  2. <div ng-app="" ng-controller="MyController">
  3. <p>请输入一个名字:<input type="text" ng-model="person.name"> </p>
  4. <p>Hello <span ng-bind="person.name"></span> </p>
  5. </div>

这样就能创建一个控制器,本来控制器是个JS对象,名字叫MyController,但我们这里没有为它编写任何代码,只是加上了ng-controller这个属性指令,所以会按默认情况被Angular创建。

这个MyController在这最大的意义就是划定了一个作用域,将它所在的div标签范围内都定义成了它自己的作用域,这意味着如果在这控制器的内部定义一个变量,比如上例中的person.name,它就只能在作用域内输出,离开这对div,就无法输出了。这样它不会和其它作用域的同名变量发生冲突。这样,我们就可以开始放心地在这个控制器内创建各种变量、函数了。

一个页面内可以有多个控制器作用域,还可以嵌套。不同作用域之间的变量,有各自的有效范围。

2.3 控制器属性

下面展示了控制器里最重要的一个属性$scope,它是当前控制器里用来容纳你的自定义变量和函数的上下文对象。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 没有再使用ng-init指令,而是通过一个自定义的控制器里的JS代码来实现同样的初始化功能-->
  10. <div ng-app="" ng-controller="MyController">
  11. <p><span ng-bind="title"></span> </p>
  12. <p>请输入一个名字:<input type="text" ng-model="person.name"> </p>
  13. <p>Hello <span ng-bind="person.name"></span> </p>
  14. </div>
  15. <script>
  16. <!-- 这个函数会在浏览器加载页面遇到ng-controller="MyController"指令时执行,它创建了一个$scopeMyController作用域的上下文对象,然后把这个作用域内会用到的所有数据、属性、方法,都放在了这个对象中-->
  17. function MyController($scope) {
  18. <!-- 定义了一个person对象,放在了$scope上下文对象里-->
  19. $scope.person = {
  20. name: "World"
  21. };
  22. <!-- 定义了一个title字符串,也放在了$scope上下文对象里 -->
  23. $scope.title = "我是MyController控制器上下文中名为title的变量值";
  24. }
  25. </script>
  26. </body>
  27. </html>

2.3-1.png-73.9kB

$scope是有继承特性的,每个指令标签都会创建一个作用域,一个$scope上下文对象,那如果当前作用域是一个子作用域(外层的HTML标签上还有别的Angular指令),那当前作用域$scope也就是外层作用域$scope的子$scope,这样如果你在当前$scope中调用某个属性或方法没有的时候,比如上例中的$scope.person,它会自动往父$scope里找,再找不到继续往上找,直到最顶级的$rootScope,这是定义了ng-app的那个作用域对应的$scope

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 没有再使用ng-init指令,而是通过一个自定义的控制器里的JS代码来实现同样的初始化功能-->
  10. <div ng-app="" ng-init="parentName = 'app'">
  11. <div ng-controller="MyController">
  12. <p><span ng-bind="title"></span> </p>
  13. <p>请输入一个名字:<input type="text" ng-model="person.name"> </p>
  14. <p>Hello <span ng-bind="person.name"></span> </p>
  15. <p>Hello <span ng-bind="parentName"></span> </p>
  16. </div>
  17. </div>
  18. <script>
  19. <!-- $scopeMyController作用域的上下文对象,这个作用域内的所有数据、属性,都可以放在这个对象中-->
  20. function MyController($scope) {
  21. <!-- 定义了一个person对象,放在了$scope上下文对象里-->
  22. $scope.person = {
  23. name: "World"
  24. };
  25. <!-- 定义了一个title字符串,也放在了$scope上下文对象里 -->
  26. $scope.title = "我是MyController控制器上下文中名为title的变量值";
  27. }
  28. </script>
  29. </body>
  30. </html>

2.3-2.png-76.9kB

2.4 控制器方法

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-controller="MyController">
  10. Your name:
  11. <input type="text" ng-model="username">
  12. <!-- 点击这个按钮会调用MyController作用域$scope.sayHello()方法-->
  13. <button ng-click="sayHello()">打招呼</button>
  14. <hr>
  15. {{greeting}}
  16. </div>
  17. <script>
  18. function MyController($scope) {
  19. $scope.username = 'World';
  20. <!-- sayHello声明成了一个方法 -->
  21. $scope.sayHello = function() {
  22. $scope.greeting= 'Hello ' + $scope.username + '!';
  23. };
  24. }
  25. </script>
  26. </body>
  27. </html>

2.4-1.png-75.4kB

当然,控制器写在外部文件里也是可以的。

  1. <script src="MyController.js"></script>

3 常用指令

3.1 常用指令1

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-init="status=false">
  10. <button ng-click="status= !status">我变</button>
  11. <p ng-hide="status">显示了。</p>
  12. <p ng-hide="!status">隐藏了。</p>
  13. </div>
  14. </body>
  15. </html>

ng-hide之前我们已经见识过了,另外还有一个ng-show,作用是相反的。
但是,如果页面上绑定的数据过多,页面加载起来会很卡,不管你是不是用ng-hide把一部分藏起来,都是一样卡的,因为它还是在DOM里存在着。所以,应该尽量使用ng-if,它只有在为true的时候,才会去执行其中的数据绑定。既达到了隐藏效果,还能让页面飞快。

angular通常建议一个页面不要超过2000个用于数据绑定的model。

3.2 常用指令2

ng-repeat,遍历集合并渲染到页面上。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-init="friends = [
  10. {name:'Tom', age:25},
  11. {name:'Jerry', age:28},
  12. {name:'Tom', age:25},
  13. {name:'Jerry', age:28}]">
  14. <table>
  15. <tbody>
  16. <!-- 这里会重复输出4次这个tr,x是数组friends的元素,数组中每个元素都是一个对象,对象有两个属性name和age-->
  17. <tr ng-repeat="x in friends">
  18. <td> {{ 'Name:'+ x.name +' ,Age:'+ x.age}} </td>
  19. </tr>
  20. </tbody></table>
  21. </div>
  22. </body>
  23. </html>

3.2-1.png-42.9kB
也就是循环输出了。

3.3 过滤器1

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="">
  10. 请输入: <input type="text" ng-model="name">
  11. <!-- |后面是一个过滤器名称,uppercase过滤器是用于对字符小写转换成大写,还有许多别的过滤器,也可以自定义过滤器-->
  12. <p>结果为: {{ name | uppercase}}</p>
  13. </div>
  14. </body>
  15. </html>

过滤器可以对变量在输出前做额外操作。

3.4 过滤器2

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-init="friends = [
  10. {name:'tom', age:16},
  11. {name:'jerry', age:20},
  12. {name:'garfield', age:22}]">
  13. <!-- 将过滤的字符存入text变量-->
  14. <p>输入过滤:<input type="text" ng-model="text"></p>
  15. <ul style="list-style-type:none">
  16. <li>姓名,年龄</li>
  17. <!-- 在遍历时,用名为filter的过滤器进行筛选,只会显示输出中含有text字符的行,就像数据库like查询-->
  18. <li ng-repeat="x in friends | filter:text">
  19. {{ x.name + ' , ' + x.age }}
  20. </li>
  21. </ul>
  22. </div>
  23. </body>
  24. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" >
  10. <!-- 输入数值212432到num变量-->
  11. <p>输入过滤:<input type="text" ng-model="num"></p>
  12. <div ng-bind="num | currency">
  13. <!--输出的是$212,432.00-->
  14. </div>
  15. </div>
  16. </body>
  17. </html>

货币过滤器,通常会按所在地区显示格式。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-controller="MyController">
  10. <!-- 格式化输出日期-->
  11. <div ng-bind="d | date:'yyyy-MM-dd HH:mm:ss:sss'">
  12. <!--输出的是2015-07-22 11:28:09:887-->
  13. </div>
  14. </div>
  15. <script>
  16. function MyController($scope) {
  17. $scope.d = new Date();
  18. }
  19. </script>
  20. </body>
  21. </html>

日期过滤器。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="gbk">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-init="words = ['aaa','AAA']" ng-controller="MyController">
  10. <ul style="list-style-type:none">
  11. <li>姓名,年龄</li>
  12. <!-- 在遍历时,用filter过滤器执行自定义过滤方法myFilter-->
  13. <li ng-repeat="x in words | filter:myFilter">
  14. {{ x }}
  15. </li>
  16. </ul>
  17. </div>
  18. <script>
  19. function MyController($scope) {
  20. $scope.myFilter = function(str) {
  21. <!-- 只有首字母为大写时返回true,这样遍历结果只会显示首字母为大写的元素-->
  22. return str[0] == str[0].toUpperCase();
  23. };
  24. }
  25. </script>
  26. </body>
  27. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" ng-init="friends = [
  10. {name:'Tom', age:25},
  11. {name:'Jerry', age:28},
  12. {name:'Tom', age:25},
  13. {name:'Jerry', age:28}]">
  14. <div ng-bind="friends | json">
  15. <!--这个过滤器就是把js对象转成json字符串输出在页面上,输出的是[ { "name": "Tom", "age": 25 }, { "name": "Jerry", "age": 28 }, { "name": "Tom", "age": 25 }, { "name": "Jerry", "age": 28 } ]-->
  16. </div>
  17. </div>
  18. </body>
  19. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" >
  10. <!--这个过滤器用来截取长度-->
  11. <div ng-bind="'I am the King!' | limitTo:3">
  12. <!--输出I a-->
  13. </div>
  14. <div ng-bind="'I am the King!' | limitTo:-3">
  15. <!--输出ng!-->
  16. </div>
  17. <div ng-bind="['a','b','c'] | limitTo:2">
  18. <!--输出a b-->
  19. </div>
  20. </div>
  21. </body>
  22. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="" >
  10. <!--将数字转成文本-->
  11. <div ng-bind="12345 | number">
  12. <!--输出I a-->
  13. </div>
  14. <div ng-bind="123.456 | number:2">
  15. <!--输出ng!-->
  16. </div>
  17. </div>
  18. </body>
  19. </html>

内置指令

指令也是一种angular特定的对象,就像控制器一样,angular提供了一些内置指令,也可以开发自定义指令。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script src="http://www.hubwiz.com/scripts/angular.min.js">></script>
  5. </head>
  6. <body >
  7. <div ng-app="" ng-init="dstatus = true; rstatus = true">
  8. <h1>Demo 1:</h1>
  9. <button ng-click="dstatus = !dstatus">改变禁用状态</button>
  10. <button ng-click="rstatus = !rstatus">按钮改变只读状态</button>
  11. <h1>Demo 2:</h1>
  12. <!-- 动态决定disabled状态-->>
  13. <textarea ng-disabled="dstatus" ng-readonly="rstatus"></textarea>
  14. </div>
  15. </body>
  16. </html>

上例的ng-clickng-disabledng-readonly都是内置指令,类似的还有ng-checkedng-selected

指令也分类型,ng-disabled,ng-readonly,ng-checked,ng-selected这些是布尔型指令,就简单对应HTML原有的属性标签控制truefalse

还有两个是类布尔型的,就是说它在HTML中不是布尔型,但由于行为相似,angular是把它们当成布尔型指令的。如ng-hrefng-src

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="gbk">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-app="myApp" >
  10. <!-- 用普通的href要是还没加载完你就点了,404... -->
  11. <a href="{{ myHref }}">一个链接</a>
  12. <!-- 用ng-href,在你的链接加载出来前你的点击是不会跳转的,会等到加载完毕以后 -->
  13. <a ng-href="{{ myHref }}">一个链接</a>
  14. <!-- 加载出来之前会是个XX-->
  15. <h1>错误方法</h1>
  16. <img src="{{imgSrc}}"/>
  17. <!-- 页面会延迟加载图象-->
  18. <h1>正确方式</h1>
  19. <img ng-src="{{imgSrc}}"/>
  20. <!-- 其实很多现代浏览器已经避免了在imgSrc没值时出现X,用哪个效果都一样了-->
  21. <script>
  22. <!-- 我们延迟两秒看看效果-->
  23. angular.module('myApp', [])
  24. .run(function($rootScope, $timeout) {
  25. $timeout(function() {
  26. $rootScope.myHref = 'http://www.baidu.com';
  27. $rootScope.imgSrc = 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/super/pic/item/d31b0ef41bd5ad6e9463d6f787cb39dbb6fd3c10.jpg';
  28. }, 2000);
  29. });
  30. </script>
  31. </div>
  32. </body>
  33. </html>

模块

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 没有再使用ng-init指令,而是通过一个自定义的控制器来实现同样的初始化功能-->
  10. <div ng-app="" ng-controller="MyController">
  11. <p>请输入一个名字:<input type="text" ng-model="person.name"> </p>
  12. <p>Hello <span ng-bind="person.name"></span> </p>
  13. </div>
  14. <script>
  15. <!-- $scopeMyController作用域的上下文对象,这个作用域内的所有数据、属性,都可以放在这个对象中-->
  16. function MyController($scope) {
  17. $scope.person = {
  18. name: "World"
  19. };
  20. }
  21. </script>
  22. </body>
  23. </html>

我们之前为了实现控制器,把Controller写成了一个js函数,这样定义在全局命名空间的函数越来越多以后,js管理起来会比较容易冲突和混乱。所以angular建议将这些自定义的js内容写在模块里。

angular.module('myApp', []);定义了一个模块。第一个参数是模块名,第二个数组参数里可以放这个模块中要注入的对象。
angular.module('myApp')获取模块。

接下来用模块的写法改造上例。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title> 测试页 </title>
  5. <meta charset="utf-8">
  6. <script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 这里的ng-app不再是空名字,而是加上了模块名myApp-->
  10. <div ng-app="myApp" ng-controller="MyController">
  11. <p>请输入一个名字:<input type="text" ng-model="person.name"> </p>
  12. <p>Hello <span ng-bind="person.name"></span> </p>
  13. </div>
  14. <script>
  15. <!-- 这里将模块名定义成myApp,然后通过.controller增加了一个新的MyController到我们定义的模块里-->
  16. angular.module('myApp', []).controller('MyController', function($scope) {
  17. $scope.person = {
  18. name: "World"
  19. };
  20. });
  21. <!-- 为了便于部分人的理解,上面的代码还可以这么写-->
  22. angular.module('myApp', []); // 定义模块
  23. var myModule = angular.module("myApp"); // 按名称获取模块
  24. // 往模块里定义Controller
  25. myModule.controller('MyController', function($scope) {
  26. $scope.person = {
  27. name: "World"
  28. };
  29. });
  30. </script>
  31. </body>
  32. </html>

现在你可以展开想象这些js代码如何拆分管理存放了。
模块不仅可以通过.controller定义控制器,还可以用.directive定义自定义指令,用.factory定义服务等等,用法大致相同,都是第一个参数传名称,第二个参数放函数,然后不传第二个就是获取。

模块结合前面内容的综合例子:

  1. <div ng-controller="SomeController">
  2. {{ someModel.someProperty }}
  3. <button ng-click="someAction()">改值</button>
  4. </div>
  5. <script>
  6. angular.module('myApp', [])
  7. .controller('SomeController', function($scope) {
  8. // 给$scope添加一个模型实体属性
  9. $scope.someModel = {
  10. someProperty: 'hello computer'
  11. }
  12. // 给$scope添加一个方法,可以修改模型的值
  13. $scope.someAction = function() {
  14. $scope.someModel.someProperty = 'hello human';
  15. };
  16. });
  17. </script>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注