Day 56/100 AngularJS 依赖注入

(一)需求

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

(二)依赖注入介绍

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

减少代码之间的耦合度,使代码有很强的可扩展性。

  1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;
  2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;
  3. 依赖注入简化了组件之间处理依赖的过程(即解决依赖)。没有依赖注入,就不得不以某种方式自己查找$scope,很可能得使用全局变量。这虽然能够工作,但是不如AngularJS的依赖注入技术这么简单。
  4. 在开发中使用依赖注入的主要好处是AngularJS负责管理组件并在需要的时候提供给相应函数。依赖注入还能够为测试带来好处,因为它允许你使用假的或者模拟的对象来代替真实的组件,从而让开发者专注于程序的特定部分。

2、定义

Day 56/100 AngularJS 依赖注入_第1张图片

依赖注入(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、分享成长认知方法

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

你可能感兴趣的:(Day 56/100 AngularJS 依赖注入)