我正在将AngularJS与RequireJS一起使用。
新问题:RequireJS不加载任何控制器。
我正在使用this tutorial。
旧问题:
RequireJS加载main.js文件,bootstrap.min.js文件和jQuery。这很好。
但是由于某种原因,它不会加载角度。
我正在使用chrome,并且在开发人员工具标签“网络”中仅加载了上述3个文件。console.log(typeof angular);
等于undefined
。 (我已经在开发人员控制台中尝试过)
控制台中没有显示错误消息!
解决方案:我通过在deps
数组中添加“角度”来解决此问题。
我的main.js
代码是:
//需要JS配置
require.config({ // Code format changed
// alias library paths
paths: {
'jquery': '../bower_components/jquery/dist/jquery.min',
'domReady': '../bower_components/requirejs-domready/domReady',
'angular': '../bower_components/angular/angular.min',
'angular-route': '../bower_components/angular-route/angular-route.min',
'ngFx': '../bower_components/ngFx/dist/ngFx.min',
'angular-ui-router': '../bower_components/angular-ui-router/release/angular-ui-router.min',
'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min'
},
// angular does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: [ "angular" ]
},
'ngFx': {
deps: [ "angular" ]
},
'angular-ui-router': {
deps: [ "angular" ]
},
'bootstrap': {
deps: [ "jquery" ]
}
},
// Kick start application
deps: [
'./bootstrap',
'domReady',
'angular',
'angular-route',
'ngFx',
'angular-ui-router',
'bootstrap'
]
});
我的
bootstrap.js
文件:define([
'require',
'angular',
'app',
'routes'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['app']);
});
});
我的
app.js
文件:define([
'angular',
'./controllers/index',
'./directives/index',
'./filters/index',
'./services/index'
], function (ng) {
'use strict';
return ng.module('app', [
'app.services',
'app.controllers',
'app.filters',
'app.directives',
'ngFx',
'ngRoute'
]).config(function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
});
});
资料夹结构:
angular
controllers
index.js
menu.js
module.js
directives
filters
services
app.js
bootstrap.js
main.js
routes.js
bower_components
...
感谢您的帮助! :-)
最佳答案
我认为您应该将AngularJS.bootstrap与RequireJS一起使用。另外,您还应该向Deps添加角度。
这里的api参考:
https://docs.angularjs.org/api/ng/function/angular.bootstrap