AngularJS依賴注入VS ES6導入

Question

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

Answer 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依賴注入工作的一種方式。

Answer 2

就個人而言，我終於已經開始只使用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: ...}