Angular依赖注入详解

1.依赖注入
依赖注入作为控制反转的一种实现。所有的DI实现都需要两个关键环节。
1.注册机制(向容器中注册服务)
2.注入并使用(使用的时候如何申明)

2.angular运行环境体系
<html>
<script src='angular.js'></script>
<script>
var app = angular.module("myApp",[ui-router]);
app.directive('aDirective',function(){})//注入指令
app.controller(firstController,function($scope){})//注入控制器
app.config();//可以注入provider constant,修改全局模版,提供元provider
app.run();//可以注入provider factory service value constant 保存全局变量,使用config中的元provider
app.factory();//注册服务
app.filter();//注册过滤器
app.provider('service1',function(){})//注册服务
</script>
<div ng-app="myApp" ng-controller="firstController"></div>
</html>
因此可以看到,依赖注入可以在任何时候进行。只要注册了服务即可。

3.注册机制
通过五个组件进行注册。
1.value(app.value 在controller回调中使用)
2.factory(app.factory(a,function(){}) 在service和controller回调中使用)
3.service(app.service(a,function(){})可以注入factory或者provider中注册的服务)
4.provider(app.conf($provider){$provider.provide(a,function(){})})app.provider 在config中注入$provider,使用$provider.provider注册
5.constant(app.constant(a,'1'))

4.注入并使用
注入的方式主要有三种:
1.数组方式:myApp.controller('a',[$a,$b,function(){$a,$b}]));
2.$inject:myApp.controller(a,function($a,$b){}) controller.inject=['$a','$b'];
3.隐式:myApp.controller(a,function($a,$b){})

5.总结
依赖注入的注册主要通过两种形式。
1.直接通过全局模块,注册 app.facotry app.service app.value app.constant。这种方式使用简单,但是在config之后加载,并且不能配置。
2.通过app.provider(A)+config($Aprovider),在config中使用$Aprovider.service 注册并修改服务方式。
6.源码
主要通过Function.prototype.toString方法实现。通过apply执行。
代码见github https://github.com/etoah/Eg/blob/master/Angular/di.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称...
    点融黑帮阅读 2,297评论 0 5
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    2e9a10d418ab阅读 1,453评论 0 10
  • 1、angularjs的几大特性是什么? 双向数据绑定、依赖注入、模板、指令、MVC/MVVM 2、列举几种常见的...
    秀才JaneBook阅读 1,595评论 0 22
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,338评论 19 139
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 5,676评论 0 26

友情链接更多精彩内容