我是AngularJS的noob,我想用Angular和RequireJS啓動一個應用程序。 我讀過很多關於它的東西,但不是我正在尋找的東西。AngularJS + 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
模塊。但我不知道該怎麼做我的代碼纔是正確的。
有人有想法嗎?我真的迷失了那兩個文件。我不知道如何將所有控制器定義在單獨的文件中,並將它們包含在一個文件中。
感謝您的幫助。