Angular.js权威教程阅读笔记(第13~17章)

By | 2015年3月12日

Angular.js权威教程阅读笔记

13.依赖注入

三种方式获得对其依赖的控制权 * 在内部创建依赖 * 通过全局变量进行引用 * 在需要的地方通过参数进行传递

  • NG使用$injetor 来管理依赖关系
    • 负责实例化ng中所有的组件,包括应用的模块,指令和控制器
  • angular.module(‘myApp’, [])
  • .factory(‘greeter’, function(){
  •     return {
  •         greet: function(msg){ alert(msg);}
  •     };
  • }).controller(‘MyController’, function($scope,greeter){
  •     $scope.sayHello = function(){
  •         greeter.greet(‘world’);
  •     };
  • });
  • Ng的处理过程
    //使用注入器加载应用
    var injector = angular.injector(['ng','myApp']);
    //加载$controller服务
    var scope = injector.get(‘$rootScope’).$new();
    //加载控制器,并传入作用域
    var MyController = $controller(‘MyController’, {$scope: scope});
  • 推断式注入声明
    没有明确的声明,ng会假定参数名就是依赖的名称.

    • 该规则只适用于未压缩的代码
  • 显式注入声明
    • 不妨碍压缩
  • 行内注入声明
    • 可以随时使用行内注入,推荐做法
  • angular.module(‘myApp’)
  • .controller(‘MyController’, [‘$scope’, ‘greeter’, function($scope,greeter){
  •     // use $scope,greeter
  • }]);
  • $injector API
    • annotate()
      返回一个由服务名组成的数组,这些服务会在实例化是被注入到目标函数中
    • get()
      返回一个服务的实例
    • has()
      返回一个boolern,是否拥有该服务
    • instantiate()
      创建实例
    • invoke()
      调用方法
  • ngMin
    是个工具,减少定义依赖关系所需的工作,是一个预压缩工具
    例如,它会将代码:
    angular.module(‘myApp’,[])
  • .directive(‘myDirective’, function($http){
  • })
  • .controller(‘IndexController’, function($scope,$q){
  • });
  • 转化成:
    angular.module(‘myApp’,[])
  • .directive(‘myDirective’, [‘$http’, function($http){
  • }])
  • .controller(‘IndexController’, [‘$scope’,'$q’, function($scope,$q){
  • }]);

 

14.服务

控制器只会在需要时才被实例化,不再需要时就回被销毁

服务提供了一种能在应用的整个生命周期内保持数据的方法,能够在控制器之间进行通信,并且能保证数据的一致性.

服务是一个单例对象,被$injector实例化,是延迟加载(按需)

Ng中内置一些服务,使用方式是统一的

  • 创建服务
    • 使用factory 是最常见,灵活的方式
  • angular.module(‘myApp.services’, [])
  • .factory(‘githubService’, function(){
  •     var service = {};
  •     return service;
  • });
  • 创建服务时的设置项
    创建服务的方式

    • facttory(name, fn)
    • service(name,constructor)
  • var person = function($http){
  •     this.getName = function(){
  •         return $http({method:’GET’, url:’xxx/xxx’});
  •     };
  • };
  • angular.service(‘personService’, person);
    • constant()
      可以将一个已经存在的变量值注册为服务
      用来配置数据
      angular.module(‘myApp’).constant(‘apiKey’,’123123123′);
    • angular.module(‘myApp’)
    • .controller(‘MyController’,function($scope,apiKey){
    • });
    • value()
      用来注册服务对象或者函数
    • provider()
      • **如果希望在config()中可以对服务进行配置,必须使用provider()来定义服务

15.通信:XHR和服务器通信

  • $http
    只是简单封装了XMLHttpRequest对象,返回一个promise对象,具有success()和error()2个方法

    • $http的快捷方法
      1. get()
      2. delete()
      3. head()
      4. jsonp()
      5. post()
      6. put()
  • $http参数对象
    • method 字符串 ‘GET’, ‘POST’
    • url 字符串
    • params map字符串或者对象, 会被转换成查询字符串
    • data post时使用
    • headers
    • xsrfHeaderName
    • xsrfCookieName
    • transformRequest
    • transformResponse
    • cache
    • timeout
    • withCredentials
    • responseType 会在请求中设置XMLHttpRequestResponseType属性
      1. “”
      2. “arraybuffer”
      3. “blob”
      4. “document”
      5. “json”
      6. “text”
  • $http的响应对象
    包含四个属性

    • data 数据
    • status http状态码
    • headers 响应头
    • config 原始请求数据对象
  • 缓存HTTP请求
    请求缓存在$cacheFactory
    LRU(least recenlty used ,最近最少使用)缓存
    var lru = $cacheFactory(‘lru’,{
  •     capacity:20  //  缓存池大小
  • });
  • $http.get(‘/api/user.json,{cache:lru})
  • .success(function(data){});
  • 拦截器
    提供了一个从全局层面对响应进行处理的途径
    核心是服务工厂,通过向$httpProvider.interceptors数组中添加服务工厂,在$httpProvider中进行注册

    共有4中拦截器

    • request
      通过$http设置对象来对请求拦截器进行调用.
    • response
      通过$http设置
    • requestError
    • responseError
  • 使用拦截器
    //创建拦截器
  • angular.module(‘myApp’)
  • .factory(‘myInterceptor’, function($q){
  •     var interceptor = {
  •         ‘request’: function(config){
  •             return config; // or   $q.when(config);
  •         },
  •         ‘requestError’: function(rejection){
  •             return rejection;
  •             // return $q.reject(rejection);
  •         },
  •         ‘responseError’: function(rejection){
  •             return rejection;
  •         }
  •     };
  •     return interceptor;
  • });
  • //使用拦截器å
  • angular.module(‘myApp’)
  • .config(function($httpProvider){
  •     $httpProvider.interceptors.push(‘myInterceptor’);
  • });
  • $httpProvider
    可以在config()中对请求进行修改
  • $resource
    创建一个资源对象

    • 需要服务器支持RESTful
    • 是一个可选模块
  • Restangular
    专门用来从外部读取数据的ng服务

16.XHR实践

解决跨域问题:

  • JSONP
    原理是通过<script>标签 发起一个GET请求来取代XHR请求,jsonp生成一个script标签并插入到DOM中,然后浏览器回接管并向src的地址发起请求。响应结果会被包装成一个js函数,并有该请求所对应的回调函数调用
    $http提供了jsonp方法
    $http.jsonp(‘http://xxx.xom/xx’).success(function(data){
  • });
  • CORS
    CORS规范简单的扩展了标准的XHR对象,以允许js发送跨域的xhr请求,通过预检查来确认是有有权限想目标服务器发起请求
    使用

    1. 设置
      angular.module(‘myApp’,[])
    2. .config(function($httpProvider){
    3.     $httpProvider.defaults.useXDomain = true;
    4.     delete $httpProvider.defaults.headers.common['X-Requested-With'];
    5. });
    6. 服务端cors支持
      在响应中加入如下请求头

      • Access-Control-Allow-Origin
      • Access-Control-Allow-Credentials
    7. 简单请求
      • Head
      • Get
      • Post
    8. 服务器代理
  • 使用NG进行身份验证
    略过,配合过滤器
  • 和MongoDB通信
    略过

17.Promise

promise是一种用异步方式处理值的方法。可以看成远程对象的一个代理

 

使用promise的目的:获得功能组合喝错误冒泡能力的同时,保持代码异步运行的的能力

 

自带一些约定:

 

*   只有一个resolve或者reject会被调用

*   如果promise被执行or被拒绝,依赖于他们的处理程序仍然回被调用

*   总是异步调用

  • ng中的promise
    • 使用$q 创建promise
  • 示例:
    angular.module(‘myApp’[])
  • .factory(‘GitHubService’, [‘$q’,'$http’, function($q,$http){
  •     var getPullRequests = function(){
  •         var defered = $q.defer();
  •         $http.get(‘https//api.github.com’)
  •         .success(function(data){
  •             defered.resolve(data);
  •         }).error(function(reson){
  •             defered.reject(resion);
  •         });
  •         return defered.promise;
  •     };
  •     return {
  •         getPullRequest: getpullRequests
  •     };
  • }]);
  • 链式请求
    • all(promises)
      把多个promises合并成一个promises
    • defer()
      创建一个deferred对象
    • reject(reason)
      返回因某些原因拒绝的promise
    • when(value)
      包装成一个$q.promise

发表评论