Angular + Requirejs - 以错误的顺序加载
Angular + Requirejs - Loading in the wrong order
我正在尝试让angy和jquery加载requirejs。 我能做的最好的事情是 50% 的时间一切都正确加载,另一半我得到错误No Module: mainApp
我假设这根据 requirejs 异步加载脚本的速度中断了一半的时间。
当它工作时,我看到"Hello World"测试(尽管在更换之前我确实看到{{text}}闪烁,但我一直在阅读如何在这里修复它)。 其余时间我收到错误,{{text}} 只是停留在屏幕上。
Github Repo
Tree:
index.html
- js
- libs
require.js
- modules
mainApp.js
main.js
main.js
require.config({
paths: {
'jQuery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min',
'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular',
},
shim: {
'angular' : {'exports' : 'angular'},
'jQuery': {'exports' : 'jQuery'}
}
});
require(['jQuery', 'angular', 'modules/mainApp'] , function ($, angular, mainApp) {
$(function () { // using jQuery because it will run this even if DOM load already happened
angular.bootstrap(document, ['mainApp']);
});
});
modules/mainApp.js
define(['angular'], function (angular) {
return angular.module('mainApp' , []).controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = 'Hello World';
}]);
});
Relevant index.html
<head>
<script src="js/libs/require.js" data-main="js/main"></script>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
{{text}}
</div>
</div>
</body>
在引导应用程序之前,您可以使用 domReady (UPDATE) 来确保 DOM 已完全加载,即所有 JS 文件都在那里。
requirejs.config({
paths: {
jquery: '/path/to/jquery',
angular: 'path/to/angular',
domReady: '/path/tp/domReady'
}, shim: {
angular: {
exports: 'angular'
},
}
});
define(['jquery', 'angular', 'modules/mainApp'],
function($, angular, 'mainApp') {
// tell angular to wait until the DOM is ready
// before bootstrapping the application
require(['domReady'], function() {
angular.bootstrap(document, ['mainApp']);
});
});
有关此陷阱的更多信息,请参阅 RequireJS 官方文档:
使用 RequireJS 可以足够快地加载脚本 它们在 DOM 准备就绪之前完成。任何试图 与 DOM 交互应等待 DOM 准备就绪。
诀窍可以在这篇博文中找到。
编辑 如果您遵循博客文章的建议,请使用此 domReady 脚本而不是我之前发布的脚本:https://github.com/requirejs/domReady/blob/master/domReady.js。
在填充码中添加 Jquery 作为 Angular 的依赖项。
require.config({
paths: {
'jQuery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min',
'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular',
},
shim: {
'angular' : {'exports' : 'angular', deps: ['jQuery']},
'jQuery': {'exports' : 'jQuery'}
}
});
这可能是
一个较晚的响应,但正如Dustin Blake所说,你也可以使用jQuery .ready()
而不是包含另一个像domReady
这样的模块。
requirejs.config({
paths: {
jquery: '/path/to/jquery',
angular: 'path/to/angular'
}, shim: {
angular: {
exports: 'angular'
},
}
});
require(['jquery'], function($) {
$(document).ready(function(){
// I like it this way instead of including
// everything in the parent function so it's easier to read
require(['angular', "modules/mainApp"], function(){
angular.bootstrap(document, ['mainApp']);
})
})
});
相关文章:
- 使用Require.js按照依赖关系的顺序加载JavaScript
- 如何确保coffeescript按顺序加载
- 使用webcomponenetsjs的HTMLImports以意外的执行顺序加载导入-firefox
- zend按顺序加载js文件
- Angular + Requirejs - 以错误的顺序加载
- Javascript 文件以不需要的顺序加载
- Django 模板似乎没有以正确的顺序加载 Backbone.js
- 按顺序加载脚本.js和使用.js
- 让 html 和 javascript 在 rails 中以正确的顺序加载
- 从 JavaScript 代码中按顺序加载 JavaScript
- 如何使用 HTML/javascript 以预定义的顺序加载图像
- kineticJS按顺序加载图像(并设置fillPatternImg)不透明度补间不起作用
- 按gulp / browserify顺序加载javascript插件
- Javascript未按正确的顺序加载
- Javascript承诺以相反的顺序加载
- 按顺序加载图像,有延迟,无脚本回退
- 脚本未按顺序加载
- RequireJS和依赖于按特定顺序加载的脚本
- 顺序加载fadeIn效果与Javascript和jQuery
- 可以Promise按顺序加载多个url