2017-05-09 217 views
6

我最近使用AngularJS和ES6創建了一個新項目。這是我第一個ES6項目,我對它的進口報表非常滿意。以前,我必須使用AngularJS依賴注入來在我的應用程序邏輯中使用不同的服務。現在我可以使用ES6導入輕鬆導入不同的服務。問題是,我允許編寫非角度服務並使用import導入它們,或者我必須以角度服務(或工廠)格式編寫它們,並使用依賴注入來導入?AngularJS依賴注入VS ES6導入

+0

依賴注入和導入甚至沒有遠程相關。你將使用兩者。 – zeroflagL

+1

是的,我同時使用。但我的問題是關於在控制器中需要一項服務。我可以編寫角度服務並將其注入到控制器中,或者我可以編寫一個普通的JS類或函數並將其導入到控制器中使用。我問是否在AngularJS中使用導入而不是AngularJS DI反模式。 @zeroflagL – Najafsen

+4

我認爲這是一個完全有效的問題。我也在尋找這個答案。 – Brendan

回答

1

首先,Angular dependency injection和ES6 import是兩個不同的概念。

角度依賴關係注入是一種提供組件的依賴關係,而不是在組件內對其進行硬編碼的方法。這可以減輕組件查找依賴關係的可能性並使依賴關係可配置。

ES6導入是一個JavaScript功能,用於導入由另一個模塊導出的綁定。

您可以導入一個模塊,該模塊可以是您的服​​務級別並將其添加爲角度服務。如果您正在編寫「無角度」服務,請確保它是可導出的ES6類。您不能直接使用ES6類作爲依賴項,因爲角度需要在DI之前對其進行角度化。

my-service.service.js

export default class MyService { 
    constructor() { 
    this.items = ['']; 
    } 

    getItem() { 
    return this.items; 
    } 
} 

MyService.$inject = ['SomeOtherService']; 

index.js

import angular from 'angular'; 
import MyService from './my-service.service'; 

angular.module('myApp') 
    .service('MyService', MyService); 

這是ES6可以用AngularJS依賴注入工作的一種方式。

1

就個人而言,我終於已經開始使用DI注入像$ HTTP和應用程序(業務邏輯)的服務,這是一些內部服務。

如果我需要類,我想要自己實例化(new Something(...)),那麼我使用es6模塊導入語法和純es6類。在我的應用程序中,這些類型是多數。

就是這樣,完美的作品。我必須說我已經到了這個工作流程,因爲IDE自動完成無法在DI方法中正常工作,並且它開始讓我非常煩惱。現在我享受絕對真棒,正確和超快速的自動完成。

Angularjs的依賴關係(特別是工廠)是es6-imports之前的生命保護者,因爲它爲你隔離了命名空間。現在es6模塊執行此操作。 儘管如此,您仍然可以從DI獲益,因爲它只是使用Angular內部服務(例如$ http)的便捷方式,並且它是實例化單例類(使用.service(...))的便捷方式。

UPD。如果你想在你的類使用angularjs依賴外angularjs,你可以使用這個:

$http = injector('$http') 

噴油器功能來自這裏:

// injector.js 
let cache = {} 

/** 
* Use example: 
* import injector from 'injector.js' 
* $http = injector('$http') 
* 
* @param dependency {string} 
*/ 

export function injector (dependency) { 

    return cache.hasOwnProperty(dependency) 
    ? cache[dependency] 
    : cache[dependency] = angular.element(document).injector().get(dependency) 
} 

重要!只有在文檔準備就緒後,注入器()函數才能運行。通常情況就是這樣,但是如果沒有,你將在注入器(injector.js)中出現錯誤「Can not read property'get'undefined」。解決方案簡單地在文檔準備好後進行注入:

import { injector } from '../injector.js' 

let $http; 

angular.element(document).ready(() => { 
    $http = injector('$http') 
}) 

export const myHttp = {get: (...) => $http.get(...), post: ...}