AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-
1、 ng-app：
定义了 AngularJS 应用程序的根元素；
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序；
<div ng-app="Demo"></div>
2、 ng-init：
为 AngularJS 应用程序定义了 初始值；
通常情况下，我们使用一个控制器或模块来代替它；
<div ng-app="Demo" ng-init="firstName='John'"> <p>我的名字是：{{ firstName }}</p> </div>
3、 ng-model：
绑定 HTML 元素 到应用程序数据
同时也可以：
为应用程序数据提供类型验证（number、email、required）；
为应用程序数据提供状态（invalid、dirty、touched、error）；
为HTML 元素提供 CSS 类；
绑定 HTML 元素到 HTML 表单；
<div ng-app="Demo" ng-init="firstName='John'"> <p>姓名：<input type="text" ng-model="firstName"></p> <p>我的名字是：{{ firstName }}</p> </div>
4、ng-repeat：对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
<div ng-app="Demo" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
5、ng-controller：为应用程序添加控制器。请根据下面示例进行了解：
<div ng-app="Demo"> <h1 ng-controller="DemoCtrl">{{name}}</h1> <h1 ng-controller="DemoCtrl2">{{lastName}}</h1> </div> <script> // $scope表示作用区域，指向当前controller // 每个应用都有一个$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定义的值，可以在各个 controller 中使用。 var app = angular.module('Demo', []); app.controller('DemoCtrl', function($scope, $rootScope) { $scope.name = "Volvo"; $rootScope.lastName = "Tom"; }); </script>
<div ng-app="Demo" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"> <br> 姓: <input type="text" ng-model="lastName"> <br> 姓名: {{fullName()}} </div> <script> var app = angular.module('Demo', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
6、ng-options：创建一个下拉列表，列表项通过对象和数组循环输出。
<div ng-app="Demo" ng-controller="DemoCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "W3Cschool", "Taobao"]; }); </script>
7、ng-disabled：指令直接绑定应用程序数据到 HTML 的 disabled 属性。
<div ng-app="" ng-init="mySwitch=true"> <button ng-disabled="mySwitch">点我!</button> <input type="checkbox" ng-model="mySwitch"/>按钮 {{ mySwitch }} </div>
8、ng-show：指令隐藏或显示一个 HTML 元素。
<div ng-app=""> <p ng-show="true">我是可见的。</p> <p ng-show="false">我是不可见的。</p> </div>
9、ng-click：指令定义了一个 AngularJS 单击事件。
<div ng-app="Demo" ng-controller="myController"> <button ng-click="count = count + 1">点我！</button> <p>{{ count }}</p> </div>
10、ng-include：使用 ng-include 指令来包含 HTML 内容。
过滤器
使用一个管道字符（|）添加到表达式和指令中
常见表达式：
currency：格式化数字为货币格式；
filter：从数组项中选择一个子集；
lowercase：格式化字符串为小写；
orderBy：根据某个表达式排列数组；
uppercase：格式化字符串为大写；
<div ng-app="Demo" ng-controller="DemoCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> </div>
<div ng-app="Demo" ng-controller="DemoCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
服务