angularjs是javascript框架，通过指令（指令就是自定义的html标签属性）扩展了HTML，并且可以通过表达式（表达式使用）绑定数据到HTML。
1、angularjs指令 指令就是扩展的HTML属性，带有前缀ng-。
ng-app指令初始化一个AngularJS应用程序，也就是指定AngularJS作用范围，如<html ng-app="">作用于整个页面，<div ng-app="">作用于当前Div块内；
ng-model指令把元素值绑定到应用程序；注意是绑定到应用程序，相当于与当前应用程序全局变量绑定
ng-init指令初始化应用程序数据，使用中不常见
ng-repeat指令根据作用的数组重复使用该指令的HTML元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="names=['Tom','Lily','John']"> <ul> <li ng-repeat="x in names">{{x}}</li> </ul> </div> </body> </html>
创建自定义指令：使用directive函数创建自定义指令，指令名以小写字母开始，(1)、如果函数中指令名参数有大写字母，那么使用中用“-”短横分割，使用中的指令名不区分大小写；(2)、如果函数中指令名参数全部小写，那么使用中不做任何改变。
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body> </body> </html>
可以通过以下方式调用：默认使用元素名或属性方式
（1）、元素名 <runoob-directive></runoob-directive>
（2）、属性 <div runoob-directive></div>
（3）、类名 <div class="runoob-directive"></div>
var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "C", template : "<h1>自定义指令!</h1>" }; });
（4）、注释 <!-- 指令: runoob-directive -->
var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "M", replace : true, template : "<h1>自定义指令!</h1>" }; });
限制自定义指令调用方式：
var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; });
restrict 值可以是以下几种: E 只限元素名使用、A只限属性使用、C只限类名使用、M只限注释使用。restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
2、表达式 AngularJS表达式写在双大括号内：{{expression}}，可以包含文字、运算符和变量；表达式类似ng-bind指令，属性内部可以写文字、运算式和变量
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app> <input type="text" ng-model="params1"> <p>{{ (params1-0) + 5+'%' }}</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="m=1;v=5"> <span ng-bind="'密度q：'+(m/v)*100+'%'"></span> </div> </body> </html>
AngularJS对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p>
AngularJS数组
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p>
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p>
3、AngularJS MVC
（1）、ng-model指令绑定应用程序数据到HTML控制器（input、select、textarea）的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> <p>修改输入框的值，标题的名字也会相应修改。</p> </body> </html>
（2）、View指HTML，AngularJS通过$scope作用域连接视图和控制器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <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> <p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p> </body> </html>
（3）、ng-controller指令定义了应用程序控制器，AngularJS控制器就是常规的Javascript对象，由标准javascript对象函数创建
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <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> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script src="namesController.js"></script> </body> </html>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
使用中，一个控制器对应一个作用域，所以要分别写对应的控制器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/javascript" src="/javascript/angularjs/personNames.js"></script> </head> <body> <div ng-app="myapp1"> <div ng-controller="mycontroller1"> <p>{{name}}</p> </div> <div ng-controller="mycontroller2"> <p>{{name}}</p> </div> </div> </body> </html>
var app=angular.module('myapp1', []); app.controller('mycontroller1', function ($scope) { $scope.name ='HanMeimei'; }); app.controller('mycontroller2',function($scope){ $scope.name='LiMing'; });