为了账号安全,请及时绑定邮箱和手机立即绑定

第二眼——AngularJS方法扩展之依赖注入

标签:
AngularJS

依赖注入 DI(Dependency Injection)

依赖注入主要是将一个功能注入到另一个不想跟的模块里面去, 让这个功能变成这个模块的一部分,叫做依赖注入,类似在一个功能模块中调用另一个模块(模块化)

只是模块化是在一个调用的里面去主动引入和查找另一个被调用的模块,而依赖注入是被调用者主动声明,并将自己注入到调用者内部

AngularJS的依赖注入主要是将一些功能或者值注入到控制器中,这是实现AngularJS方法扩展的主要方式之一

模块化与依赖注入的异同:
(关于前端模块化可以看《前端模块化的那些事儿》

typecommondifferentia
模块化解决不同层面之间的调用关系调用者主动查找被调用者
依赖注入解决不同层面之间的调用关系被调用者声明主动声明,注入到调用者内部

在什么地方使用依赖注入?

  • 依赖注入一般都是使用在纯粹表示功能的地方

  • 一般一些表示功能的api我们都可以提取出来,变成全局,所有AngularJS控制器都可以使用功能模块

  • 方法复用——面向切面编程

AngularJS的依赖注入的方式

  1. 声明angularjs管理模块

var app = angular.module('app',[])
  1. 依赖注入的几种方式

  • 使用.value() 前置声明,主要用于定义一些变量

//可以是值或函数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();
});
  • 使用.constant() 前置声明,它与.value()方法相同,主要是实现一些值的定义,但.constant()是静态变量的声明

app.constant('MyName', 'Samuel');//以第一次的赋值为主app.constant('MyName', 'Sammuueell');
app.constroller('mycontroller', function( $scope, MyName ) {    console.log( MyName );//Samuel});
  • 工厂模式.factory(),这是插件形式的扩展

app.factory('MyFactory', function() {    return {        showName: function() { console.log( 'Samuel' ) },        showAge: function() { console.log( 25 ) }
    }
});
app.controller('mycontrollre', function( $scope, MyFactory ) {
    MyFactory.showName();
    MyFactory.showAge();
});
  • 用.service()注入方法,这是以服务提供的方式实现扩展

app.service('MyService', function() {    this.setService = functioin() {  }
});
app.controller('mycontroller', function( $scope, MyService ) {    console.log( MyService );
});

PS:与工厂模式的区别:.service相当于在底层直接通过new操作符创建了一个实例,而工厂模式需要通过返回对象的方式来调用

以上就是通过依赖注入给AngularJS进行扩展的基本方式,嚯嚯嚯~



作者:Asambojur
链接:https://www.jianshu.com/p/90e536c524f8


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消