AngularJS Dependency Injection VS ES6 Nhập

Question

Gần đây tôi đã tạo một dự án mới bằng AngularJS và ES6. Đây là dự án ES6 đầu tiên của tôi, và tôi rất hài lòng với các báo cáo nhập khẩu của nó. Trước đây tôi đã phải sử dụng AngularJS dependancy injection để sử dụng các dịch vụ khác nhau trong logic của ứng dụng của tôi. Bây giờ tôi có thể dễ dàng nhập các dịch vụ khác nhau bằng cách sử dụng nhập ES6. Câu hỏi đặt ra là tôi được phép viết các dịch vụ phi góc cạnh và nhập chúng bằng cách sử dụng import hoặc tôi phải viết chúng theo định dạng dịch vụ góc cạnh (hoặc nhà máy) và sử dụng tính năng tiêm phụ thuộc để nhập?

Answer 1

Trước hết, Angular dependency injection và ES6 import là 2 khái niệm khác nhau.

phụ thuộc góc tiêm là một cách để cung cấp các thành phần với phụ thuộc của chúng thay vì mã hóa cứng chúng trong thành phần. Điều này làm giảm một thành phần từ việc định vị sự phụ thuộc và làm cho các phụ thuộc có thể cấu hình được.

Nhập ES6 là tính năng javascript được sử dụng để nhập các ràng buộc được xuất bởi mô-đun khác.

Bạn có thể nhập mô-đun, đây có thể là lớp dịch vụ của bạn và thêm nó làm dịch vụ góc. Nếu bạn đang viết dịch vụ 'phi góc cạnh', chỉ cần đảm bảo dịch vụ là có thể xuất được lớp ES6. Bạn không thể trực tiếp sử dụng một lớp ES6 như là một sự phụ thuộc bởi vì góc cần đến góc-ify nó trước khi DI.

my-service.service.js

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

    getItem() { 
    return this.items; 
    } 
} 

MyService.$inject = ['SomeOtherService']; 

trong index.js

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

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

Đây là một cách mà ES6 có thể làm việc với hệ thống phun AngularJS phụ thuộc.

Answer 2

Cá nhân, tôi cuối cùng đã bắt đầu DI chỉ sử dụng để tiêm dịch vụ nội bộ như $ http VÀ cho dịch vụ singleton ứng dụng (kinh doanh logic), mà rất ít.

Nếu tôi cần lớp học, tôi muốn tự mình tạo nhanh (mới Cái gì đó (...)), sau đó tôi sử dụng cú pháp nhập khẩu mô-đun es6 và các lớp es6 tinh khiết. Và trên ứng dụng của tôi, các loại lớp này là đa số.

Vậy đó, hoạt động hoàn toàn ổn. Tôi phải nói rằng tôi đã đi đến quy trình làm việc này vì tự động hoàn thành IDE không hoạt động đúng với phương pháp DI, và nó bắt đầu làm phiền tôi rất nhiều. Bây giờ tôi tận hưởng hoàn toàn tuyệt vời, chính xác và tự động hoàn thành siêu nhanh.

Phụ thuộc vào góc cạnh (đặc biệt là các nhà máy) là một người cứu sống trong giai đoạn trước khi nhập khẩu-es6, vì nó đã tách biệt các không gian tên cho bạn. Bây giờ các mô-đun es6 làm điều này. Bạn vẫn được hưởng lợi từ DI, bởi vì nó chỉ là cách thuận tiện để sử dụng các dịch vụ nội bộ của Angular (ví dụ: $ http) và đó là cách thuận tiện để khởi tạo các lớp đơn (với .service (...)).

UPD.Nếu bạn muốn sử dụng phụ thuộc angularjs trong lớp học của bạn angularjs bên ngoài, bạn có thể sử dụng này:

chức năng

$http = injector('$http') 

Injector xuất phát từ đây:

// 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) 
} 

quan trọng! Hàm injector() chỉ được chạy sau khi tài liệu đã sẵn sàng. Thông thường đây là trường hợp, nhưng nếu không, bạn sẽ nhận được lỗi "Không thể đọc thuộc tính 'get' của undefined" trong injector (injector.js). Giải pháp chỉ đơn giản là tiêm sau khi tài liệu đã sẵn sàng:

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

let $http; 

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

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