1 常用$服务
1.1 $scope
scope是angularJS中的作用域(其实就是存储数据的地方),很类似javascript的原型链 。搜索的时候,优先找自己的scope,如果没有找到就沿着作用域链向上搜索,直至到达根作用域rootScope。
rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 injector中。也就是说通过 injector.get("
scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
1.1.1 $scope.apply()
angularJS中$apply()方法详解
http://www.jb51.net/article/59538.htm
Scope提供$watch方法监视Model的变化。
Scope提供$apply方法传播Model的变化。
Scope可以继承,用来隔离不同的applicationcomponents和属性访问权限。
Scope为Expressions的计算提供上下文。
对于检查绑定的数据到底有没有发生变化,实际上是由scope.digest()完成的,但是我们几乎从来就没有直接调用过这个方法,而是调用scope.apply()方法,是因为在scope.apply()方法里面,它会去调用scope.digest()方法。scope.apply()方法带一个函数或者一个表达式,然后执行它,最后调用scope.digest()方法去更新bindings或者watchers。
$apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件、setTimeout、XHR或其他第三方的库。
1.2 $rootscope
1.3 $q
1.4 $http服务
angular通过$http与服务器通信
http://blog.csdn.net/yangnianbing110/article/details/43124679
1.4.1 简介
angular提供了http服务来同服务端进行通信,http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据。
$http服务是一个接受一个参数的函数,参数的类型是对象,用来配置生成的http的请求,该函数返回一个promise对象(关于promise规范,可以看看这篇文章)
var promise = $http({
method: 'GET',
url: '/api/user.json'
});
promise.then(function(resp){}, function(resp){})
1.4.2 $http请求的配置对象
$http请求的配置对象
$http()接受的配置对象可以包含以下属性:
method: http请求方式,可以为GET, DELETE, HEAD, JSONP, POST, PUT
url: 字符串,请求的目标
params: 字符串或者对象,会被转换成为查询字符串追加的url后面
data: 在发送post请求时使用,作为消息体发送到服务器
headers: 一个列表,每个元素都是一个函数,返回http头
xsrfHeaderName(字符串):保存XSFR令牌的http头的名称
xsrfCookieName: 保存XSFR令牌的cookie名称
transformRequest: 函数或者函数数组,用来对http请求的请求体和头信息进行转换,并返回转换后的结果。
transformResponse: 函数或者函数数组,用来对http响应的响应体和头信息进行转换,并返回转换后的结果。
cache: 布尔类型或者缓存对象,设置之后angular会缓存get请求。
timeout: 数值,延迟请求
responseType:字符串,响应类型。可以为arraybuffer, blob, document, json, text, moz-blob, moz-chunked-text, moz-chunked-arraybuffer
1.4.3 $http请求的响应对象
$http请求的响应对象
angular传递给then方法的响应对象包括以下几个属性
data: 转换之后的响应体
status: http响应状态码
headers: 头信息
config: 生成原始请求的设置对象
statusText: http响应状态的文本
1.4.4 拦截器
angular中通过拦截器我们可以从全局层面对请求以及响应进行拦截。$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。
使用拦截器之前,我们通过factory()声明一个服务,然后通过$httpProvider注册拦截器。
1.4.4.1 拦截器类型
拦截器分为四种,两种成功拦截器,两种失败拦截器。
拦截器允许你:
通过实现 request 方法拦截请求:
该方法会在 http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 http 调用失败。
通过实现 response 方法拦截响应:
该方法会在 http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致 http 调用失败。
通过实现 requestError 方法拦截请求异常:
有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。
通过实现 responseError 方法拦截响应异常:
有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。
angular.module('test', []).factory('testInterceptor', function($q){
var interceptor = {
'request': function(config){
return config;
},
'response': function(resp){
return response;
},
'requestError': function(rejection){
return $q.reject(rejection);
},
'responseError': function(rejection){
return rejection
}
}
return interceptor;
})
angular.module('test',[]).config(function($httpProvider){
$httpProvider.interceptors.push('testInterceptor');
})
1.4.5 链式调用
1、链式调用
$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。
$http({
url: 'data.json',
method: 'GET'
}).success(function(data, header, config, status){
//响应成功
}).error(function(data, header, config, status){
//处理响应失败
});
1.4.6 返回一个promise对象
2、返回一个promise对象
var promise = $http({
method:'GET',
url:"data.json"
});
由于$http方法返回一个promise对象,我们可以在响应返回时用then方法来处理回调。如果使用then方法,会得到一个特殊的参数,它代表了相应对象的成功或失败信息,还可以接受两个可选的函数作为参数。或者可以使用success和error回调代替。
promise.then(function(resp){
//resp是一个响应对象
}, function(resp){
//带有错误信息的resp
});
或者这样:
promise.success(function(data, status, config, headers){
//处理成功的响应
});
promise.error(function(data, status, hedaers, config){
//处理失败后的响应
});
then()方法与其他两种方法的主要区别是,它会接收到完整的响应对象,而success()和error()则会对响应对象进行析构。
1.4.7 $httpget实例
$http get实例
$http.get(url, {params:{id:'5'}}).success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
1.4.8 $http post实例
$http post实例:
var postData = {text:'这是post的内容'};
var config = {params:{id:'5'}}
$http.post(url, postData, config) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
1.4.9 $http Jsonp实例
$http Jsonp实例:
myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(function(data){
$scope.portalcate = data.result;
}).error(function(){
alert('shibai');
});
1.5 $routeProvider
使用$routeProvider绑定路由与视图。
我们可以利用路由服务定义这样一种东西:对于浏览器所指向的特定URL,Angular将会加载并显示一个模板,并实例化一个控制器来为模板提供内容。
切换视图的原理:Angular发起下图的请求:
XHR:SmlHttpRequest,本质是Ajax。
1.6 $injector
1.7 $location
1.7.1 简介
location服务解析地址栏中的URL(基于window.location),让你在应用代码中能获取到。改变地址栏中的URL会反应location服务中,反之亦然。
$location服务:
1. 暴露当前地址栏的URL,这样你就能
* 获取并监听URL。
* 改变URL。
2.当出现以下情况时同步URL
* 改变地址栏
* 点击了后退按钮(或者点击了历史链接)
* 点击了一个链接
3.一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate
1.7.2 $location不会做
当浏览器的URL改变时,不会重新加载整个页面。如果想要重新加载整个页面,需要使用$window.location.href。
1.7.3 内置方法
absUrl( ):只读;根据在RFC3986中指定的规则,返回url,带有所有的片段。
hash( ):读、写;当带有参数时,返回哈希碎片;当在带有参数的情况下,改变哈希碎片时,返回$location。
host( ):只读;返回url中的主机路径。
path( ):读、写;当没有任何参数时,返回当前url的路径;当带有参数时,改变路径,并返回$location。(返回的路径永远会带有/)
port( ):只读;返回当前路径的端口号。
protocol( ):只读;返回当前url的协议。
replace( ):如果被调用,就会用改变后的URL直接替换浏览器中的历史记录,而不是在历史记录中新建一条信息,这样可以阻止『后退』。
search( ):读、写;当不带参数调用的时候,以对象形式返回当前url的搜索部分。
url( ):读、写;当不带参数时,返回url;当带有参数时,返回$location。
1.7.4 代码示例
$location服务用于返回当前页面的URL地址,示例代码如下:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function(scope, location) {
scope.myUrl = location.absUrl();
});
1.8 $cacheFactory
1.9 $timeout $interval
1.10 $sce
1.11 $compiledirective动态加载内容服务
$compile服务——directive他妈
http://www.codesec.net/view/212004.html
(Good)AngularJS不得不了解的服务$compile用于动态显示html内容
http://www.gsgundam.com/2014-12-13-angularjs-compile-to-show-dymanic-html-content/
Compile介绍:
https://docs.angularjs.org/api/ng/service/$compile
节选一下关键部分内容,Javascript:
<script>
angular.module('compileExample', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
compileProvider.directive('compile', function(compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
})
.controller('GreeterController', ['scope', function(scope) {
$scope.name = 'Angular';
$scope.html = 'Hello ';
}]);
Html:
总之就是用$compile服务创建一个directive ‘compile’,这个complie会将传入的html字符串或者DOM转换为一个template,然后直接在html里调用compile即可。
2 参考链接
整理AngularJS中的一些常用指令
http://www.xker.com/page/e2015/06/198575.html
AngularJS移动开发中的坑汇总
http://blog.csdn.net/offbye/article/details/38490821?utm_source=tuicool&utm_medium=referral
25个超有用的AngularJS Web开发工具
http://www.chinaz.com/web/2015/0703/419434.shtml
AngularJS最理想开发工具WebStorm
http://blog.fens.me/angularjs-webstorm-ide/
angular通过$http与服务器通信
http://blog.csdn.net/yangnianbing110/article/details/43124679
AngularJS-常用服务
http://www.2cto.com/kf/201504/388774.html
第九讲Angularjs常用服务http location cacheFactory log
http://www.phonegap100.com/article-416-1.html
简介AngularJS中$http服务的用法
http://www.jb51.net/article/79243.htm
AngularJS中使用路由和$location切换视图
http://www.thinksaas.cn/group/topic/348590/
angularjs通过锚链接实现页面切换的问题
https://segmentfault.com/q/1010000002949626
走进AngularJs(二)ng模板中常用指令的使用方式-吕大豹
http://www.tuicool.com/articles/jIV7rm
React vs Angular 2:战争继续
http://ouvens.github.io/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html?utm_source=tuicool&utm_medium=referral
急急急!高手请帮忙!angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新
http://www.oschina.net/question/2356458_233962
ng-include用法分析以及多标签页面的简单实现方式
http://my.oschina.net/keysITer/blog/630621?p=1
深入理解ng里的scope
http://get.ftqq.com/462.get
angularJs前端的页面分解与组装
http://hudeyong926.iteye.com/blog/2111664
AngularJS -路由入门
http://www.linuxidc.com/Linux/2015-02/113532.htm
[javascript]AngularJS-需要routeChangeStart和locationChangeStart的一些组合
http://www.itstrike.cn/Question/f341de90-c2ae-4d71-b0e6-c547c92fb4bf.html
AngularJs ng-route路由详解
http://www.w2bc.com/article/95434
AngularJS ui-router (嵌套路由)
http://www.open-open.com/lib/view/open1416878937309.html
AngularJS使用UI Router实现表单向导
http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router
Angular监听路由变化事件
http://my.oschina.net/jack088/blog/479466
http://stackoverflow.com/questions/23585065/angularjs-ui-router-change-url-without-reloading-state
http://stackoverflow.com/questions/21309366/angularjs-ui-router-state-go-only-changing-url-in-address-bar-but-not-loa
AngularJS中locationchange、routechange事件
http://blog.csdn.net/spy19881201/article/details/17096675