依赖注入
依赖注入(DI)是一种软件设计模式,处理组件如何获取其依赖关系。
AngularJS注入器子系统负责创建组件,解析它们的依赖关系,并根据请求将它们提供给其他组件。
使用依赖注入
DI遍布AngularJS。 可以在定义组件或为模块提供运行和配置块时使用它。

  • 诸如服务,指令,过滤器和动画之类的组件由注入工厂方法或构造函数定义。 这些组件可以注入“服务”和“值”组件作为依赖关系。

  • 控制器由构造函数定义,可以使用任何“服务”和“值”组件作为依赖关系注入,但是它们也可以提供特殊的依赖关系。

  • run方法接受一个函数,它可以注入"service","value"和"constant"组件作为依赖。 请注意,不能将"providers"注入运行块。

  • config方法接受一个函数,它可以注入"provider"和"constant"组件作为依赖。 请注意,无法将“服务”或“值”组件注入配置。

工厂方法
定义指令,服务或过滤器的方式是使用工厂函数。 工厂方法使用模块注册。 推荐的工厂声明方式是:

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

模块方法
我们可以通过调用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() {
    ...
  }
  ...
}]);

与服务不同,应用程序中可能有许多相同类型的控制器实例。

此外,对控制器提供附加的依赖性:

  • $scope:控制器与DOM中的元素相关联,因此提供对该作用域的访问。 其他组件(如服务)只能访问$rootScope服务。

  • resolves:如果将控制器实例化为路由的一部分,则作为路由的一部分解析的任何值都可用于注入到控制器中。

依赖注解
AngularJS通过注入器调用某些功能(如服务工厂和控制器)。 需要注解这些函数,以便注入器知道要注入到函数中的服务。 有三种方法用服务名称信息注解代码:

  • 使用内联数组注解(首选)

  • 使用$inject属性注解

  • 隐含地从函数参数名称(有警告)

内联数组注解
这是注解应用程序组件的首选方式。 这是文档中的示例如何编写。
例如:

someModule.controller('MyController','greeter',greeter) {
  // ...
}]);

这里我们传递一个数组,其元素由一个字符串列表(依赖项的名称)和函数本身组成。
当使用这种类型的注解时,注意保持注解数组与函数声明中的参数同步。
$inject属性注解
为了允许简写重命名函数参数并仍然能够注入正确的服务,该函数需要使用$inject属性注解。 $inject属性是要注入的服务名称的数组。

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

在这种情况下,$inject数组中的值的顺序必须与MyController中的参数的顺序匹配。
就像数组注解一样,你需要注意保持$inject与函数声明中的参数同步。
隐式注解
注意:如果计划缩小代码,你的服务名称将被重命名并破坏你的应用程序。

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

给定一个函数,注入器可以通过检查函数声明并提取参数名称来推断要注入的服务的名称。 在上面的例子中,$scope和greeter是需要注入到函数中的两个服务。
这种方法的一个优点是没有与函数参数保持同步的名称数组。 可以自由地重新排序依赖项。
但是这个方法不能使用JavaScript minifiers / obfuscators,因为他们会重命名参数。
像ng-annotate这样的工具可以在应用程序中使用隐式依赖关系注解,并在缩小之前自动添加内联数组注解。 如果你决定采取这种方法,你可能想使用ng-strict-di。
由于这些注意事项,我们建议避免使用此样式的注解。
使用严格依赖注入
可以在与ng-app相同的元素上添加ng-strict-di指令以选择进入严格DI模式:

<!doctype html>
<html ng-app="myApp" ng-strict-di>
<body>
  I can add: {{ 1 + 2 }}.
  <script src="angular.js"></script>
</body>
</html>

只要服务尝试使用隐式注解,严格模式就会抛出错误。
考虑这个模块,其中包括一个使用隐式DI的willBreak服务:

angular.module('myApp',[])
.factory('willBreak',function($rootScope) {
  // $rootScope是被隐式注解
})
.run(['willBreak',function(willBreak) {
  //当它运行时AngularJS抛出这个异常
}]);

当willBreak服务被实例化时,AngularJS将抛出一个错误,因为严格的模式。 当使用ng-annotate等工具确保所有应用程序组件都有注解时,这是非常有用的。
如果使用手动引导,还可以通过在可选配置参数中提供strictDi:true来使用严格的DI:

angular.bootstrap(document,['myApp'],{
  strictDi: true
});

为什么要依赖注入?
这部分激励和解释AngularJS使用DI。有关如何使用DI,请参见上文。
组件(对象或函数)只有三种方式可以获得它的依赖:

  • 组件可以创建依赖关系,通常使用new运算符。

  • 组件可以通过引用全局变量来查找依赖关系。

  • 组件可以在需要的地方传递依赖。

创建或查找依赖关系的前两个选项不是最优的,因为它们会对组件的依赖性进行硬编码。这使得很难,即使不是不可能,修改依赖性。这在测试中尤其成问题,其中通常期望提供用于测试隔离的模拟依赖性。
第三个选项是最可行的,因为它消除了从组件定位依赖性的责任。依赖项简单地交给组件。

function SomeClass(greeter) {
  this.greeter = greeter;
}

SomeClass.prototype.doSomething = function(name) {
  this.greeter.greet(name);
}

在上面的例子中,SomeClass不关心创建或定位greeter依赖,它只是在实例化时传递给greeter。
这是可取的,但它负责获取构造SomeClass的代码的依赖。
为了管理依赖项创建的责任,每个AngularJS应用程序都有一个注入器。 注入器是负责构建和查找依赖性的服务定位器。
以下是使用注入器服务的示例:

// 在模块中提供连接信息
var myModule = angular.module('myModule',[]);

指示注入器如何建立一个greeter服务。 注意greeter依赖于$window服务。 greeter服务是一个包含greet方法的对象。

myModule.factory('greeter',function($window) {
  return {
    greet: function(text) {
      $window.alert(text);
    }
  };
});

创建一个新的注入器,它可以提供myModule模块中定义的组件,并从注入器请求我们的greeter服务。 (这通常由AngularJS引导自动完成)。

var injector = angular.injector(['ng','myModule']);
var greeter = injector.get('greeter');

请求依赖性解决了硬编码的问题,但它也意味着注入器需要在整个应用程序中传递。 通过注入器打破了Demeter的定律。 为了弥补这一点,我们在HTML模板中使用声明符号,将创建组件的责任交给注入器,如下例所示:

<div ng-controller="MyController">
  <button ng-click="sayHello()">Hello</button>
</div>
function MyController($scope,greeter) {
  $scope.sayHello = function() {
    greeter.greet('Hello World');
  };
}

当AngularJS编译HTML时,它会处理ng-controller指令,然后请求注入器创建控制器及其依赖关系的实例。

injector.instantiate(MyController);

这一切都在幕后完成。 注意,通过让ng-controller要求注入器实例化类,它可以满足MyController的所有依赖性,而控制器不知道注入器。这是最好的结果。 应用程序代码简单地声明它需要的依赖性,而不必处理注入器。 这个设置不打破德米特法。

Angular开发者指南七依赖注入的更多相关文章

  1. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

  2. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  3. 利用require.js与angular搭建spa应用的方法实例

    这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例,文中通过示例代码给大家介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。

  4. 详解Angular动态组件

    本文主要介绍了Angular动态组件,对此感兴趣的同学,可以亲自实验一下。

  5. 详解如何使用webpack+es6开发angular1.x

    本篇文章主要介绍了详解如何使用webpack+es6开发angular1.x,具有一定的参考价值,有兴趣的可以了解一下

  6. angular2系列之路由转场动画的示例代码

    本篇文章主要介绍了angular2系列之路由转场动画的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. 一种angular的方法级的缓存注解(装饰器)

    本篇文章主要介绍了一种angular的方法级的缓存注解(装饰器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. 动手写一个angular版本的Message组件的方法

    本篇文章主要介绍了动手写一个angular版本的Message组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. angular forEach方法遍历源码解读

    这篇文章主要为大家详细了angular forEach方法遍历源码,forEach()方法用于遍历对象或数组,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Angular的MVC和作用域

    本文主要Angular的MVC和作用域进行详细分析介绍,具有一定的参考价值,下面跟着小编一起来看下吧

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部