Angular基础
ng-app 指令定义一个 AngularJS 应用程序，一个HTML文档只出现一次，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量。
ng-repeat 指令用在一个对象数组上。
可使用的CDN：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
1.最简单的绑定。
1 <div ng-app="">
2 <p>名字 : <input type="text" ng-model="name"></p>
3 <h1>Hello {{name}}</h1>
4 </div>
2.创建自定义的指令：
使用 .directive 函数来添加自定义的指令
1 <body ng-app="myApp">
2
3 <runoob-directive></runoob-directive>
4
5 <script>
6 var app = angular.module("myApp", []);
7 app.directive("runoobDirective", function() {
8 return {
9 template : "<h1>自定义指令!</h1>"
10 };
11 });
12 </script>
3.使用ng-init进行初始化。
1 <div ng-app="" ng-init="firstName='John';lastName='Doe'">
2
3 <p>姓名： {{ firstName + " " + lastName }}</p>
4
5 </div>
4.使用controller进行初始值绑定。
1 <div ng-app="myApp" ng-controller="myCtrl">
2
3 名: <input type="text" ng-model="firstName"><br>
4 姓: <input type="text" ng-model="lastName"><br>
5 <br>
6 姓名: {{firstName + " " + lastName}}
7
8 </div>
9
10 <script>
11 var app = angular.module('myApp', []);
12 app.controller('myCtrl', function($scope) {
13 $scope.firstName= "John";
14 $scope.lastName= "Doe";
15 });
16 </script>
5.使用Object.name对对象属性值进行提取。
1 <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
2
3 <p>姓为 <span ng-bind="person.lastName"></span></p>
4
5 </div>
6.使用Array[index]对数组下标值进行提取。
1 <div ng-app="" ng-init="points=[1,15,19,2,40]">
2
3 <p>第三个值为 {{ points[2] }}</p>
4
5 </div>
7.数据的绑定。
1 <div ng-app="" ng-init="quantity=1;price=5">
2
3 <h2>价格计算器</h2>
4
5 数量： <input type="number" ng-model="quantity">
6 价格： <input type="number" ng-model="price">
7
8 <p><b>总价：</b> {{ quantity * price }}</p>
9
10 </div>
8.ng-repeat重复数组元素。
1 <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
2 <p>使用 ng-repeat 来循环数组</p>
3 <ul>
4 <li ng-repeat="x in names">
5 {{ x }}
6 </li>
7 </ul>
8 </div>
9.ng-repeat重复对象中元素。
1 <div ng-app="" ng-init="names=[
2 {name:'Jani',country:'Norway'},
3 {name:'Hege',country:'Sweden'},
4 {name:'Kai',country:'Denmark'}]">
5
6 <p>循环对象：</p>
7 <ul>
8 <li ng-repeat="x in names">
9 {{ x.name + ', ' + x.country }}
10 </li>
11 </ul>
12
13 </div>
10.验证邮箱的合法性。
1 <form ng-app="" name="myForm"> 2 Email: 3 <input type="email" name="myAddress" ng-model="text"> 4 <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> 5 </form>
11.编辑邮箱地址，判断状态的改变。
1 <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
2
3 Email:
4 <input type="email" name="myAddress" ng-model="myText" required>
5 <p>编辑邮箱地址，查看状态的改变。</p>
6 <h1>状态</h1>
7 <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
8 <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
9 <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
10
11 </form>
12.ng-model基于状态提供css。（表单状态：ng-empty，ng-not-empty，ng-touched，ng-untouched，ng-valid，ng-invalid，ng-dirty，ng-pending，ng-pristine）
1 <style>
2 input.ng-invalid {
3 background-color: lightblue;
4 }
5 </style>
6
7 <form ng-app="" name="myForm">
8 输入你的名字:
9 <input name="myName" ng-model="myText" required>
10 </form>
13.gn-click修改视图，改变模型和控制器。
1 <div ng-app="myApp" ng-controller="myCtrl">
2 <input ng-model="name">
3 <h1>{{greeting}}</h1>
4 <button ng-click='sayHello()'>点我</button>
5 </div>
6
7 <script>
8 var app = angular.module('myApp', []);
9 app.controller('myCtrl', function($scope) {
10 $scope.name = "Runoob";
11 $scope.sayHello = function() {
12 $scope.greeting = 'Hello ' + $scope.name + '!';
13 };
14 });
15 </script>
14.根作用域。
1 <div ng-app="myApp" ng-controller="myCtrl">
2
3 <h1>{{lastname}} 家族成员:</h1>
4
5 <ul>
6 <li ng-repeat="x in names">{{x}} {{lastname}}</li>
7 </ul>
8
9 </div>
10
11 <script>
12 var app = angular.module('myApp', []);
13
14 app.controller('myCtrl', function($scope, $rootScope) {
15 $scope.names = ["Emil", "Tobias", "Linus"];
16 $rootScope.lastname = "Refsnes";
17 });
18 </script>