第二眼——AngularJS方法擴展之依賴注入

依賴注入 DI(Dependency Injection)

依賴注入主要是將一個功能注入到另外一個不想跟的模塊裏面去, 讓這個功能變成這個模塊的一部分,叫作依賴注入,相似在一個功能模塊中調用另外一個模塊(模塊化)javascript

只是模塊化是在一個調用的裏面去主動引入和查找另外一個被調用的模塊,而依賴注入是被調用者主動聲明,並將本身注入到調用者內部前端

AngularJS的依賴注入主要是將一些功能或者值注入到控制器中,這是實現AngularJS方法擴展的主要方式之一java

模塊化與依賴注入的異同:
(關於前端模塊化能夠看《前端模塊化的那些事兒》angularjs

type common differentia
模塊化 解決不一樣層面之間的調用關係 調用者主動查找被調用者
依賴注入 解決不一樣層面之間的調用關係 被調用者聲明主動聲明,注入到調用者內部

在什麼地方使用依賴注入?

  • 依賴注入通常都是使用在純粹表示功能的地方編程

  • 通常一些表示功能的api咱們均可以提取出來,變成全局,全部AngularJS控制器均可以使用功能模塊api

  • 方法複用——面向切面編程app

AngularJS的依賴注入的方式

  1. 聲明angularjs管理模塊模塊化

var app = angular.module('app',[])
  1. 依賴注入的幾種方式函數

    • 使用.value() 前置聲明,主要用於定義一些變量this

//能夠是值或函數
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進行擴展的基本方式,嚯嚯嚯~

那幾眼哪兒去了?
第一眼——AngularJS
第三眼——AngularJS路由

相關文章
相關標籤/搜索