Angular + RequireJS应用程序给出错误＆＃34; mainController不是函数＆＃34;

Question

好的就是这种情况。我尝试从头开始构建AngularJS应用，并将其与RequireJS相结合。这就是它下山的地方。

我收到的错误是mainController is not a function got undefined。但有一段时间，我只能在浏览器的Console.log中看到一条消息，告诉我控制器的一些信息，就在错误出现之前。

这怎么可能？

正如我所说，我处于未知领域，我不知道在哪里看，所以我要给你们一些我有的文件^^

支持自己的代码

文件树

应用程序/模块/ main.js

require.config({
    paths: {
        //  Load dependencies
        'angular': '../lib/Angular-1.4.7/angular.min',
        'angular-route': '../lib/Angular-1.4.7/angular-route.min',

        //  Load modules
        'app': '../app/modules/core/app'
    },
    shim: {
        'angular-route': {
            deps: ['angular']
        },
        'app': {
            deps: ['angular-route']
        }
    }
});

require(['app'], function () {
    //  The application has been loaded
});

应用程序/模块/核心/ app.js

define(function () {
    var app = angular.module('app', ['ngRoute']);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/modules/core/views/home.html',
                controller: 'homeController'
            })
            .when('/home', {
                templateUrl: 'app/modules/core/views/home.html',
                controller: 'homeController'
            });
    }]);

    require(['../app/modules/core/controllerReferences'], function (references) {
        require(references, function () { 
            angular.bootstrap(document, ['app']);
        });
    })
});

应用程序/模块/核心/ controllerReferences.js

define(function () {
    return [
        'modules/core/controllers/mainController',
        'modules/core/controllers/homeController'
    ];
});

应用程序/模块/核心/控制器/ mainController.js

define(function () {
    var app = angular.module('app', []);

    app.controller('mainController', ['$scope', function ($scope) {
        console.log('mainController at your service');
    }]);
});

修改

我收到的错误

Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at http://localhost:3644/lib/Angular-1.4.7/angular.min.js:6:416
    at qb (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:22:131)
    at Sa (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:22:218)
    at http://localhost:3644/lib/Angular-1.4.7/angular.min.js:80:81
    at O (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:59:501)
    at K (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:60:338)
    at g (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:54:410)
    at g (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:54:433)
    at g (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:54:433)    
(anonymous function) @ angular.min.js:107
(anonymous function) @ angular.min.js:80
n.$apply @ angular.min.js:133
(anonymous function) @ angular.min.js:20
e @ angular.min.js:39
d @ angular.min.js:19
zc @ angular.min.js:20
(anonymous function) @ app.js:18
context.execCb @ require.js:1678
Module.check @ require.js:878
(anonymous function) @ require.js:1128
(anonymous function) @ require.js:131
(anonymous function) @ require.js:1178
each @ require.js:56
Module.emit @ require.js:1177
Module.check @ require.js:929
Module.enable @ require.js:1165
Module.init @ require.js:783
callGetModule @ require.js:1192
context.completeLoad @ require.js:1571
context.onScriptLoad @ require.js:1699

Answer 1

您的错误在您的控制器定义中。

var app = angular.module('app', []);创建一个新模块
var app = angular.module('app');检索现有模块

所以你的mainController.js应该是这样的：

define(function () {
    var app = angular.module('app');

    app.controller('mainController', ['$scope', function ($scope) {
        console.log('mainController at your service');
    }]);
});

基本上，你所做的是在开始时创建你的app模块三次 - 当你包含你的控制器时再创建两次。

有关详细信息，请参阅this question。