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

前端之家收集整理的这篇文章主要介绍了第二眼——AngularJS方法扩展之依赖注入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

依赖注入 DI(Dependency Injection)

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

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

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

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

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

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

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

  • 一般一些表示功能的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',MyFactory ) {
    MyFactory.showName();
    MyFactory.showAge();
});
  • 用.service()注入方法,这是以服务提供的方式实现扩展

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

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

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

那几眼哪儿去了?
第一眼——AngularJS
第三眼——AngularJS路由

原文链接:https://www.f2er.com/angularjs/148556.html

猜你在找的Angularjs相关文章