一 、angular中的依赖注入

　　angular的一个很重要的特性就是依赖注入，可以分开理解这4个字。

　　1.依赖：

　　　　angular里面的依赖，有angular默认提供的，也有我们自己添加的。默认提供的比如$rootScope，$http，$injector等，我们也可以自己写factory函数来添加自己的依赖对象。

　　2.注入：

　　　　想要在当前上下文中使用已有的依赖，就必须通过$injector服务来获得依赖对象。

二、在一无所有的情况下获得$injector服务

　　$injector本身也是依赖之一，怎么样一无所有的情况下得到$injector呢？angular框架提供了angular.injector()全局函数。

　　这个函数接受modules数组作为它的参数，之后它就可以获得这些modules里面注册的各种服务了。特别是ng module，它是angular提供给我们的基础模块，$inject，$rootscope，$http等很多大家熟悉的服务都在ng module里面定义的。　　

　　看看下面代码：

<!doctype html>

<html>

<head>

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script>

        var $injector=angular.injector(['ng']);

        var $log=$injector.get('$log');

        $log.log('hello world!');

    </script>

</head>

<body>

</body>

</html>

　　大家发现这里没有ng-app属性，也没有angular.bootstrap()函数，但是我们得到了angularjs里面的$log服务。

三、angular启动过程中的$injector

　　在angular.bootstrap()函数里和$injector有关系的语句如下：

modules = modules || [];

modules.unshift(['$provide', function($provide) {

  $provide.value('$rootElement', element);

}]);

modules.unshift('ng');

var injector = createInjector(modules, config.strictDi);

injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',

       function bootstrapApply(scope, element, compile, injector) {

        scope.$apply(function() {

          element.data('$injector', injector);

          compile(element)(scope);

        });

      }]

　　这里的代码说明了angular启动过程中和我们前面的代码做了差不多的事情。

四、$injector和单元测试

　　我们平时写angular程序的时候$injector用处可能不是很大，毕竟controller等函数都在暗中帮我们把注入做好了。但是在写单元测试的时候，就不得不用到$injector了。

!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="//cdn.bootcss.com/jasmine/2.4.1/jasmine.css">

  <script src="//cdn.bootcss.com/jasmine/2.4.1/jasmine.js"></script>

  <script src="//cdn.bootcss.com/jasmine/2.4.1/jasmine-html.js"></script>

  <script src="//cdn.bootcss.com/jasmine/2.4.1/boot.js"></script>

  <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>

  <script src="//cdn.bootcss.com/angular.js/1.4.8/angular-mocks.js"></script>

</head>

<body>

  <script>

    angular.module('myModule', [])

      .factory('myLog', ['$log', function ($log) {

        return {

          log: function(message) {

            $log.log(message);

            return $log;

          }

        }

    }]);

    describe('myLog tests', function () {

      var myLog;

      beforeEach(module('myModule'));

      beforeEach(inject(function (_myLog_) {

        myLog = _myLog_;

      }));

      it('should log what my writting', function () {

        expect(myLog.log('hello world').log.logs).toContain(['hello world']);

      });

    });

  </script>

</body>

</html>　

　　以上代码中module('myModule')可以看成是var aa = angular.injector(['ng','ngMock','myModule']);，而后面的injector(function(_myLog_)...可以看成aa.invoke(['myLog',function(myLog){...。

Angular.js中的$injector服务的更多相关文章

  1. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

  2. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  3. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  4. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  5. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  6. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  7. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  8. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  9. Angular JS中的依赖注入

    依赖注入DI angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide. DI 容器3要素:服务的注册.依赖关系的 ...

随机推荐

  1. 自动加载类PHP中spl_autoload_register函数的用法

    spl_autoload_register(PHP 5 >= 5.1.2) spl_autoload_register — 注册__autoload()函数 说明bool spl_autoloa ...

  2. 【转】Qt之模型/视图

    [本文转自]http://blog.sina.com.cn/s/blog_a6fb6cc90101hh20.html   作者: 一去丶二三里 关于Qt中MVC的介绍与使用,助手中有一节模型/视图编程 ...

  3. C++ 约瑟夫环

    约瑟夫环: 已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列:他的下一个人又从1开始报数,数到m的那个人又出列:依此规律重复下去,直到圆桌周 ...

  4. spark 环境变量系列配置

    1. hadoop core-site.xml配置

  5. ACM中常用的C/C++函数

    只大概说明功能,具体用法请自行百度. C函数 memset:按字节填充地址空间 sscanf:从一个字符串中格式化读取变量 sprintf:将变量格式化写入字符串中 atoi:字符串转int atof ...

  6. angular 引入 component 报错

    每天抽出一些时间学习 Angular2 ,并准备把手头上的项目移植为 Angular2 , 不过今天又遇到了一些小问题. 准备写一个导航类适于管理后台常见的右边导航,如博客园的这种: ! 使用 g g ...

  7. PHPCMS V9二次开发便捷自定义后台入口文件夹

    phpcms v9二次开发便捷自定义后台入口文件夹 最新发布的phpcms v9由于采用了mvc的设计模式,所以它的后台访问地址是固定的,虽然可以通过修改路由配置文件来实现修改,但每次都修改路由配置文 ...

  8. php中JPGraph入门配置与应用

    什么是PHP JPGraph? 专门提供图表的类库.它使得作图变成了一件非常简单的事情.生成非美工人士生成的图表.二维码算法. 到官方网站下载. docportal 帮助手册 src 包含主要代码. ...

  9. 大整数算法[11] Karatsuba乘法

    ★ 引子         前面两篇介绍了 Comba 乘法,最后提到当输入的规模很大时,所需的计算时间会急剧增长,因为 Comba 乘法的时间复杂度仍然是 O(n^2).想要打破乘法中 O(n^2) ...

  10. UI、ID、UE和GUI，这些都是什么

    在网页和应用设计领域中,我们经常会听到人们用这些英文缩写描述设计工作,那么它们各自代表什么含义?具体的工作.方向和区别是什么呢? 下面让我们先来看看它们的英文全称和基本概念. UI(User Inte ...