个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已经设置了一个非常基本的环境，用于使用 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>
我的 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];
}
]);
});
似乎所有依赖项都已解析并加载，并且正在实例化 Angular 应用程序。但是，我无法注册 Angular Controller 。console.log()回调函数中的语句没有执行，所以看起来 Controller 创建完全失败了？
/编辑:
添加 ng-app指令<body>产生此错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to: Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
You can find the complete project on GitHub ，如果这样更清楚的话。
最佳答案
您的代码中有几处应该/可能会更正。
angular.bootstrap(document, ['MyApp']);。因为当你使用 requireJS 时，angular.bootstrap() 是一个需要。在脚本加载时不是 angular got init right，而是 require got init first。这会导致您的应用程序崩溃。为了使其正常工作，您需要等待 require init => 然后它将加载 angular up 和 init angular => 在完成所有操作后，引导您的应用程序。define() 应该包装模块/文件的所有代码require() 用于调用模块/文件。您可以尝试以下操作:
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;
});
关于javascript - RequireJS 正在加载 Angular 应用程序，但不会创建 app.controller，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29207740/
25
4
0
如何使用 requirejs 导入 recaptcha。我已经尝试了几件事，但没有任何效果。 我需要这样做，以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它。 require.confi
我正在尝试将 OpenLayers 库与 RequireJS 一起使用。 问题是，OpenLayers 一直处于“未定义”状态，即使它被列为我的模块的唯一依赖项: define(['OpenLayer
我正在尝试使用 gulp-requirejs构建一个演示项目。我希望结果是一个包含所有 js 依赖项和模板的单个文件。这是我的 gulpfile.js var gulp = require('gulp
没有 Require.js 就可以在浏览器控制台中调用全局对象，例如 app app.movies 当我将代码包装在 RequireJS 模块中时，如何在浏览器控制台中访问模块中的数据？我会发现这有助
这个问题有 3 个部分。我有两个模块 a 和 b。 如何在最初需要 b 后重新定义它？ 如果 a 依赖于 b，我该如何更新 a 以使用新的 b？ 如何找到所有依赖于 b 的模块并更新它们？ 例如；
我正在尝试找到一种将 Backbone-relational 子模型与 RequireJS 一起使用的方法，其中子模型与 super 模型位于不同的文件中。 例如: // app.js define(
使用 require.js (r.js) 优化 js 代码时，将所有 js 源代码复制到目标目录(dir 属性)。 有没有办法(一些配置)来防止 requirejs 复制源文件？ 最佳答案 如果添加
main.js 文件中的代码如下: phantom.injectJs("libs/require-1.0.7.js"); require.config( {
我在 require-config.js 中配置了一些路径，如下所示: var require = { baseUrl: '/javascript', paths: {
我正在重构一个大型 javascript 代码库以使用 RequireJS。不幸的是，我正在处理的许多文件都不是面向对象的，并且在不进行重大修改的情况下无法返回对象。是否有更有效的方法让“依赖”模块访
我是 RequireJS 的新手，我对加载顺序感到困惑。 我有一个全局项目配置，需要在位于 js/app/* 的模块之前加载。 这是我的结构: index.html config.js js/
我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前，我将所有内容捆绑到一个唯一的文件中。通常，外部库没有 requireJS“定义”包装器。 例如Angular Para
假设我有一个如下所示的模块: define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../
如何使用 grunt-contrib-requirejs配置或什至r.js Config不缩小特定文件。 我可以使用optimize: 'none'选项禁用所有文件的缩小。但我不知道如何对单个文件禁用
好吧，我已经知道你应该像这样使用 RequireJS 配置路径 require.config({ paths: { name: 'value' } }); 并这样调用它。 requir
我希望能够有选择地定义一个模块，然后在我的代码中使用或不使用它。我正在考虑的特殊情况是在调试/测试环境中加载模拟/ stub 模块，但不是在我上线时加载。这是示例: 在 html 文件中，可以选择加载
我为构建过程创建了一个任务，其中 requirejs 作为它的子任务之一，并且在 requirejs 之后几乎没有其他任务。该任务在运行 requirejs 后停止，即使使用详细信息也不会抛出错误。任
我想创建一个可以从我的 RequireJS 项目中的任何模块访问的变量。 例如，在初始化时我想设置: this.myVar = 123; 并且能够在我的 RequireJS 项目内部(但不是外部)的任
我正在使用 TypeScript、Backbone 和 Mustache 编写网络应用程序。我想使用 Requirejs 进行依赖加载。 我还在使用 TypeScript 的 Web Essentia
我正在尝试创建一个节点样板，并尝试创建一个任务来运行 Jasmine 测试。我的 Gruntfile.js 中有以下配置: jasmine: { src : ['static/test/spec/
我是一名优秀的程序员,十分优秀！