AngularJS-使用ES6导入而不是angular DI系统

Question

我将Webpack与angular 1.6.x和Typescript一起使用，而我退出使用angular
DI来支持ES6导入。当我需要ng之类的ng函数时$http，$resource我angular.injector通过装饰器使用该函数直接注入它们，如下所示：

// inject.ts
    import * as angular from 'angular';

    export function inject (...params: string[]) {

        function doCall ( param: string, klass: Function) {
            const injector = angular.injector([ 'ng' ]);
            const service = injector.get(param);
            try {
                klass.prototype[ param ] = service;
            } catch ( e ) {
                window.console.warn( e );
            }
        }

        // tslint:disable-next-line:ban-types
        return function ( klass: Function ) {
            params.forEach( ( param ) => {
                doCall( param, klass );
            } );
        };
    }

// posts.service.ts
import { inject } from './inject';
import { IPost, Post } from './post';

@inject('$http')
export class PostsService {
    public $http: angular.IHttpService;
    get (): Promise<IPost[]> {
        const posts: IPost[] = [];
        const promise = new Promise<IPost[]>( (resolve, reject) => {
            this.$http.get<IPost[]>('https://jsonplaceholder.typicode.com/posts')
            .then(( response ) => {
                response.data.forEach(item => {
                    posts.push( new Post(item) );
                });

                resolve( posts );
            });
        });

        return promise;
    }
}


// post.ts
export interface IPost {
    userId: number;
    id: number;
    title: string;
    body: string;
}
export class Post implements IPost {
    userId: number;
    id: number;
    title: string;
    body: string;

    constructor (item: IPost) {
        this.userId = item.userId;
        this.id = item.id;
        this.title = item.title;
        this.body = item.body;
    }
}


// controller.ts
import { IPost } from './post';
import { PostsService } from './posts.service';

export class Controller {
    public postService: PostsService;
    public posts: IPost[];
    constructor ( private $scope: angular.IScope ) {
        this.postService = new PostsService();
    }

    $onInit () {
        this.postService.get()
        .then((posts) => {
            this.posts = posts;
            this.$scope.$digest();
        });
    }
}

// index.ts
import * as angular from 'angular';

import { Controller } from './app/controller';

import './index.scss';

export const app: string = 'app';

angular
  .module(app, [])
  .controller('controller', Controller);


angular.bootstrap(document.body, [app]);

我不知道它是否符合最佳实践，但到目前为止，它的运行情况还不错。

我想听听您对这个问题的想法：使用这种方法是否存在任何问题（性能，不良做法等）？

Answer 1

ES模块不能替代Angular模块和DI。它们相互补充，并保持应用程序模块化和可测试。

ES6模块提供了额外的可扩展性层，例如控制器/服务子类化（单独使用Angular模块和DI看起来不太好）。

ES6或TypeScript的推荐方法是按常规方式进行DI，并带有$inject注释：

export class PostsService {
  static $inject = ['$http'];
  constructor(
    public $http: angular.IHttpService
  ) {}
  ...
}

每个文件只有一个模块也是一种好习惯，这样应用程序可以保持模块化和可测试性：

export default angular.module('app.posts', [])
  .service('posts', `PostsService)
  .name;`

它的default导出是可以在直接依赖于它的另一个模块中导入的模块名称：

import postsModule from '...';
...
export default angular.module('app.controller', [postsModule])
  .controller('controller', Controller)
  .name;`

装饰器通常无法到达应用程序注射器。即使黑客有可能使其在生产环境中正常工作，它也会在测试中陷入混乱。

angular.injector 创建新的注入器（即应用程序实例），并且在生产中的使用用途非常有限：

angular.injector(['ng']).get('$rootScope') !== angular.injector(['ng']).get('$rootScope');

当开发人员不知道如何获取当前$injector实例时，通常会滥用它。当然不应该在这种情况下使用它。