Day|Day 56/100 AngularJS 依赖注入 Day56

（一）需求 【Day|Day 56/100 AngularJS 依赖注入】被问到AngularJS依赖注入的原理时，发现自己掌握的不好，于是总结记录下。
（二）依赖注入介绍 1、为什么要有依赖注入？
减少代码之间的耦合度，使代码有很强的可扩展性。

模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；

是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；

依赖注入简化了组件之间处理依赖的过程（即解决依赖）。没有依赖注入，就不得不以某种方式自己查找$scope，很可能得使用全局变量。这虽然能够工作，但是不如AngularJS的依赖注入技术这么简单。

在开发中使用依赖注入的主要好处是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、分享成长认知方法欢迎关注我的公众号：国星聊成长
每周分享我学习到的成长/认知方法