AngularJS常用功能与使用

1. ng-app:

初始化一个AngularJS应用程序，定义其根元素；
一个网页可以包含多个运行在不同元素中的AngularJS应用程序；

2. ng-init:

初始化应用程序的数据；
例：

<div ng-app="MyApplication" ng-init="name='Separes'">

3. ng-bind：

把应用程序数据绑定到HTML；
例：

<div ng-app="" ng-init="Name='Separes'">
<p>姓名为 <span ng-bind="Name"></span></p>

注：可在双大括号内直接绑定数据到HTML，如“ {{ 1+2 }} ”

4. ng-model:

把元素值绑定到应用程序；
例：

< p>姓名：<input type="text" ng-model="Name"></p>
<p>你输入的为： {{ Name }}</p>

5. ng-repeat：

循环；
例：

<div ng-app="" ng-init="rows=['A','B','C']">
<li ng-repeat="x in rows">
    {{ x }}

注：输出对象数组时可使用“ . ”符号输出对象属性，类似PHP中的“ -> ”符号；
该指令可以完美显示表格(可以添加过滤)；

6. ng-click：

定义一个单击事件；
例：

<button ng-click="count = count + 1"></button>
< p>{{ count }}</ p>

注：ng-dbclick：定义一个双击事件；
与之类似的还有 ng-mousedown，ng-mouseup，ng-mouseenter，ng-mouseleave，ng-mousemove，ng-mouseover，ng-submit等；

7. ng-hide：

隐藏应用的一部分；
例：

<p ng-show="true">

注：ng-show与ng-hide作用相反；

8. ng-disable：

绑定应用程序数据到HTML的disable属性；
例：

<button ng-disabled="Switch"></button>

9. 过滤：

1.filter        从数组匹配子串
2.orderBy       根据某个条件排列数组
3.lowercase     将字符串转为小写
4.uppercase     将字符串转为大写
5.currency      将数字格式化为货币
6.date          日期格式化
7.json          把一个JavaScript对象格式化为没有参数的Json字符串
8.limitTo       截取数组或字符串
9.number        格式化数字

注：过滤可嵌入ng-repeat中使用以得到目标数据；
例：

<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}

10. ng-controller：

定义应用程序控制器；

控制器控制其应用程序的数据；
控制器是常规的JavaScript对象，由标准的JavaScript对象的构造函数创建；
控制器的 $scope 是其指向的HTML元素；
例：
<div ng-app="" ng-controller="personController">
名: <input type="text" ng-model="person.firstName">

姓: <input type="text" ng-model="person.lastName">

姓名: {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
注：控制器可以把函数作为对象属性；
控制器可以带有方法；

11. $http：

$http是读取web服务器上数据的服务；
$http.get(url)是用于读取服务器数据的函数；
例：

function controller($scope,$http) {
$http.get('av/av.json')
.success(function(response) {$scope.names = response;});
}

注：获得Json数据时，属性$scope.names变为一个数组；

12. ng服务：

1.$scope        与指令元素相关联的当前作用域(存储数据)
2.$rootScope    某模块的根作用域(唯一)，由AngularJS加载模块时自动创建，其定义的值可在各个controller中使用；
3.$element      当前指令对应的元素
4.$attrs        由当前元素的属性组成的对象
5.$transclude   不清楚

13. then()方法：

一个很神奇的方法，用于处理异步请求($http不支持异步请求)；
then()中的方法会按顺序执行；
then(fn)方法中带一个参数，即要被执行的函数，且该函数自身的参数即为目标数据；
例：

    $Employee.get({id:$stateParams.employee}).$promise.then(function (employee) {
    if ($window.confirm('确定让' + employee.name + '离职吗？')) {
    $Employee.delete($Employee.get({id:$stateParams.employee}));
    $state.go('shadow.employee.list');
    } else {
    $state.go('shadow.employee.inspect', {employee: $stateParams.employee});
        }
    })

注：promise模式是一个带有then()函数的对象；

14. select & ng-options:

select:取值、选中等；
ng-options：输出下拉框；
注：可用select自定义option的value值；
例：

<select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData">

15. 输入校验：

1.ng-trim           去除空格       value = boolean
2.ng-min-length     最小长度       value = num
3.ng-max-length     最大长度       value = num
4.required          不为空         value = null
5.ng-pattern        正则验证       value = string

16. 分支语句：

同JavaScript；
if...else...
switch...case...