Я - noob на AngularJS, и я хочу запустить приложение с Angular и RequireJS. Я читал много вещей об этом, но не совсем то, что я ищу.AngularJS + RequireJS Startover
Я начал приложение с Yeoman и генератор-угловое требование. Проблема заключается в том, я хочу, чтобы организовать мое приложение, как это:
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 (Требовать Config)
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)
{
});
});
Everytime я попробовать что-то новое, я получил ту же ошибку:
Непринятая ошибка: [$ инжектор: nomod] http://errors.angularjs.org/1.2.25/ $ инжектор/nomod? P0 = MyApp
Я теперь что-то о модуле, которого не существует. Я почти уверен, что это мой модуль MyApp.Controllers. Но я не знаю, что делать, чтобы мой код был правильным.
Есть ли у кого-то идеи? Я действительно потерялся с этими двумя файлами. Я не знаю, как я могу определить все мои контроллеры в отдельных файлах и включить их в один файл.
Спасибо за помощь.