一 、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. Struts2 框架验证

    struts2框架验证(xml方式):    * 首先要从页面中获取对应的标签name属性的值,在动作类action中声明同名的属性,提供get和set方法        * 创建一个xml格式验证文 ...

  2. String类扩展

    String s1=new String("fsdfsd"); String s2=new String("fsdfsd"); String a1=" ...

  3. CIPAddressCtrl控件

    CIPAddressCtrl m_ipCtrl; 1.获取控件IP值 int GetAddress(byte& byteFirst, byte& byteTwo, byte& ...

  4. JSTL与EL之间的千丝万缕

    一.关于JSTL和EL: 什么是JSTL? JSTL( JSP Standard Tag Library)是JSP标准 标签库,由apache实现. 什么是EL? EL(Expression Lang ...

  5. vi初接触

    vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...

  6. Mysql中存储方式的区别

    MySQL的表属性有:MyISAM 和 InnoDB 2种存储方式: MyISAM 不支持事务回滚 InnoDB 支持事务回滚 可以用 show create table tablename 命令看表 ...

  7. jquery中的replaceWith()和html()有什么区别?

    区别在于,html()会替换指定元素内部的HTML,而replaceWith()会替换元素本身及其内部的HTML. 例子: 1 <div id="myid" /> 1 ...

  8. MYSQL id 自动加1

    个人心得 建立好表以后再进行修改总是容易出错 建议用sql语句进行创建表,定义相应的属性 CREATE TABLE USER( Id INTEGER PRIMARY KEY AUTO_INCREMEN ...

  9. 3.1 as86汇编器

    在开始讲述as86汇编器前,这本书引用内核中bootsect.s框架程序汇编代码来解释,记录下这一小段代码中不理解的地方,下面是这段实例代码: .globl begtext, begdata, beg ...

  10. 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...