基本API
-
边界指令ng-app
描述:指明一个边界,告知框架在哪个范围内生效
语法:
<html ng-app></html>
注意:边界指令是使用ng框架必须使用的一个指令
-
呈现指令{{}}
描述:NG框架规定{{}}签到双括号用来表示【内容呈现】功能
在{{}}中可以书写NG语法规则下的变量、字符串甚至表达式
-
信息指令ng-model
描述:NG框架规定ng-model用来对input或textarea这类
用于收集用户信息的标签进行数据绑定
语法:
<input type="text" ng-model="message">
-
绑定指令ng-bind
描述:NG框架中提供了一个用于对非输入性的标签使用的
类似于{{}}呈现指令的辅助指令,作用是能够将NG变量绑定到想要显示的标签上
语法:
<span ng-bind="message"></span>
-
初始化指令ng-init
描述:NG框架中规定使用本指令对边界内部的数据模型(NG变量)进行初始化操作
ng-init并没有规定具体的必须摆放位置,但习惯上放在body上
会在页面加载后,自动对内部规定的数据模型进行初始化操作
语法:
<body ng-init="message = 'hello AngularJS'"></body>
控制器
-
angular.module()方法
描述:本方法是NG框架中提供,用来生成【页面数据模型】的方法
语法:var 模型名称 = angulat.module('边界名称', [注入信息])
-
声明控制器指令ng-controller
描述:本指令用来在页面中声明哪一个元素为控制器
控制器:用来操作数据和试图的部件。
语法:
<html ng-controller="mainController"></html>
注意:只要声明一个标签拥有控制器,这个控制器在脚本中就必须写出。
-
实现控制器方法*.controller()
描述:本方法是NG框架在script脚本中提供,用来生成【页面控制器】的方法
语法:页面数据模型名称.controller('控制器名称', ['scope){...}])
例子:
app.controller('mainController', ['$scope', function($scope){...}])
-
遍历指令ng-repeat
描述:本指令用来遍历NG变量,并根据其构建页面html元素
语法:
<E ng-repeat = '任意变量名 in NG变量 track by $index'> {{任意变量名}}</E>
说明:
track by $index
表示允许有重复内容存在
事件监听
NG框架中通过对元素标签添加【ng-事件名】指令,来对元素添加事件监听,而事件监听的回调函数需要在controller中,通过$scope来实现。
语法:<E ng-事件名称 = '回调函数名(NG变量)'></E>
声明:$scope.回调函数名 = function(参数) {...}
路由router
-
需配合
ng-view
指令使用 -
需要注入
ngRoute
-
声明
app.config('$routeProvider', function($routeProvider){ $routeProvider .when('/home', { templateUrl: 'views/home.html', controller: homeController // 控制器 }) })
服务
在NG框架中,平级controller之间无法互相沟通,所以提出了服务这一概念,不同的controller可以通过注入服务的方式进行交互:app.controller('控制器名', ['$scope', '系统服务', function($scope, 系统服务){...}])
存在多种不同的服务,有系统服务,也允许自定义服务
系统服务$http
NG框架内直接对app数据模型内置了一个用于处理网络功能的服务,就是$http
// get请求
$http({
method: 'GET',
url: ''
}).success(function(data) {
}).error(function(err) {
})
// post请求
$http({
method: 'POST',
url: '',
headers: {
"Content-Type": 'application/x-www-form-unlencoded'
},
data: ''
}).success(function(data) {
}).error(function(err) {
})
tips:对于请求回来的图片imgsrc和a标签的href,不能直接复制给src和href,应该写作ng-src和ng-href指令。
过滤服务$filter
对数据进行转换显示的一种小工具,支持自定义内容
语法: {{任意内容 | 过滤器}}
- 常用过滤器:
1. 将内容转换为货币格式,默认是美元格式
*** | currency: '货币符号'
2. 用于从一个数组选项中筛选出符合条件的子集数组
*** | filter: 子集数组
3. 对英文进行大小写转换
*** | uppercase/lowercase
4. 根据表达式的值对显示的内容进行排序,一般用于ng-repeat结构,并且repeat结构不是简单数据结构。
*** | orderBy: '表达式'
- 自定义过滤器
app.filter('自定义过滤器名称', function(){
return function(text) {...}
})
时间轴服务
需在使用之前注入,共有三种时间轴服务,分别为【间隔调用服务timeout】【清除时间轴内容服务】
var timer = null;
timer = $interval(function() {
...
$interval.cancel(timer); // 清除
}, 1000)
timer = $timeout(function() {
...
}, 1000)
监听服务
监听NG变量的值,并在这个值发生变化的时候回调。
语法:$scope.$watch('NG变量', function(){...}, true/false)
自定义服务
- value服务
- constant服务
- factory服务
- service服务
- provider服务
value自定义服务
描述:value服务是通过.value()方法对app数据模型进行扩展的一种服务定制方式
语法:app.value('自定义服务名称', 服务内容JSON)
Constant服务
描述:与value服务作用相同,区别在于constant服务一旦被定制完成,那么在注入之前都是不能更改的,多次定制只有第一个生效。
语法:app.constant('自定义服务名称', 服务内容JSON)
factory服务
描述:通过.factory()方法去创建一个object结构并直接返回。
语法:app.factory('自定义服务名称', function(){return {}})
service服务
描述:相当于本身已经构建了一个空白对象,在服务内部所有内容的操作均通过this完成(类似对象)。
语法:app.service('自定义服务名称', function(){this.name = 'zhangsan';})
provider服务
描述:通过.provider()方法去创建,并在第二个参数的函数内通过this.$get = function(){...}的固定结构对服务内容进行扩充
。无论是否注入,provider服务只要被创建,就会直接添加到app当中。
语法:app.service('自定义服务名称', function(){this.$get = function(){return {}}}
自定义指令
描述:通过app.directive()方法创建
语法:
app.directive('自定义指令名称', function(){
return {
/*
指令通过何种方式进行唤醒:‘A’,’E‘,‘C’,‘M’四种方式,可单独使用,也可组合使用。
‘A’:attribute,通过属性的方式进行唤醒
‘E’:element,通过元素的方式进行唤醒
‘C’:class,通过类名的方式进行唤醒
‘M’:comment,通过注释的方式进行唤醒<!-- directive:自定义指令名称 -->
注意:
1. 指令名称必须采用小写,任何大写都会导致无效
2. 指令名称如果是M类型,则replace自断是必填的,且必须设置为true才能生效
3. 指令如果通过template加载,则有且只有唯一一个根结点
*/
restrict: '指令类型',
// 指令在页面中能够显示的html结构,如果需要从外部文件中加载指令的结构,则需要写成templateUrl
template: '指令结构',
/*
指令复写指的是指令当在页面中存在时,是否会被放做事一个字元素添加到当前所在的元素内。
默认为false,直接替换当前元素。
可设置为true,不覆盖当前元素,而是作为其字元素添加到页面中
*/
replace: '指令复写'
}
})