angularjs - Angular 1.3.10 未捕获错误 : [$injector:modulerr]

Question

该应用程序目前包含的内容很少，因此这是一个基本错误。我正在使用 ui-router。这是我在各个文件中得到的内容:

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) {

    }

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

Answer 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 的变量(该变量不存在)，您的 require/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', []);

当您需要它进行配置或附加 Controller 或指令等时，您可以调用:

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

或者你可以将它们链接在一起:

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

另一个提示，在进行配置或创建 Controller 时，您不必进行单独的注入(inject)，您可以简单地执行以下操作:

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

需要括号符号，这样当你缩小脚本时，它不会搞砸你的注入(inject)，如果你不缩小，你可以不用:

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

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