angular 依赖注入

摘要:
Angular负责创建组件,解决组件之间的依赖关系,并根据需要提供其他组件。依赖注入的使用依赖注入在常规应用程序代码中经常使用-依赖可以在角度组件的构造方法或工厂方法中声明。笔记无法将“provider”类型的依赖项注入到run方法中-可以在模块的配置中声明“provider“和“constant”类型的依存项,但不能注入服务和值组件。varMyController=函数{//…}MyController.$inject=['$scope','greeter'];someModule.controller;注意,$inject中依赖项的顺序应该与构造函数中的参数一致。上述函数将$scope和greater服务声明为依赖项。AngularJS提供了最高的依赖注入机制。

依赖注入

   依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题。关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/articles/injection.html )。

   Angular负责创建组件,解决它们之间的依赖关系,并按要求提供其他组件。

使用依赖注入

  依赖注入在angular应用代码中使用很频繁。我们可以在定义组件或者在模块的run和config块中使用。

    - 可在angular组件(控制器、服务、过滤器、指令、动画等)的构造方法或工厂方法中声明依赖关系。可以向这些组件中注入服务(service)或者值(value)类型的依赖。

   -  可为控制器添加一些特殊的依赖,我们将在下面具体介绍。

   -  可在模块的run方法中定义依赖,可被注入的依赖包括服务(service)、值(value)和参量(constant)。注意.在run方法中不能注入"provider"类型的依赖.

   -  可在模块的config中声明“provider”和“constant”类型的依赖,但不能注入service和value组件。

依赖注入

   angular在执行某些方法(例如在服务的工厂方法、控制器构造方法)时会借助注入器(injector)因此我们需要在这些方法中加入标注来通知注入器哪些依赖需要被注入。可以通过以下三种方式注入服务:

    - 通过数组标注在方法的参数中声明依赖(优先考虑)

    - 定义在控制器构造方法的$inject属性中 

    - 通过方法参数名隐式的添加(有些注意事项)

 

    数组标注:   

   优先考虑用该方式为组件定义依赖,例如:   

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {  
  // ...  
}]); 
在代码中通过在第二个数组类型的参数中声明了'$scope','greeter'等依赖,数组最后一个元素为实际的构造方法,注意在构造方法的参数列表与其面的数组元素是一一对应的。

$inject属性

   我们还可以通过为控制器的构造方法添加$inject属性,并在该属性中添加依赖的方式定义依赖。

var MyController = function($scope, greeter) {  
 // ...  
}  
MyController.$inject = ['$scope', 'greeter'];  
someModule.controller('MyController', MyController);  

 注意$inject中依赖的顺序与构造方法中的参数需保持一致。

隐式声明依赖

   最简单的声明依赖的方式就是让设构造方法的参数与依赖的名字一样。

someModule.controller('MyController', function($scope, greeter) {  
 // ...  
});  

 注入器可以从函数的参数名中推断所依赖的服务。上面的函数中声明了$scope和greeter服务作为依赖。 这种方式可是代码更加简洁,但这种方式不能和Javascript的代码混淆器一起使用。

AngularJS提供了最高的依赖注入机制。它提供了以下核心组件,可以注入彼此依赖 

  • Value:变量可以修改,不可在config里注入
  • factory
  • service
  • provider
  • constant:常量,不可修改,可以在config里注入

angular 依赖注入第1张

var mainApp = angular.module("mainApp", []);

mainApp.constant("constant", 7);

    mainApp.config(["$provide","constant",function($provide,constant) {

         console.log(constant);

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

            this.$get = function() {

               var factory = {}; 

               factory.multiply = function(a, b) {

                  return a * b;

               }

               return factory;

            };

         });

      }]);

      mainApp.value("defaultInput", 5);

    

      mainApp.factory('MathService', function() {    

         var factory = {}; 

         factory.multiply = function(a, b) {

            return a * b;

         }

         return factory;

      });

 

      mainApp.service('CalcService', function(MathService){

            this.square = function(a) {

            return MathService.multiply(a,a);

         }

      });

 

      mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

            $scope.number = defaultInput;

            $scope.result = CalcService.square($scope.number);

 

            $scope.square = function() {

               $scope.result = CalcService.square($scope.number);

            }

      });

 

 

工厂方法

  angular中的指令、服务或者过滤器可以通过工厂方法定义。工厂方法是模块(module)的子方法。通常推荐按下面的方式使用工厂方法:

angular.module('myModule', [])  
.factory('serviceId', ['depService', function(depService) {  
 // ...  
}])  
.directive('directiveName', ['depService', function(depService) {  
 // ...  
}])  
.filter('filterName', ['depService', function(depService) {  
 // ...  
}]); 

模块方法

  angular模块提供了config和run方法方便开发者为模块添加配置和运行上下文的设置。和工厂方法类似,我们可以在config和run方法中定义依赖。例如:

angular.module('myModule', [])  
.config(['depProvider', function(depProvider) {  
 // ...  
}])  
.run(['depService', function(depService) {  
 // ...  
}]); 

控制器

  控制器的构造方法主要用来定义模板中所用的模型数据和行为。通常推荐按如下用法使用构造器:

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {  
 ...  
 $scope.aMethod = function() {  
  ...  
 }  
  ...  
}]);  

 除了service, value类的依赖,控制器中还注入一下依赖:

    - $scope:  控制器是与某个DOM元素通过作用域相关联。其他类型的组件只能访问$rootScope服务。

    - resolves : 如果在路由中实例化控制器,那么在路由里面解析的任何值域都可以作为依赖注入到控制器。

1.  angular.module('myModule', [])  

2.  .config(['depProvider', function(depProvider) {  

3.    // ...  

4.  }])  

5.  .run(['depService', function(depService) {  

6.    // ...  

}]); 

免责声明:文章转载自《angular 依赖注入》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇推荐一款 ES 集群可视化工具:Cerebro,简单、实用!MySQL的读写分离---主从复制、主主复制下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

cdn引入element-ui

在index.html中: <script src="http://t.zoukankan.com/static/js/vue.js"></script> <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" re...

Java 关于SpringbootJPA分页及排序

创建Pageable对象 看了网上很多博客,都是在用 new PageRequest的方法创建Pageable对象。可是估计很多同学写了之后才发现原来这个方法作者已经标记为过时了; 替代的方法是不要new PageRequest,而是直接用 PageRequest.of这个方法 根据你的需求选择入参; 下面贴出对比 @Override @Transact...

WinForm 创建与读写配置文件

1. 创建 app.config 文件:右击项目名称,选择“添加”→“添加新建项”,在出现的“添加新项”对话框中,选择“添加应用程序配置文件”;如果项目以前没有配置文件,则默认的文件名称为“app.config”,单击“确定”。 出现在设计器视图中的app.config文件为: <?xml version="1.0" encoding="utf...

Angular路由(一):路由的定义、跳转、传值

文件结构: 定义路由时,有两种定义方式:①在app.module.ts 中定义;②定义路由模块(app-routing.module.ts),将路由模块导入到app.module.ts 中,此处我们主要演示第二种,如果程序比较简单,路由数量单一,可以直接定义在app.module.ts 中。 路由定义: 在app-routing.module.ts 中,...

Visual Studio 14 初试,vNext

 下了几天的VS 2014 .终于安装上了,花了好几天时间,  VS 2014  下载地址, http://www.visualstudio.com/en-us/downloads/visual-studio-14-ctp-vs http://download.microsoft.com/download/A/E/A/AEA8A39F-E281-448E-...

Packet Tracer 思科模拟器入门教程 之二 交换机的基本配置与管理

原文链接:https://blog.csdn.net/gengkui9897/article/details/85109962 实验目标 掌握交换机基本信息的配置管理。技术原理 交换机的管理方式基本分为两种:带内管理和带外管理。通过交换机的Console端口管理交换机属于带外管理;这种管理方式不占用交换机的网络端口,第一次配置交换机必须利用Console端...