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...