使用 ES6 和 webpack 导入 Angular 服务答案

【问题标题】：importing angular services with ES6 and webpack使用 ES6 和 webpack 导入 Angular 服务
【发布时间】：2015-11-29 12:53:30
【问题描述】：

我正在尝试使用 ES6 和 webpack 导入 $timeout，但我不断发现 $timeout 未定义。任何人都可以帮忙吗？如果有一种不涉及使用 $inject 的方法，我会更喜欢它，因为我正逐渐尝试在我的代码中摆脱 angularjs。

randomTVNames.service.js：

import angular from 'angular';

class RandomTVNames {
    constructor($timeout) {
        this.tv = ['Shield', 'Walking Dead', 'Castle', 'Leftovers'];
        this.timeout = $timeout;
        console.log(this.timeout);
    }

    getName() {
        const totalNames = this.tv.length;
        const rand = Math.floor(Math.random() * totalNames);
        return this.tv[rand];
    }

    getTimeout(){

        this.timeout(function () {
            alert("this is timeout")}, 3000);
    }
}

RandomTVNames.$inject = ['$timeout'];

//todo - try to inject angular argument (such as $timeout) with $inject
var randomTVNames = new RandomTVNames();

export default randomTVNames;

home.controller.js：

import randomTVNames from '../../services/randomTVNames.service';
import mainModule from '../../mainModule';

class HomeController {
    constructor() {
        this.tv = randomTVNames;
        this.name = 'World';
    }

    randomTVName($timeout) {
        this.name = this.tv.getName();
    }

    getCtrlTimeout(){
        this.tv.getTimeout();
    }

}

mainModule.controller('HomeController', HomeController);

【问题讨论】：

你在缩小你的代码吗？
$timeout 不会注入自己。当你在没有任何参数的情况下调用RandomTVNames 的构造函数时，你期望什么？
你的意思是这样的：“var randomTVNames = new RandomTVNames($timeout);”？因为我仍然知道 $timeout 是未定义的

标签： javascript angularjs ecmascript-6 webpack

【解决方案1】：

ES6 模块与 Angular 1.x 的模块系统不兼容。这意味着exporting 和importing 服务和控制器将不起作用，您需要使用 Angular 的模块系统注册和注入它们。

randomTVNames.service.js：

import mainModule from '../../mainModule';

class RandomTVNames {
    // ... snip ...
}

RandomTVNames.$inject = [ /* ... snip ... */ ];

mainModule.service('randomTVNames', RandomTVNames);

home.controller.js：

import mainModule from '../../mainModule';

class HomeController {
    constructor($scope, randomTVNames) {
        this.$scope = $scope;
        this.tv = randomTVNames;
    }
}

HomeController.$inject = ['$scope', 'randomTVNames'];

mainModule.controller('HomeController', HomeController);

然后在你的主 webpack 文件中，确保将它们都导入，以便它们被捆绑：

import 'services/randomTVNames.service';
import 'controllers/controller.service';

【讨论】：

感谢您的回答。你的意思是没有办法在 ES6 中使用 $timeout 或 $scope ？我尝试了你的建议，我得到“超时不是函数”。
这听起来像是你在$inject 数组中设置字符串的方式不同的错误。 $inject 属性告诉 Angular 模块加载器它需要使用正确的对象调用您的服务、控制器等。一般经验法则：如果您想使用$timeout 和$scope，您需要在$inject 数组中命名它们。任何使用$inject 的函数都应该不是exported 或imported，但应该使用mainModule.service()、mainModule.controller() 等传递给模块。

【解决方案2】：

没有办法摆脱 $inject，除非你没有缩小你的代码（但我希望你是）。

Angular 使用变量名注入变量，所以当它看到 $scope 时，它知道要查找并注入它，但是在缩小代码时，变量名会发生变化（$scope 变为 c 等）而 angular 不会知道你要注入什么对象。

这就是 $inject 的用途，因为字符串没有被缩小。

【讨论】：

感谢您的帮助，但即使使用 $inject 也无法正常工作。它在原始问题中被注释掉了，我修复了它。
尝试把 $inject = ['$timeout'];在构造函数之上
不要放'RandomTVNames.$inject = ['$timeout'];'只是'$inject = ['$timeout'];'
它说 $inject 没有定义
对不起，应该是：static $inject = ['$timeout']

【解决方案3】：

请查看this loader。它有助于您尝试做的事情。但请注意在您的 js 文件中的任何位置添加“ngInject”，它会注入任何东西

【讨论】：