本文详细介绍了AngularJS中各种指令的使用方法，包括ng-app、ng-controller、ng-repeat等，以及服务如$rootScope、$scope、$http的运用，为开发者提供了全面的AngularJS编程指南。
一、指令
1、ng-app
定义应用程序的根元素
- <div ng-app="app"></div>
- var app = angular.module('app', []);
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 元素
直接使用布尔值
- <p ng-hide="true">我是不可见的</p>
- <p ng-hide="false">我是可见的</p>
- <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 模块 |
扫一扫
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
