指令

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
demo:
<div ng-app=”” ng-init=”name=’word'”>
Hello {{name}}
</div>
页面显示 Hello word
题外话: {{names[1]}} 如果names是一个数组 ng-init=”names=[‘Tom’,’Jerry’,’Gaffey’]”，则通过下标可以获取到对应的数组对象
ng-app
ng-app指令来标明一个AngularJS应用程序,同时载入和指令内容相关的模块，相当于标记了作用域。
ng-init
为AngularJS应用程序定义初始值
表达式
{{}}一般是两对花括号，括号内可以输出 数字 可以 输出 数组 {{ quantity * price }} {{ names[0] }}
ng-model
实现双向数据绑定 可以用于input 输入框等
ng-bind
和{{}}类似 但是他可以避免其未被渲染的模板被用户看到。
ng-click
点击事件指令
ng-hide=”true”，设置HTML元素不可见。
综合demo:
<div ng-app=”” ng-init=”click=true”>
<button ng-click=”click=!click”>显示和隐藏</button>
<div ng-hide=”click”>
请输入一个名字<input type=”text” ng-model=”name”/>
<span ng-bind=”name”></span>
</div>
</div>

控制器

控制器控制AngularJS应用程序的数据
ng-controller指令
就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
demo:
html <div ng-app=”” ng-controller=”indexPage”>
<input type=”text” ng-model=”person.name”>
<span ng-bind=”person.name”></span>
</div>
js var indexPage=function($scope){
$scope.person={
name:’你好我是控制器的数据’
}
}
$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。
通过点击事件触发函数demo:
html <div ng-app ng-controller=”main”>
<button ng-click=”person()”>
点击显示出发函数
</button>
<span ng-bind=”number”></span>
</div>
js var main=function($scope){
$scope.person=function(){
$scope.number=’我是数组’;
}
}

常用的指令
一·
ng-hide
ng-show指令和ng-hide用法相同但行为相反
所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧！
ng-show指令虽然隐藏了但还是会执行其中的所有绑定，而ng-if就不同了，它只会在等于true的时候也就是显示的时候才去执行其中的绑定，这样一来性能就有很大的提高
二·
ng-repeat 循环渲染数据
demo:
html <div ng-app=”” ng-controller=”repeatDemo”>
<table>
<tr ng-repeat=”i in person”>
<td ng-bind=”i.name”></td>
</tr>
</table>
</div>
js var repeatDemo=function($scope){
$scope.person=[
{name:’Tom’, age:25},
{name:’Jerry’, age:28},
{name:’Tom’, age:25},
{name:’Jerry’, age:28}
]
}

过滤器

过滤器可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。
用法：管道字符(|)+过滤器名。
uppercase 转为大写 lowercase转为小写
demo:
<div ng-app=””>
<input type=”text” ng-model=”name”>
<span ng-bind=”name | uppercase”></span>
</div>
filter过滤器可以过滤数组并从中选择出一个子集出来
demo:
<div ng-app=”” ng-controller=”repeatDemo”>
<input type=”text” ng-model=”name”>
<li ng-repeat=”i in person | filter:name”>
{{ i.name + ‘ , ‘ + i.age }}
</li>
</div>
var repeatDemo=function($scope){
$scope.person=[
{name:’Tom’, age:25},
{name:’peki’, age:28},
{name:’will’, age:25},
{name:’Jerry’, age:28}
]
}