Question

我是AngularJS上的菜鸟，我想用Angular和RequireJS启动一个应用程序。我已经阅读了很多关于它的事情，但不完全是我正在寻找的事情。

我用Yeoman和generator-angular-require开始了一个应用程序。问题是我想像这样组织我的应用程序：

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.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文件的内容。

我尝试过很多东西，例如定义一个模块并将所有控制器放入其中，但没有任何作用。

控制器/ include.js

define
([
    'angular',

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

控制器/ index.controller.js

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

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

    });
});

每当我尝试新的东西时，我都会遇到同样的错误：

未捕捉错误：[$ injector：nomod] http://errors.angularjs.org/1.2.25/ $ injector / nomod？p0 = MyApp

我现在关于一个不存在的模块。我非常确定我的MyApp.Controllers模块。但我不知道如何处理我的代码是正确的。

有人有想法吗？我真的迷失了那两个文件。我不知道如何在单独的文件中定义所有控制器并将它们包含在一个文件中。

感谢您的帮助。

Answer 1

我终于找到了解决方案。

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

AngularJS + RequireJS Startover

1 个答案: