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>