前端之家收集整理的这篇文章主要介绍了
第二眼——AngularJS方法扩展之依赖注入,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
依赖注入 DI(Dependency Injection)
依赖注入主要是将一个功能注入到另一个不想跟的模块里面去, 让这个功能变成这个模块的一部分,叫做依赖注入,类似在一个功能模块中调用另一个模块(模块化)
只是模块化是在一个调用的里面去主动引入和查找另一个被调用的模块,而依赖注入是被调用者主动声明,并将自己注入到调用者内部
AngularJS的依赖注入主要是将一些功能或者值注入到控制器中,这是实现AngularJS方法扩展的主要方式之一
模块化与依赖注入的异同:
(关于前端模块化可以看《前端模块化的那些事儿》)
type |
common |
differentia |
模块化 |
解决不同层面之间的调用关系 |
调用者主动查找被调用者 |
依赖注入 |
解决不同层面之间的调用关系 |
被调用者声明主动声明,注入到调用者内部 |
在什么地方使用依赖注入?
AngularJS的依赖注入的方式
声明angularjs管理模块
@H_
403_67@var app = angular.module('app',[])
-
依赖注入的几种方式
@H_
403_67@//可以是值或
函数
app.value('MyValue','Hello world');
app.value('MyFunc',function() { return 'Samuel say hello to you!' });
app.controller('mycontroller',function($scope,MyValue,MyFunc) {
console.log( MyValue );
MyFunc();
});
@H_
403_67@app.constant('MyName','Samuel');//以第一次的赋值为主
app.constant('MyName','Sammuueell');
app.constroller('mycontroller',function( $scope,MyName ) {
console.log( MyName );//Samuel
});
@H_
403_67@app.factory('MyFactory',function() {
return {
showName: function() { console.log( 'Samuel' ) },showAge: function() { console.log( 25 ) }
}
});
app.controller('mycontrollre',MyFactory ) {
MyFactory.showName();
MyFactory.showAge();
});
@H_
403_67@app.service('MyService',function() {
this.setService = functioin() { }
});
app.controller('mycontroller',MyService ) {
console.log( MyService );
});
PS:与工厂模式的区别:.service相当于在底层直接通过new操作符创建了一个实例,而工厂模式需要通过返回对象的方式来调用
以上就是通过依赖注入给AngularJS进行扩展的基本方式,嚯嚯嚯~
那几眼哪儿去了?
第一眼——AngularJS
第三眼——AngularJS路由