AngularJS中的依赖注入是什么？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【AngularJS中的依赖注入是什么？】

你们好，我是IT修真院深圳分院第12期的学员韩鹏，一枚正直纯洁善良的前端程序员，今天给你们分享一下，修真院官网JS任务7，深度思考中的知识点——AngularJS中的依赖注入是什么？

一、背景介绍

在软件工程中，依赖注入是实现控制反转的一种软件设计模式，一个依赖是一个被其余对象(client)调用的对象（服务）,注入则是将被依赖的对象(service)实例传递给依赖对象(client)的行为。将 被依赖的对象传给依赖者，而不须要依赖者本身去建立或查找所需对象是DI的基本原则。 依赖注入容许程序设计听从依赖倒置原则（简单的说就是要求对抽象进行编程，不要对实现进行编程，这样就下降了客户与实现模块间的耦合） 调用者(client)只需知道服务的接口，具体服务的查找和建立由注入者(injector)负责处理并提供给client，这样就分离了服务和调用者的依赖，符合低耦合的程序设计原则。

优势：

松耦合，可重用

提升了组件的可测试性

二、知识剖析

在Angular中DI是无处不在的，你能够用它来定义一个组件，也能够提供module实现run和config代码块。

• 像services, directives, filters 和 animations这样的组件都由一个工厂方法或者构造函数定义，在此service和value组件能够做为依赖注入到这些组件当中。
• Controllers经过一个构造函数定义，同样service和value组件能够做为依赖注入到组件当中，但他们也有着特殊的依赖关系。
• Module的run方法接受一个函数,在函数的参数中做为依赖能够注入service，value和constant组件，可是不能注入providers。
• Module的config方法接受一个函数,在函数的参数中做为依赖能够注入provider和constant组件，可是不能注入service和value。

AngularJS提供了很好的依赖注入机制，如下5个核心组件用来做为依赖注入：value、factory、service、provider、constant。

value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

angular.module(, []);
.value(, );
...
.controller(, (, , ) {
    .number ;
    .result .square(.number);

    .square () {
        .result .square(.number);
    }
});

factory

factory 是一个函数用于返回值。在 service 和 controller 须要时建立。

一般咱们使用 factory 函数来计算或返回值。

angular.module(, []);
.factory(, () {
    factory {};
    factory.multiply (, ) {
        }
    factory;
});
.service(, (){
    .square () {
        .multiply(,);
    }
});
...

provider

AngularJS 中经过 provider 建立一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

angular.module(, []);
...
.config(() {
    .provider(, () {
        .$get () {
            factory {};
            factory.multiply (, ) {
                ;
            }
            factory;
        };
    });
});

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

三、常见问题

AngularJS依赖注入的方法

四、解决方案

1. 经过函数的参数进行推断式注入声明（隐式声明）

若是没有明确的声明， AngularJS会假定参数名称就是依赖的名称。所以，它会在内部调用函数对象的toString()方法，分析并提取出函数的参数列表，而后经过 $injector将这些参数注入进对象实例。

1. 显式注入声明

AngularJS提供了显式的方法来明肯定义一个函数在被调用时须要用到的依赖关系。

经过这种方法声明依赖，即便在源代码被压缩、参数名称发生改变的状况下依然可以正常工做。

须要注意的地方:

对于这种声明方式来说，参数的顺序是十分重要的，由于$inject数组元素的顺序必须和注入的参数的顺序一一对应。

1. 行内注入声明

AngularJS提供的行内注入方法其实是一种语法糖，它与前面的提到的经过$inject属性进行声明的原理是同样的，可是容许咱们在函数定义的时候从行内将参数传入，这种方法方便，简单，并且避免了在定义的过程当中使用临时变量。

须要注意的地方:

行内声明的方式容许咱们直接传入一个参数数组，而不是一个函数。数组的元素是字符串，它们表明的是能够被注入到对象中的依赖名字，最后一个参数就是依赖注入的目标函数对象自己。

五、编码实战

六、扩展思考

AngularJS依赖注入有什么优势？

1、模板功能强大丰富，而且是声明式的，自带了丰富的Angular指令；

2、是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等全部功能；

3、依赖注入简化了组件之间处理依赖的过程（即解决依赖）。没有依赖注入，就不得不以某种方式本身查找$scope，极可能得使用全局变量。这虽然可以工做，可是不如AngularJS的依赖注入技术这么简单。

4、在开发中使用依赖注入的主要好处是AngularJS负责管理组件并在须要的时候提供给相应函数。依赖注入还可以为测试带来好处，由于它容许你使用假的或者模拟的对象来代替真实的组件，从而让开发者专一于程序的特定部分。

七、参考文献

参考一：Angular依赖注入详解————http://www.cnblogs.com/leonwa...

参考二：玩转 AngualrJS 的依赖注入————https://segmentfault.com/a/11...

参考三：理解AngularJS中的依赖注入————http://www.html-js.com/articl...

八、更多讨论

问：什么适合使用service方法？

答：service()方法很适合使用在功能控制比较多的service里面。

注意：须要使用.config()来配置service的时候不能使用service()方法

问：service和factory的区别

答：factory 是普通函数，能够返回任何东西。service 是构造函数，能够不返回东西。功能相同。

问：推荐使用行内注入声明的缘由？

答：写法上比显式注入声明更简单明了，比隐式注入声明更可靠（因为Javascript能够被压缩，AngularJS又是经过解析服务名称找到对应Service的，所以Javascript压缩以后AngularJS将没法找到指定的Service，但字符串不会被压缩，所以单独以字符串指定Service的名称能够避免这个问题）。

今天的分享就到这里啦，欢迎你们点赞、转发、留言、拍砖~

更多内容，能够加入IT交流群565734203与你们一块儿讨论交流