AngularJS + RequireJS Startover

Question

我是AngularJS的新手，我想用RequireJS启动一个应用程序。我读过很多关于它的东西，但并不完全是我在寻找的东西。

我用约曼和发电机-角度要求启动了一个应用程序。问题是我想像这样组织我的应用程序：

app
|__ scripts
    |__ controllers
        |__ index.controller.js
        |__ user.controller.js
        |__ include.js
        |__ ...
    |__ directives
    |__ services
    |__ templates
        |__ index.template.html
        |__ user.template.html 
        |__ ...
    |__ init.js
    |__ app.js

Init.js (Require )

require.config
({
    baseUrl: 'scripts',
    paths: 
    {
        'angular' : '../bower_components/angular/angular.min',
        'angular-route' : '../bower_components/angular-route/angular-route.min',
        'angular-cookies' : '../bower_components/angular-cookies/angular-cookies.min',
        'angular-sanitize' : '../bower_components/angular-sanitize/angular-sanitize.min',
        'angular-resource' : '../bower_components/angular-resource/angular-resource.min',
        'angular-animate' : '../bower_components/angular-animate/angular-animate.min',
        'angular-touch' : '../bower_components/angular-touch/angular-touch.min',

        'foundation' : '../bower_components/foundation/js/foundation.min',
        'angular-foundation' : '../bower_components/angular-foundation/mm-foundation.min'
    },
    shim:
    {
        'angular' : 
        {
            'exports' : 'angular'
        },
        'angular-route': 
        [
            'angular'
        ],
        'angular-cookies': 
        [
            'angular'
        ],
        'angular-sanitize': 
        [
            'angular'
        ],
        'angular-resource': 
        [
            'angular'
        ],
        'angular-animate': 
        [
            'angular'
        ],
        'angular-touch': 
        [
            'angular'
        ],
        'angular-mocks':
        {
            deps:['angular'],
            'exports':'angular.mock'
        }
    },
    priority: 
    [
        'angular'
    ]
});

window.name = 'NG_DEFER_BOOTSTRAP!';

require(['app'], function(app)
{
    'use strict';

    app.init();
});

app.js

define(function(require)
{
    'use strict';

    var angular = require('angular');
    var services = require('./services/include');
    var controllers = require('./controllers/include');
    var directives = require('./directives/include');

    var app = angular.module('MyApp', ['services', 'controllers', 'directives']);

    app.init = function()
    {
        angular.bootstrap(document, ['MyApp']);
    };

    app.config
    ([
        '$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider)
        {
            $httpProvider.responseInterceptors.push('httpInterceptor');

            $routeProvider
                .when('/', { templateUrl: 'templates/index.template', controller: 'IndexCtrl' })
                .otherwise({ redirectTo: '/' });

            $locationProvider.html5Mode(true);
        }
    ]);

    app.run(function($window)
    {

    });

    return app;
});

这个接缝没问题。但是，我不知道如何定义我的控制器，以及在我的controllers/include.js文件中放什么。

我尝试过很多事情，比如定义一个模块并将所有控制器放入其中，但是都没有效果。

controllers/include.js

define
([
    'angular',

    'controllers/index.controller',
    'controllers/user.controller'
], function(angular)
{
    return angular.module('MyApp.Controllers', []);
});

controllers/index.controller.js

define(['angular'], function(angular)
{
    'use strict';

    angular.module('MyApp.Controllers').controller('IndexCtrl', function($scope)
    {

    });
});

每次我尝试新的东西，我都会犯同样的错误：

未明误差：$injector:nomod$注入器/模?p0=MyApp

我现在说的是一个不存在的模块。我很确定这是关于我的MyApp.Controllers模块的。但我不知道该怎么做才能让我的代码正确。

有人有主意吗？我真的被那两个文件弄糊涂了。我不知道如何将所有控制器定义在单独的文件中，并将它们包含在一个文件中。

谢谢你的帮助。

Answer 1

我终于找到了解决办法。

我不得不改变很多事情，但在https://github.com/tnajdek/angular-requirejs-seed的帮助下，我现在能够按照自己的意愿组织解决方案。