Javascript RequireJS正在加载angular应用程序，但不加载'；无法创建应用程序控制器_Javascript_Angularjs_Requirejs_Angularjs Controller

Javascript RequireJS正在加载angular应用程序，但不加载'；无法创建应用程序控制器

javascript angularjs requirejs

Javascript RequireJS正在加载angular应用程序，但不加载'；无法创建应用程序控制器,javascript,angularjs,requirejs,angularjs-controller,Javascript,Angularjs,Requirejs,Angularjs Controller,我已经为使用RequireJS加载AngularJS组件（由Bower管理）建立了一个非常基本的环境。我的index.html非常基本： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular Resource Test</title> </head> <body> <

我已经为使用RequireJS加载AngularJS组件（由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>

似乎所有依赖项都已解析并加载，Angular应用程序正在实例化。但是，我无法注册角度控制器。回调函数中的

console.log（）

语句未执行，因此控制器创建似乎完全失败

/编辑：

将

ng app

指令添加到

会产生以下错误：

未捕获错误：[$injector:modulerr]未能实例化模块MyApp，原因是：错误：[$injector:nomod]模块“MyApp”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数

，如果这能让它更清楚的话。

代码中有几点应该/可能需要更正

缺少

angular.bootstrap（文档，['MyApp']）。因为当您使用requireJS时，需要angular.bootstrap（）
。在加载脚本时，不需要正确地获取初始化，而是首先需要获取初始化。这将导致你的应用程序崩溃。为了让它工作，你需要等待require init=>然后它将加载angular up和init angular=>完成所有操作后，引导你的应用程序


define（）
应该包装模块/文件的所有代码
require（）
用于调用模块/文件
RequireJS用于将模块分离为文件。所以，若你们能很好地配置你们的应用程序，那个么它将更容易管理，并可能改善你们的应用程序的加载时间。将多个模块放入一个文件中。你刚刚破坏了requireJS的使用目的。（例如，我构建了一个应用程序，它的代码、插件和html总量约为3MB。但在第一次加载页面时，它只有400kb，酷呵呵？）


您可以尝试以下方法：
requirejs.config({
baseUrl:“bower_组件”，
路径：{
“角度”：“../bower_组件/角度/角度”，
“角度资源”：“../bower_组件/角度资源/角度资源”，
'app'：'../scripts/app'/'app'是模块名。它由define（）块定义，可以由require（）或define（）块加载
},
垫片：{
“有棱角的”：{
导出：“角度”
},
“角度资源”：{
deps:['angular']，
}
},
});
要求（[“应用程序”]，功能（应用程序）{
console.log（app）；
app.controller（“MyCtrl”[“$scope”、“$resource”，
功能（$scope$resource）{
console.log（“hello”）；//这不起作用
$scope.items=[1,3,4,5]；
}
]);
引导（文档，['MyApp']）；
});

在你的app.js里面
定义（[“角度”、“角度资源”]、函数（角度）{
var app=angular.module（'MyApp'，['ngResource']）；
返回应用程序；
});
您已加载angular，但尚未引导它
由于您动态加载脚本，因此不能使用ng app属性
所以你需要打电话
angular.bootstrap(document.body, ['app']);

请参见
刚刚编辑了几个打字错误，并尝试使用更好的词语进行解释。正如您所建议的，我已更改了文件结构，但行为保持不变。看@doque让我看看it@doque好吧，我犯了个错误。我将很快更新答案。您只是缺少angular.bootstrap（文档，['MyApp']）。不幸的是，这没有帮助。我已经在GitHub上更新了代码。我已经这样做了，但不知何故，app
仍然没有传递给控制器。我收到的错误是错误：[ng:areq]参数“MyCtrl”不是函数，未定义，这通常意味着模块返回值不正确。然而，这怎么可能呢？我有完全相同的问题，我想这与在应用程序本身之前加载控制器有关。。（通过ng属性？）
angular.bootstrap(document.body, ['app']);