【Hybrid开发高级系列】AngularJS(二)——常用$服务

2023-10-16 12:26:11 浏览数 (3)

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

1 人点赞