AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
表达式
- 使用 表达式 把数据绑定到 HTML
- 表达式写在双大括号内：，类似ng-bind
1 2 3 4 5 6 7
| < div ng-app="" ng-init="quantity=1;cost=5"> < p>总价： {{ quantity * cost }}</p> </div> < div ng-app="" ng-init="quantity=1;cost=5"> < p>总价： <span ng-bind="quantity * cost"></span></p> < /div>
|
指令
ng-app 指令初始化一个 AngularJS 应用程序,定义根元素,在网页加载完毕时会自动引导应用程序
ng-init 指令为 AngularJS 应用程序定义了 初始值,通常情况下，不使用 ng-init，用控制器或模块来代替它
ng-model 指令把元素值（比如输入域的值）绑定到应用程序，提供类型验证（number、email、required），提供状态（invalid、dirty、touched、error），为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。
1 2 3 4 5 6 7
| < div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你输入的为： {{ firstName }}</p> //AngularJS 数据绑定表达式 </div>
|
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| < div ng-app="" ng-init="names=['Jani','Hege','Kai']"> < p>使用 ng-repeat 来循环数组</p> < ul> < li ng-repeat="x in names"> {{ x }} < /li> < /ul> < div> < div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> < p>循环对象：</p> < ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> < /div>
|
创建自定义的指令
使用 .directive 函数来添加自定义的指令
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <body ng-app="myApp"> < runoob-directive></runoob-directive> < script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "< h1>自定义指令!</h1>" }; }); < /script> < /body>
|
以通过以下方式来调用指令:
1 2 3 4
| 元素名 <runoob-directive></runoob-directive> 属性 <div runoob-directive></div> 类名 <div class="runoob-directive"></div> 注释
|
限制你的指令只能通过特定的方式来调用
1 2 3 4 5 6 7 8
| var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; });
|
模型 ng-model
- 将输入域的值与 AngularJS 创建的变量绑定
1 2 3 4 5 6 7 8 9 10
| < div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> < /div> < script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); < /script>
|
1 2 3 4
| < div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1> </div>
|
1 2 3 4 5
| <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </form>
|
- 应用状态(invalid合法, dirty改变, touched触屏点击, error)
1 2 3 4 5 6 7 8
| < form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required></p> <h1>状态</h1> < p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p> < p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p> < p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p> < /form>
|
可用状态:ng-empty ,ng-not-empty ,ng-touched ,ng-untouched ,ng-valid ,ng-invalid ,ng-dirty ,ng-pending ,ng-pristine
1 2 3 4 5 6 7 8 9 10 11 12 13
| <style> input.ng-invalid { background-color: lightblue; } </style> <body> < form ng-app="" name="myForm"> 输入你的名字: <input name="myAddress" ng-model="text" required> < /form> < p>编辑文本域，不同状态背景颜色会发送变化。</p> < p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>
|
Scope(作用域)
- scope 是模型
- Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带，是一个对象，有可用的方法和属性，可应用在视图和控制器上
可以将 $scope 对象当作一个参数传递，当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| < div ng-app="myApp" ng-controller="myCtrl"> < h1>{{carname}}</h1> </div> < script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; }); < /script>
|
根作用域 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中,是各个 controller 中 scope 的桥梁，用 rootscope 定义的值，可以在各个 controller 中使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| < div ng-app="myApp" ng-controller="myCtrl"> < h1>{{lastname}} 家族成员:</h1> < ul> <li ng-repeat="x in names">{{x}} {{lastname}} </ul> < /div> < script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes"; }); </script>
|
控制器 ng-controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| < div ng-app="myApp" ng-controller="myCtrl" > 名: <input type="text" ng-model="firstName"><br> 名: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} < /div> < script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); < /script>
|
控制器方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| < div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div> < script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
|
外部文件中的控制器 只需要把 < script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
1 2 3 4 5 6 7 8 9 10
| < div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} < /div> < script src="personController.js"></script>
|