angular js中的依赖注入是什么？

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

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

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

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

【JS-7】 

             angular js中的依赖注入是什么？ 

             分享人：朱士峰 

         

         

             目录 

             1.背景介绍 

             2.知识剖析 

             3.常见问题 

             4.解决方案 

             5.编码实战 

             6.扩展思考 

             7.参考文献 

             8.更多讨论 

         

         

 一.背景介绍 

         

         

             

                依赖注入式AngularJS的重要特性之一，依赖注入简化了Angular解析模块/组件之间依赖的过程。

                什么是依赖注入 

                wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，

                一个或更多的依赖（或服务）被注入（或者经过引用传递）到一个独立的对象（或客户端）中，而后成为了该客户端状态的一部分。

                该模式分离了客户端依赖自己行为的建立，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形

                成直接对比的是，它容许客户端了解客户端如何使用该系统找到依赖 . 

                一句话 --- 没事你不要来找我，有事我会去找你。

         

         

             

二.知识剖析 

             

             

                 angular依赖注入机制 

                 AngularJS 提供了5个核心组件用来做为依赖注入： 

                    value

                    factory

                    service

                    provider

                    constant 

             

             

                 $provide (供应商) 

                 供应商==>泛指provider 

                 服务==>泛指service 

                 provider==>provider()方法建立的东东

                 service==>service()方法建立的东东 

                 

                    $provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务。服务会被叫作供应商的东西来定义，咱们可使用$provide来建立一个供应商。

                    咱们须要使用$provide中的provider()方法来定义一个供应商，同时也能够经过要求$provide被注入到一个应用的config函数中来得到$provide服务。看图

                 

             

              

 

            

                 看一个例子： 

                 

                     

                        angular.module（‘app’，[]）.config(function($provide) {

                            $provide.provider('greeting', function() {

                                this.$get = function() {

                                    return function(name) {

                                    alert("Hello, " + name);

                                    };

                                };

                            });

                        });

                     

                 

                在上面的例子中咱们为一个服务定义了一个叫作greeting的新provider。

                咱们能够把一个叫作greeting的变量注入到任何可注入的函数中

                （例如控制器）而后Angular就会调用这个provider的$get函数来返回这个服务的一个实例

                在上面的例子中，被注入的是一个函数，

                它接受一个参数而且根据这个参数alert一条信息。咱们能够像下面这样使用它：

      

                        app.controller('MyCtrl', function($scope, greeting) {

                            $scope.onClick = function() {

                                greeting('Ford Prefect');

                            };

                        });

          

                 定义供应商的方法 

                 一、Constant 

                 Constant定义常量Constant定义的值不该该被改变，它能够被注入到任何地方，但不能被装饰器(decorator)装饰 

                 

                        var app = angular.module('app', []);

                            app.config(function ($provide) {

                                $provide.constant('myConstant', 'The Matrix');

                            });

        

                语法糖：

                 

                        app.constant('myConstant', 'The Matrix');

                     

                

                 二、Value 

                 Value能够是string,number甚至function,它和constant的不一样之处在于，它能够被修改，不能被注入到config中，可是它能够被decorator装饰 

                 

                        var app = angular.module('app', []);

                            app.config(function ($provide) {

                                $provide.value('myValue', 'The Matrix')

                            });

                     

                 

                语法糖：

                 

                        app.value('myValue', 'The Matrix');

                     

                 

             

             

                 三、Service 

                    Service是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通讯或者共享数据都很合适.

                    在service里面能够不用返回东西，由于AngularJS会调用new关键字来建立对象。

                 

                        var app = angular.module('app' ,[]);

                        app.config(function ($provide) {

                            $provide.service('myService', function () {

                                this.title = 'The Matrix';

                            });

                        });

                

                p语法糖：

                    

                        app.service('myService', function () {

                            this.title = 'The Matrix';

                        });

                     

              

                 四、Factory 

 

                  Factory是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，

                    Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，因此factory能够返回任何东西，而service能够不返回.

                    factory能够返回任何东西，它其实是一个只有$get方法的provider 

 

                        var app = angular.module('app', []);

                        app.config(function ($provide) {

                            $provide.factory('myFactory', function () {

                                return {

                                    title: 'The Matrix'

                                }

                            });

                        });

        

              语法糖：

                        app.factory('movie', function () {

                            return {

                                title: 'The Matrix'

                            }

                        });

               

                 Provider 

                 provider是value，Service,Factory的老大，除了constant其它都是provider的封装。

                    provider必须有一个$get方法，固然也能够说provider是一个可配置的factory 

                 

                        app.provider('greeting', function() {

                            var text = 'Hello, ';

                            this.setText = function(value) {

                                text = value;

                            };

                            this.$get = function() {

                                return function(name) {

                                    alert(text + name);

                                };

                        };

                    });

                        app.config(function(greetingProvider) {

                        greetingProvider.setText("Howdy there, ");

                    });

                        app.run(function(greeting) {

                        greeting('Ford Prefect');

                    });

                  

                 注意这里config方法注入的是greetingProvider，上面定义了一个供应商叫greeting，可是注入到config中不能直接写greeting，由于前文讲了注入的那个东西就是服务，是供应商提供出来的，而config中又只能注入供应商（两个例外是$provide和$injector）， 因此用驼峰命名法写成greetingProvider，Angular就会帮你注入它的供应商。 

                 

               

                    AngularJS分两个阶段运行咱们的用 – config阶段和run阶段。config阶段是咱们设置任何的provider的阶段。

                    它也是咱们设置任何的指令，控制器，过滤器以及其它东西的阶段。在run阶段，AngularJS会编译你的DOM并启动咱们的应用。

                 

             

 

三.常见问题          

1. factorry和value等服务与provider都是提供服务，为何还有人要使用provider?

 

 

 

2.请描述下factory和service的区别

 

 

 

3.依赖注入有哪几种方式？

 

四.解决方案

 问题1回答：

 

        

 

provider容许咱们进行一些配置。

 

在前面咱们已经提到过当你经过provider（或者其余简写方法）建立一个服务时，你实际上建立了一个新的provider，

它将定义咱们的服务如何被建立。这些provider能够被注入到config函数中，咱们能够和它们进行一些交互。

 

 

 

 问题2回答：

 

factory是普通function，而service是一个构造器(constructor)，

 

 Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，

 

 因此factory能够返回任何东西，而service能够不返回.factory能够返回任何东西，

 

 它其实是一个只有$get方法的provider 

 

 

 

问题3回答：

 

依赖注入有三种方式

 

1.经过数组标注在方法的参数中声明依赖

 

2.使用控制器构造方法的$inject属性注入依赖

 

3.经过方法参数隐式推断依赖

 

五.编码实战

六.拓展思考

这些依赖组件的本质是什么？

 

factory，service以及value所有都是用来定义一个provider的简写，

 

它们提供了一种方式来定义一个provider而无需输入全部的复杂的代码。

 

 

 

七.参考文献 

             参考一：

            https://segmentfault.com/a/11...

                   AngularJS中的Provider们：Service和Factory等的区别

             

             参考二：

                http://www.html-js.com/articl...

                   理解AngularJS中的依赖注入

             

         

         

 八.更多讨论 

---------------------