我遵循本教程(https://www.startersquad.com/blog/angularjs-requirejs/)以使用AngularJS + RequireJS构建应用程序;我面临的问题是,我没有任何错误,只是一个空白页面.. 在提示中,我可以看到我的所有模块(包括ui-router和app):'模块已创建但从未加载' ...
我无法看到我做错了什么,以及为什么没有加载任何东西;调用angular.bootstrap,我可以看到日志。
这是我的架构:
main.js
require.config({
// Alias libraries paths
paths: {
'domReady': './app/bower_components/requirejs-domready/domReady',
'angular': './app/bower_components/angular/angular',
'uiRouter': './app/bower_components/angular-ui-router/release/angular-ui-router'
},
// To support AMD
shim: {
'angular': {
exports: 'angular'
},
'uiRouter': {
deps: ['angular']
}
},
// Kick start application
deps: ['./bootstrap']
});
bootstrap.js
/**
* Bootstraps Angular onto the window.document node
*/
define([
'require',
'angular',
'uiRouter',
'app',
'routes'
], function(require, ng) {
'use strict';
require(['domReady!'], function(document) {
console.log('document is ready : ' + document);
ng.bootstrap(document, ['app']);
console.log('after bootstrap');
});
});
app.js
define([
'angular',
'uiRouter',
'./app/components/index'
], function(ng) {
'use strict';
return ng.module('app', [
'app.components',
'ui.router'
]);
});
routes.js
define(['./app'], function(app) {
'use strict';
return app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/javascripts/app/components/home/views/home.html',
controller: 'MainCtrl',
resolve: {
contactPromise: ['contacts', function(contacts) {
return contacts.getAll();
}]
}
})
.state('contacts', {
url: '/contacts',
templateUrl: '/javascripts/app/components/contact/views/list.html',
controller: 'ContactsListCtrl',
resolve: {
contactPromise: ['contacts', function(contacts) {
return contacts.getAll();
}]
}
})
.state('contacts_show', {
url: '/contacts/{id}',
templateUrl: '/javascripts/app/components/contact/views/show.html',
controller: 'ContactsShowCtrl',
resolve: {
contact: ['$stateParams', 'contacts', function($stateParams, contacts) {
return contacts.get($stateParams.id);
}]
}
});
$urlRouterProvider.otherwise('home');
}
]);
});
应用/组件/ index.js
define([
'./contact/index',
'./home/index'
], function() {});
应用/组件/ module.js
define(['angular'], function(ng) {
'use strict';
return ng.module('app.components', []);
});
应用/组件/接触/ index.js
define([
'./controllers/ContactsControllers',
'./services/contactFactory'
], function() {});
应用/组件/接触/ module.js
define(['angular', '../module'], function(angular, module) {
'use strict';
return angular.module('app.components.contact', []);
});
app / components / contact / controllers / ContactsControllers.js (例如)
define(['../module'], function(module) {
'use strict';
module.controller('ContactsListCtrl', [
'$scope',
'contacts',
function($scope, contacts) {
$scope.contacts = contacts.contacts;
$scope.addContact = function() {
if (!$scope.name || $scope.name === '' || !$scope.firstname || $scope.firstname === '') {
return;
}
contacts.create({
name: $scope.name,
firstname: $scope.firstname,
dynamicField: 'test'
});
$scope.name = '';
$scope.firstname = '';
};
}
]);
module.controller('ContactsShowCtrl', [
'$scope',
'contacts',
'contact',
function($scope, contacts, contact) {
$scope.contact = contact;
}
]);
});
有什么想法吗?
编辑:我的angularjs由nodejs服务器提供服务,也许它改变了一些东西.. 这是我的index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Troubadour : Prenez votre groupe en main !</title>
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
-->
</head>
<body>
<div class="container-fluid">
<ui-view></ui-view>
</div>
<!-- .container-fluid -->
<script src="/javascripts/app/bower_components/requirejs/require.js" data-main="/javascripts/main.js"></script>
</body>
</html>