一、指令
1、ng-app
定义应用程序的根元素
<div ng-app="app"></div>
2、ng-controller
为应用定义控制器对象
<div ng-controller="appController"></div>
app.controller('appController', function($scope) {
//你的代码
})
3、ng-repeat
遍历集合中(数组中)的每个项,给每个元素生成模板实例
普通:
ng-repeat="key in keys"
自定义遍历后的内容:
ng-repeat="(key, value) in cache.info()"
过滤:
ng-repeat="friend in friends | filter:searchText"
排序:
ng-repeat="friend in friends | orderBy:'-age'"
4、ng-options
遍历集合或数组,为HTML的<select>标签生成<option>元素
普通:
ng-options="color.name for color in colors"
显示的是name,选中值是id
ng-options="option.id as option.name for option in Options"
分组:
ng-options="option.id group by option.name for option in Options"
5、ng-class
用于动态设置dom元素的样式
ng-class="{'true':'badge bg-green', 'false':'badge bg-red'}[isActive]"
6、ng-style
用于动态自定义dom元素的css
ng-style="{ color: i.color=='' || i.color=='Default' ? 'default' : 'red' }"
7、ng-model
把HTML元素值(比如输入域的值)绑定到应用程序
<input type="text" ng-model="userName">
8、ng-if
可以完全根据表达式的值在DOM中生成或移除一个元素
<div ng-if="isChecked == true">为true则可显示</div>
9、ng-hide / ng-show
隐藏或显示 HTML 元素
直接使用布尔值 hide
<p ng-hide="true">我是不可见的</p>
<p ng-hide="false">我是可见的</p>
show
<p ng-show="true">我是可见的</p>
<p ng-show="false">我是不可见的</p>
使用表达式来计算布尔值
<p ng-hide="1+1 == 2">我是不可见的</div>
<p ng-show="2+2 == 4">我是可见的</div>
10、ng-init
初始化应用程序数据
<div ng-init="name='张三'">
My name is {{ name }}
</div>
11、ng-bind
绑定程序数据到HTML元素,也可用"{{}}"代替
<div>
<h1>Hello <span ng-bind="name"></span></h1>
</div>
12、ng-disabled
绑定应用程序数据到 HTML 元素的 disabled 属性
<button ng-disabled="1+1==2">不可点击</button>
13、ng-include
在应用中包含 HTML内容
<div ng-include="'userList.htm'"></div>
14、ng-form
和HTML的<form>标签一样,但可以被<form>标签嵌套
15、ng-readonly
绑定应用程序数据到 HTML 元素的 readonly 属性
<input type="text" ng-readonly="isReadOnly"/>
16、ng-checked
为HTML的勾选框动态设置勾选状态
<input type="checkbox" ng-checked="true" />
17、ng-selected
为HTML的下拉框<select>设置默认选择
<select>
<option>First</option>
<option>Second</option>
<option ng-selected="true">Third</option>
</select><span>
<select>
<option ng-repeat="person in persons" ng-select="person.sex == 'boy'">{{ person.sex }}</option>
</select>
18、ng-cloak
隐藏所有被它包含的元素,在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的
<div ng-cloak>
<h1>Hello World!</h1>
</div>
19、ng-switch
分支语句
<span ng-switch="person.sex">
<span ng-switch-when="boy">boy</span>
<span ng-switch-when="girl">girl</span>
<span ng-switch-default></span>
20、ng-href
和HTML的href属性相通
<a ng-href="/user/1">Link</a>
21、ng-src
和HTML的src属性相通
<img ng-src="{{imageUrl}}">
二、事件
1、ng-click
定义了AngularJS的点击事件
<button ng-click="click()">click me</button>
2、ng-dbl-click
定义了AngularJS的双击事件
<button ng-dblclick="dblclick()">click me</button>
3、ng-mousedown
当元素上按下鼠标按钮时触发
<button ng-mousedown="mousedown($event)">button</button>
4、ng-mouseenter
当鼠标进入元素时触发
<button ng-mouseenter="mouseenter()">button</button>
5、ng-mouseleave
当鼠标离开元素时触发
<button ng-mouseleave="mouseleave()">button</button>
6、ng-mousemove
当鼠标指针移动到元素上时触发
<button ng-mousemove="mousemove()">button</button>
7、ng-keydown
在用户按下键盘按键时触发,要把$event传过去,一般都是要判断按了哪个按键
<input type="text" ng-keydown="keydown($event)"/>
8、ng-keyup
在用户按下键盘按键并松开时触发
<input type="text" ng-keyup="keyup($event)"/>
9、ng-keypress
在用户敲击键盘按键时触发
<input type="text" ng-keypress="keypress($event)"/>
keydown,keypress,keyup三者区别:
引发事件的按键
非字符键不会引发 KeyPress 事件,但非字符键却可以引发 KeyDown 和 KeyUp 事件。
事件引发的时间
KeyDown 和 KeyPress 事件在按下键时发生,KeyUp 事件在释放键时发生。
事件发生的顺序
KeyDown -> KeyPress -> KeyUp
10、ng-change
当元素的model值改变时触发
<input type="text" ng-model="text" ng-change="change()" ng-minlength="5"/>
11、ng-blur
当元素失去焦点时触发
<a href="" ng-blur="blur()">link</a>
12、ng-focus
当元素获取焦点时触发
<a href="" ng-focus="focus()">link</a>
三、服务
1、$scope
$scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯。
2、$rootScope
$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS 应用中得全局作用域对象。
3、$watch
当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数)。它的函数签名为$watch(watchFn, watchAction, deepWatch)。
watchFn:该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。
watchAction:这是一个函数或者表达式,当watchFn 发生变化时会被调用。
deepWatch:如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。
4、$http
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。可以使用get、post、patch、delete等请求。
$http.get(url).success(function(data) {
// success
}).error(function (data) {
// fail
});
5、$location
- 暴露当前地址栏的URL,这样你就能
- 获取并监听URL。
- 改变URL。
- 当出现以下情况时同步URL
- 改变地址栏
- 点击了后退按钮(或者点击了历史链接)
- 点击了一个链接
- 一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate
6、$window
7、$interval
$interval(function() {
// 每秒执行一次
}, 1000);
8、$timeout
$timeout(function(){
// 延迟1秒执行
}, 1000);
9、$routeParams
通过route传递参数
.when('/platform/user/deatil/:params', {
templateUrl: 'V/user/user.detail.tpl.html',
controller: 'PlatformUserDetailController'
})
获取route的参数
var params = $routeParams.params
10、$compile
由$compile
方法来执行DOM的编译
四、全局API
1、转换
API | 描述 |
---|---|
angular.lowercase() | 将字符串转换为小写 |
angular.uppercase() | 将字符串转换为大写 |
angular.copy() | 数组或对象深度拷贝 |
angular.forEach() | 对象或数组的迭代函数 |
2、比较
API | 描述 |
---|---|
angular.isArray() | 如果引用的是数组返回 true |
angular.isDate() | 如果引用的是日期返回 true |
angular.isDefined() | 如果引用的已定义返回 true |
angular.isElement() | 如果引用的是 DOM 元素返回 true |
angular.isFunction() | 如果引用的是函数返回 true |
angular.isNumber() | 如果引用的是数字返回 true |
angular.isObject() | 如果引用的是对象返回 true |
angular.isString() | 如果引用的是字符串返回 true |
angular.isUndefined() | 如果引用的未定义返回 true |
angular.equals() | 如果两个对象相等返回 true |
3、JSON
API | 描述 |
---|---|
angular.fromJSON() | 反系列化 JSON 字符串 |
angular.toJSON() | 系列化 JSON 字符串 |
4、基础
API | 描述 |
---|---|
angular.bootstrap() | 手动启动 AngularJS |
angular.element() | 包裹着一部分DOM element或者是HTML字符串,把它作为一个jQuery元素来处理。 |
angular.module() | 创建,注册或检索 AngularJS 模块 |