一、指令
基础指令
1、ng-disabled
使用ng-disabled可以把disabled属性绑定到以下表单输入字段上： <input> （ text、 checkbox、 radio、 number、 url , email 、 submit）； <textarea> ； <select> ； <button> 。
案例1：
<input type="text" ng-disabled="true" placeholder="TypetoEnable">
在下面的例子，文本字段会被禁用五秒，直到在$timeout中将isDisabled属性设置为true：
<textarea ng-disabled="isDisabled">Wait5seconds</textarea>
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
$rootScope.isDisabled = true;
$timeout(function() {
$rootScope.isDisabled = false;
}, 5000);
});
2、ng-select
用来将数据同HTML的<select> 元素进行绑定。这个指令可以和ng-model 以及ng-options指令一同使用，构建精细且表现优良的动态表单。
3、ng-options
ng-options的值可以是一个内涵表达式注意上边option位置是怎么写的？ 接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项。
演示代码：
angular.module('myApp',[])
.controller('myController',function($scope) {
$scope.cities = [
{name: 'Seattle'},
{name: 'San Francisco'},
{name: 'Chicago'},
{name: 'New York'},
{name: 'Boston'}
];
});
<select ng-model="city"
ng-options="city.name for city in cities">
<option value="">Choose City</option>
</select>
Best City: {{ city.name }}
4、ng-submit
ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请 求并重新加载页面）， 除非表单不含有action属性。
演示代码：
<form ng-submit="submit()"
ng-controller="FormController">
Enter text and hit enter:
<input type="text"
ng-model="person.name"
name="person.name" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
angular.module('myApp',[])
.controller('FormController',function($scope) {
$scope.person = {};
$scope.submit = function() {
alert($scope.person.name)
};
});
</script>
5、ng-app
任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。
演示代码：
<div ng-app="myApp">
{{ someProperty }}
<button ng-click="someAction()">测试</button>
</div>
<script type="text/javascript">
angular.module('myApp', [])
.run(function($rootScope) { //注意这里的run方法，我们之前就用过几次，后边会在module加载的时候解释，现在用就可以了
$rootScope.someProperty = 'hello world';
$rootScope.someAction = function() {
$rootScope.someProperty = '你好世界';
};
});
</script>
6、ng-controller
内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作 和模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。
$scope只是一个JavaScript对象，其中含有从父级$scope中通过原型继承得到的方法和属性，包括应用的$rootScope。
嵌套在ng-controller中的指令有访问新子$scope的权限，但是要牢记每个指令都应该遵守的和作用域相关的规则。 注意：$scope对象的职责是承载DOM中指令所共享的操作和模型。
演示代码：
<div ng-app="myApp">
<div ng-controller="myController">
{{ someModel.someProperty }}
<button ng-click="someAction()">click me</button>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController', function($scope) {
//创建模型
$scope.someModel = {
// 添加属性
someProperty: 'hello world'
}
// 设置$scope自身的操作
$scope.someAction = function() {
$scope.someModel.someProperty =' 你好世界';
};
});
</script>
案例2：之前作用域嵌套
<div ng-app="myApp">
<div ng-controller="SomeController">
{{ someBareValue }}
<button ng-click="someAction()">Communicate to child</button>
<div ng-controller="ChildController">
{{ someBareValue }}
<button ng-click="childAction()">Communicate to parent</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
angular.module('myApp', [])
.controller('SomeController', function($scope) {
// 反模式，裸值
$scope.someBareValue = 'hello computer';
// 设置 $scope 本身的操作，这样没问题
$scope.someAction = function() {
// 在SomeController和ChildController中设置{{ someBareValue }}
$scope.someBareValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) {
$scope.childAction = function() {
// 在ChildController中设置{{ someBareValue }}
$scope.someBareValue = 'hello human, from child';
};
});
</script>
7、ng-switch
可以在数据发生变化时渲染不同指令到视图中。
演示代码：
<div ng-app>
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>admin</p>
<h1 ng-switch-when="zhangsan">{{ person.name }}</h1>
</div>
</div>
8、ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插 入DOM中。
演示代码：
<div ng-app>
<div ng-if="2+3===5">
hello world
</div>
</div>
<div ng-app="myApp" ng-controller="myController">
<div ng-if="test">
hello world
</div>
</div>
angular.module('myApp',[])
.controller('myController', function($scope) {
$scope.test=false;
});
重要：
9、ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。 参数：
$index：遍历的进度（ 0...length-1 ）。
$first：当元素是遍历的第一个时值为true。
$middle：当元素处于第一个和最后元素之间时值为true。
$last：当元素是遍历的最后一个时值为true。
$even：当$index值是偶数时值为true。
$odd：当$index值是奇数时值为true。
演示代码：
<div ng-app="myApp">
<ul ng-controller="myController" >
<li ng-repeat="stu in people" ng-class="{even:$even,odd:$odd}" > //{even:！$even,odd:!$odd}注意
{{stu.name}} lives in {{stu.city}}
</li>
</ul>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController',function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"},
{name: "zhgangsan", city: "chengdu"}
];
});
</script>
10、ng-init
ng-init指令用来在指令被调用时设置内部作用域的初始状态。 主要用于测试或出示的时候
<div ng-init="word1='Hello';word2='World'">
{{word1}} {{word2}}
</div>
11、{{ }}
{{ }} 语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个 绑定，只要$scope发生变化，视图就会随之自动更新。
<div ng-init="test='HelloWorld'">
{{test}}
</div>
12、bind绑定
bind绑定——特别说明，之前我们直接绑定的时候{{}}当我们刷新页面或者用户网速比较慢的时候会把{{name}}--这个东西闪烁一下再出来值，bind就是解决方案。
<div ng-init="test='HelloWorld'">
<p ng-bind="test"></p>——而且对样式好控制
</div>
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }} 的元素上使用ng-cloak指令：
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body
13、ng-cloak
指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。——用这种办法同样能去掉闪烁
<div ng-init="test='HelloWorld'">
<p ng-cloak>{{test}}</p>
</div>
14、ng-bind-template
同ng-bind指令类似， ng-bind-template用来在视图中绑定多个表达式。
演示代码：
<div ng-app="myApp" >
<div ng-controller="myController">
<p ng-bind-template="{{name}}{{age }}"></p>
</div>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController',function($scope) {
$scope.name ="zhangsan" ;
$scope.age=19;
})
</script>
15、ng-show/ng-hide
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的 值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。
演示代码：
<div ng-show="2 + 3 == 5">----和之前的什么优点类似呢？
hello
</div>
alert($("div").attr("ng-show"))——通过jquery访问一下
16、ng-click
ng-click用来指定一个元素被点击时调用的方法或表达式。——之前已经用过
<body ng-app="myApp" >
<div ng-controller="myController">
<button ng-click="count = count + 1"
ng-init="count=0">
add
</button>
count: {{ count }}
<button ng-click="subtraction(2)">subtraction</button>
</div>
</body>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController', function($scope) {
$scope.subtraction = function(num) {
$scope.count -= num;
};
})
</script>
定义指令
AngularJS应用的模块中有很多方法可以使用，其中directive() 这个方法是用来定义指令的： 用法：
演示代码：
angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
// 指令定义放在这里
});
1、directive()
directive() 方法可以接受两个参数：
1. name（字符串） 指令的名字，用来在视图中引用特定的指令。 factory_function （函数） 这个函数返回一个对象，其中定义了指令的全部行为。 $compile服务利用这个方法返回的对 象，在DOM调用指令时来构造指令的行为。
用例：
<div ng-app="myApp" ng-controller="myController">
<test></test>
<span test></span>
<span class="test"></span>
<!-- directive:test -->
<div></div>
</div>
var app= angular.module('myApp',[])
app.directive("test",function(){
return{
restrict:"AEMC", ---注意这里的AEMC分别带别什么
template:"<span>hello world</span>",
replace:true
}
})
template:"<p>hello wolrd <span ng-transclude></span></p>",
transclude:true ---注意这是做什么 的
错误示范：
var app = angular.module('myApp', []);
app.directive("test",function(){
return{
// scope:{},
restrict:"AEMC",
template:'<div><input type="text" ng-model="name"/>{{name}}</div>',
replace:true
}
})
<test></test>
<test></test>---发生了什么事请？怎么解决
案例2：在自定义指令中做动作
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myController",["$scope",function($scope){
$scope.fun=function(){
alert("hello")
}
}])
app.directive("test",function(){
return{
restrict:"AE",
link:function(scope,element,attr){
element.bind("click",function(){
scope.$apply("fun()")
})
}
}
})
<div ng-app="myApp" ng-controller="myController">
{{name}}
<test>点击我啊</test>
</div>
这里有个关键的字：howToLoad---当页面上的两个地方都要使用同一个link去做一些业务处理的时候。
演示代码：
<div ng-controller="myController2">
<p test howToLoad="fun2()">hello</p>
</div>
<div ng-controller="myController">
<p test howToLoad="fun1()">hello</p>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myController",["$scope",function($scope){
$scope.fun1=function(){
alert("hello")
}
}])
app.controller("myController2",["$scope",function($scope){
$scope.fun2=function(){
alert("hello2")
}
}])
app.directive("test",function(){
return{
restrict:"AE",
link:function(scope,element,attr){
element.bind("click",function(){
scope.$apply(attr.howtoload)
})
}
}
})
angularjs帮我做了一些内置指令之前学过一些，这边它大概帮我们提供了60+种指令 我们现在来看我们最为关心的form指令。
演示代码：
<form name="myForm" ng-submit="save()" ng-controller="myController">
<input type="text" name="userName" ng-model="user.name" required>
<input type="password" name="pwd" ng-model="user.pwd" required>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
var app = angular.module('myApp', []);
app.controller("myController",["$scope",function($scope){
$scope.user={}
$scope.save=function(){
alert($scope.user.name)
}
}])
模块引入
在自定义Angular指令时，其中有一个叫做require的字段，这个字段的作用是用于指令之间的相互交流。举个简单的例子，假如我们现在需要编写两 个指令，在linking函数中有很多重合的方法，为了避免重复自己（著名的DRY原则），我们可以将这个重复的方法写在第三个指令的 controller中，然后在另外两个需要的指令中require这个拥有controller字段的指令，最后通过linking函数的第四个参数就可以引用这些重合的方法。
演示代码：
var app = angular.modeule('myapp',[]);
app.directive('parent',function(){
return {
...
controller: function($scope){
this.method1 = function(){
};
this.method2 = function(){
};
},
...
}
});
app.directive('d1',function(){
return {
...
require: '^parent',
link: function(scope,elem,attrs,parent){
parent.method1()
..
},
...
}
});
我们一般引入它：require: 'ngModel',
我们在require里定义了ngModel 所以这里它是一个NgModelController NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的 值是否是合法的。 我们来做这么一个实验，验证我们的表单中的一些数据是否合法。
演示代码：
var app = angular.module('myApp', []);
app.directive("isUse",function($http){
return {
restrict:"A",
require:"ngModel",
link:function(scope,element,attr,model){
element.bind("blur",function(){
scope.$apply(function(){
if(scope.username == "abcdefg"){
model.isExist = true;
}else{
model.isExist = false;
}
});
});
}
};
});
<form name="myForm">
用户名：<input type="text" name="username" ng-model="username" ng-pattern="/^w{6,20}$/" required is-use />
<span ng-show="myForm.username.$error.required">用户名不能为空</span>
<span ng-show="myForm.username.$error.pattern">用户名格式不正确</span>
<span ng-show="myForm.username.isExist">用户名已存在</span>
</form>
二、同外界通信： XHR和服务器通信
$http
我们可以使用内置的$http服务直接同外部进行通信。 $http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。
$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。
演示代码：
$http({
method: 'GET',
url: '/api/users.json'
}).success(function(data,status,headers,config) {
// 当相应准备就绪时调用
}).error(function(data,status,headers,config) {
// 当响应以错误状态返回时调用
});
案例1：
点击按钮的时候从后台加载数据：
<body ng-app="myApp">
<div ng-controller="myController">
<button ng-click="fun()">click me</button>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController',["$scope","$http",function($scope,$http){
$scope.fun=function(){
$http({
method:'get',
url:"data.json"
}).success(function(data){
alert(data)
})
}
}]);
</script>
注意这里http方式完整模式：
$http({
method:'POST',
url:_finalUrl,
data:_data,
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data){
deferred.resolve(data);
}).error(function(data, status, headers, config) {
deferred.reject('Then was an error');
});
提供的简化方案： 1：post方式提交数据
angular.module('myApp',[])
.controller('myController',["$scope","$http",function($scope,$http){
$scope.fun=function(){
$http.post('data.json').success(function(data){
alert(data);
})
}
}]);
2：get方式
angular.module('myApp',[])
.controller('myController',["$scope","$http",function($scope,$http){
$scope.fun=function(){
$http.get('data.json').success(function(data){
alert(data);
})
}
}]);