RequireJS正在加载角应用程序，但没有创建app.controller
我已经为使用AngularJS加载RequireJS组件(由Bower管理)设置了一个非常基本的环境。我的index.html非常基本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Resource Test</title>
</head>
<body>
<div ng-controller="MyCtrl">
<ul>
<!-- this template is not populated -->
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
<script type="text/javascript" src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
</body>
</html>我的RequireJS都在main.js中，如下所示：
requirejs.config({
baseUrl: 'bower_components',
paths: {
'angular': '../bower_components/angular/angular',
'angular-resource': '../bower_components/angular-resource/angular-resource'
},
shim: {
'angular': {
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
}
},
});
define("app", ["angular", "angular-resource"], function(angular) {
var app = angular.module('MyApp', ['ngResource']);
return app;
});
require(["app"], function(app) {
console.log(app); // this works
app.controller("MyCtrl", ['$scope', '$resource',
function($scope, $resource) {
console.log("hello"); // this doesn't work
$scope.items = [1, 3, 4, 5];
}
]);
});看起来所有的依赖项都被解析和加载，并且这个角应用程序正在被实例化。但是，我不能注册角度控制器。回调函数中的console.log()语句没有执行，因此似乎控制器创建完全失败了吗？
/edit：
将ng-app指令添加到<body>会产生以下错误：
未明错误：$injector:modulerr未能实例化模块MyApp，原因是:错误：$injector:nomod模块'MyApp‘不可用！您要么拼错了模块名，要么忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。
您可以在GitHub上找到完整的项目，如果这更清楚的话。
回答 2
Stack Overflow用户
发布于 2015-03-23 10:39:05
在您的代码中，有几件事情应该/可能得到纠正。
- 失踪的
angular.bootstrap(document, ['MyApp']);。因为当您使用requireJS时，angular.bootstrap()是一种需要。当脚本加载时，不需要将角插入它，而是首先要求获得init。这会导致你的应用程序崩溃。为了使其工作，您需要等待需要init =>，然后它将加载角向上和init角=>完成所有工作后，引导您的应用程序。 define()应该包装一个模块/文件的所有代码require()用于调用模块/文件。- RequireJS用于将模块分离为文件。因此，如果您能够很好地配置应用程序，那么它将更容易管理，并且可能会改进应用程序的加载时间。通过在文件中插入许多模块。你刚刚毁了requireJS的使用目的。(例如，我已经构建了一个应用程序，它的代码、插件和html的总量约为3MB。但在第一页加载时，它只有400 at，酷呵呵？)
您可以尝试以下几种方法：
requirejs.config({
baseUrl: 'bower_components',
paths: {
'angular': '../bower_components/angular/angular',
'angular-resource': '../bower_components/angular-resource/angular-resource',
'app' : '../scripts/app' // 'app' is the module name. It got defined by define() block, and can be loaded by either require() or define() block
},
shim: {
'angular': {
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
}
},
});
require(["app"], function(app) {
console.log(app);
app.controller("MyCtrl", ['$scope', '$resource',
function($scope, $resource) {
console.log("hello"); // this doesn't work
$scope.items = [1, 3, 4, 5];
}
]);
angular.bootstrap(document, ['MyApp']);
});在你的app.js里面
define(["angular", "angular-resource"], function(angular) {
var app = angular.module('MyApp', ['ngResource']);
return app;
});Stack Overflow用户
发布于 2015-03-23 11:27:36
您已经加载了角，但您还没有引导它，因为您动态加载脚本，使用ng-app属性不是一个选项，因此您需要调用
angular.bootstrap(document.body, ['app']);请参阅https://docs.angularjs.org/api/ng/function/angular.bootstrap
https://stackoverflow.com/questions/29207740
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号