Day 222/300 AngularJS 依赖注入

（一）需求

被问到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/93111791

写在最后的话

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

感兴趣的伙伴，可以加我微信：learningisconnecting

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

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

3、分享成长认知方法

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