乐趣区

关于javascript:Day-56100-AngularJS-依赖注入

jiezi

（一）需要

被问到 AngularJS 依赖注入的原理时，发现自己把握的不好，于是总结记录下。

（二）依赖注入介绍

1、为什么要有依赖注入？

缩小代码之间的耦合度，使代码有很强的可扩展性。

  1. 模板功能强大丰盛，并且是申明式的，自带了丰盛的 Angular 指令；
  2. 是一个比较完善的前端 MVC 框架，蕴含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有性能；
  3. 依赖注入简化了组件之间解决依赖的过程（即解决依赖）。没有依赖注入，就不得不以某种形式本人查找 $scope，很可能得应用全局变量。这尽管可能工作，然而不如 AngularJS 的依赖注入技术这么简略。
  4. 在开发中应用依赖注入的次要益处是 AngularJS 负责管理组件并在须要的时候提供给相应函数。依赖注入还可能为测试带来益处，因为它容许你应用假的或者模仿的对象来代替实在的组件，从而让开发者专一于程序的特定局部。

2、定义

依赖注入（Dependency Injection，简称 DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过援用传递）到一个独立的对象（或客户端）中，而后成为了该客户端状态的一部分。

该模式拆散了客户端依赖自身行为的创立，这使得程序设计变得松耦合，并遵循了依赖反转和繁多职责准则。与服务定位器模式造成间接比照的是，它容许客户端理解客户端如何应用该零碎找到依赖

3、依赖注解如何应用？

什么时候应用？

在开发中就能够用的，尤其是有很多模块的页面中，为了实现 mvc 的思维，把各个局部抽离进去，独自写成一个 angularjs 依赖的组件，在应用的时候间接拿来用，当你的我的项目须要交接或者批改的时候，间接批改组件的内容就能够

依赖注解应用有三种形式

(1)数组标注

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

(2)增加 $inject 属性

var MyController = function($scope, greeter) {

}

MyController.$inject = ['$scope', 'greeter'];

someModule.controller('MyController', MyController);

(3)隐式申明

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

应用场景

控制器中应用 DI

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

工厂办法中应用 DI

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

参考链接

1、知乎

https://zhuanlan.zhihu.com/p/…

写在最初的话

1、我建了一个前端学习小组

感兴趣的搭档，能够加我微信：learningisconnecting

2、学习路上，经常会懈怠

《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…

3、分享成长认知办法

欢送关注我的公众号：国星聊成长
每周分享我学习到的成长 / 认知办法

退出移动版