带有 ES2016 加载配置模块的 AngularJS答案

【问题标题】：AnguarJS with ES2016 load config module带有 ES2016 加载配置模块的 AngularJS
【发布时间】：2017-01-31 10:12:39
【问题描述】：

我正在尝试启动一个基于 ES6 的新 Angular 1 应用程序。我使用 webpack 和 babel-loader 来转换 JS。

我现在的问题是加载自己的配置模块。请看这个：

// config/config.js
import angular from 'angular';

export default angular.module('config')
    .factory('config', () => {
        return {
            url: {
                products: 'https://....'
            },
            products: []
        }
    })

相应的 app.js 读取（我剥离了一些导入）：

import angular  from 'angular';

import config from './config/config';
import HomeCtrl from './controller/HomeController';


let app = () => {
  return {
    template: require('./app.html')
  }
};


const MODULE_NAME = 'app';

angular.module(MODULE_NAME, [uiRouter, config])
    .directive('myapp', app)
    .config(['$stateProvider', '$urlRouterProvider', 'config', function ($stateProvider, $urlRouterProvider, config) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
        .state("home", {
            "url": "/",
            "template": require('./views/home.html'),
            "controller": HomeCtrl,
            'controllerAs': 'app'
        })


    }]);


export default MODULE_NAME;

错误信息说：

未捕获的错误：[$injector:nomod] 模块“配置”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我在这里错过了什么？有没有更好的方法来加载应用程序范围的配置对象以在某些服务中使用？

感谢您的帮助！

【问题讨论】：

如果您是从头开始，请跳过 Angular1 并使用 Angular2。

标签： javascript angularjs ecmascript-6

【解决方案1】：

当您创建一个模块时，您必须使用两个参数调用module()：名称和依赖项。如果您只使用一个参数调用它，您将获得具有该名称的现有模块。

将您的模块config 声明更改为：

export default angular.module('config', [])
    .factory('config', () => {
        return {
            url: {
                products: 'https://....'
            },
            products: []
        }
    }).name

另外，我总是只导出新模块的.name。当你导入模块时，你只需要它的名字。

希望对你有帮助。

【讨论】：

这是最好的解决方案。我的定义中的第二个论点确实缺失了。而导出 .name 只能解决问题，您必须将字符串定义为 @ovidiu-dolha 和 @VadimB 提到的依赖配置。谢谢！

【解决方案2】：

当您在主模块定义中声明依赖模块时，您需要使用字符串标识符，而不是实际的 angular.module（至少在这里它被指定为 Array[String]:https://docs.angularjs.org/api/ng/function/angular.module

所以，你应该改成这样：

angular.module(MODULE_NAME, ['config'])

【讨论】：

【解决方案3】：

请查看 Angular 文档 - 模块依赖项，它是字符串数组，但不是依赖模块类型或实例

angular.module(name, [requires], [configFn]);

什么时候

requires (optional) Array<string>

所以你使用下一个声明的解决方案 angular.module(MODULE_NAME, ['config'])

https://docs.angularjs.org/api/ng/function/angular.module

【讨论】：