Angular 1.3.10 未捕获的错误：[$injector:modulerr]答案

【问题标题】：Angular 1.3.10 Uncaught Error: [$injector:modulerr]Angular 1.3.10 未捕获的错误：[$injector:modulerr]
【发布时间】：2015-01-22 15:26:58
【问题描述】：

该应用目前包含的内容很少，因此这是一个基本错误。我正在使用ui路由器。这是我在各种文件中的内容：

app.module.js：

'use strict';

angular
    .module('app', app);

app.$inject = [

    'ui.router',
    'ngCookies',
    'ngSanitize',

];

function app(){}

app.routes.js：

'use strict';

angular
    .module('app')
    .config(routes);

    routes.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];

    function routes($stateProvider, $urlRouterProvider, $locationProvider) {

        // Remove # from url
        $locationProvider.html5Mode(true);

        // Set 404
        $urlRouterProvider.otherwise('/404');

        // Configure app states
        $stateProvider

            .state('app', {
                abstract: true,
                url: '',
                templateUrl: 'modules/app/app.html',
                controller: 'AppController'

            })
    }

app.controller.js：

'use strict';

angular
    .module('app')
    .controller('AppController', AppController);

    AppController.$inject = ['$rootScope', '$scope'];

    function AppController($rootScope, $scope) {

    }

我在页面加载时在控制台中收到上述错误 - 我错过了什么？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您正在对名为 app 的变量调用 $inject，该变量在全局范围内不存在：

angular.module('app', app);

app.$inject = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

现在，如果您将模块定义分配给名为 app 的变量，它可以工作：

var app = angular.module('app', app);

app.$inject = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

接下来是模块定义的签名：

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

您再次使用一个名为 app 的变量（它不存在），您的 requires/injectables 数组应该是。所以你可以这样做：

var injections = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

var app = angular.module('app', injections);

甚至更好：（保持全局范围清晰）

var app = angular.module('app', [
    'ui.router',
    'ngCookies',
    'ngSanitize',
]);

现在你可以剥离了：

app.$inject = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

但最佳做法是尽可能保持整个全局范围的整洁。所以你不要将你的模块分配给变量：

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

当你需要它来配置或附加控制器或指令等时，你调用：

angular.module('app').config();
angular.module('app').controller();
angular.module('app').directive();

或者您可以将它们链接在一起：

angular.module('app')
    .config()
    .controller()
    .directive();

另一个提示，在进行配置或创建控制器时，您不必进行单独的注入，您可以简单地这样做：

angular.module('app').config([
    '$stateProvider', '$urlRouterProvider', '$locationProvider',
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
      .....
    }
]);

括号符号是必需的，所以当你缩小你的脚本时，它不会搞砸你的注入，如果你不缩小你可以不用：

angular.module('app').config(
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
      .....
    }
);

我知道你的问题已经解决了，只是想我应该把事情弄清楚一点。祝你好运！

【讨论】：

括号符号是必需的，所以当你缩小你的脚本时这对我帮助最大......我在我的代码和生产服务器上省略了这个导致大问题.. . 但一切都在调试中工作。

【解决方案2】：

先去掉app.module.js中'ngSanitize'后面的逗号：

angular
    .module('app', [

    'ui.router',
    'ngCookies',
    'ngSanitize'

];

【讨论】：

【解决方案3】：

模块不喜欢这样被实例化，所以我把它改成了这样，它工作正常：

'use strict';

angular
    .module('app', [

    'ui.router',
    'ngCookies',
    'ngSanitize'    
];

【讨论】：