AngularJS，RequireJS，JQuery加载顺序错误

Question

我正在开发简单的AngularJS（我对Angular很新）应用程序，我遇到了js按错误顺序加载的问题。下面是我的应用程序的相关（我希望）片段。

的index.html

(...)
<script data-main="scripts/main.js" src="scripts/require.js"></script>
(...)

main.js

requirejs.config({
    baseUrl: 'scripts',
    paths: {
        angular: '../../bower_components/angular/angular',
        jquery: 'jquery',
        domReady: 'domReady',
        'jquery.scrollTo': '../../bower_components/jquery.scrollTo/jquery.scrollTo',
    },
    shim: {
        jquery: {deps: ['domReady']},
        'jquery.scrollTo': {deps: ['jquery']},
        angular: {deps: ['jquery.scrollTo'], exports: 'angular'}
    },
    packages: []
});
requirejs(['angular', 'domReady', 'jquery', 'app', 'scripts', 'jquery.scrollTo'], function(angular, domReady) {
    'use strict';
    domReady(function() {
        angular.bootstrap(document, ['myApp']);
    });
});

app.js

define('app', ['angular', 'domReady', 'jquery', 'jquery.scrollTo'], function (angular) {
    return angular.module('myApp', []);
});

scripts.js中

require(['domReady', 'jquery', 'jquery.scrollTo'], function(domReady, $) {
    domReady(function() {
        console.log('scripts.run');
    });
});

我认为加载顺序应该如下： 主要 domready中 jQuery的 jquery.scrollTo 角 脚本 应用

但实际装载顺序如下：

对我来说最奇怪的是为什么在jquery.js和jquery.scrollTo.js之前加载scripts.js，如果require语句定义它依赖于domReady，jquery和jquery.scrollTo？

Answer 1

我建议从代码中完全删除jquery（如果可能的话）和requirejs。 AngularJS具有很好的依赖注入模块，您可以使用它来支持加载部件的时序。

另外 - 您可以尝试在通过boostrap调用调用角度的html代码中内联ng-app属性，而不需要“domReady”。

如果可以的话，请告诉您有关您的应用的更多信息，以便我们为您提供有关可用解决方案的更好回复。

Answer 2

关于装货单的

deitch statement是正确的。 RequireJS将保证执行模块的工厂功能（factory ==您提供给define的回调）的顺序将遵循指定的依赖项。就模块获取的顺序而言，唯一可以确定的是在执行工厂函数之前将获取模块，但RequireJS可以自由地以任何顺序获取模块。

如果您要向我们展示，请注意main之后首次提取的模块是那些没有为其定义shim配置的模块。具有shim配置的模块需要从RequireJS进行更多处理，因此遵循不同的代码路径。

在我们处理它时，代码中有一些奇怪的东西：

1. 只重复模块名称的路径配置不执行任何操作。例如，jquery: 'jquery'。您可以删除此类路径规范。

2. require位于scripts.js的顶层define。你应该在那里define。

3. 您对app.js中define的来电指定了一个模块名称（shim的第一个参数）。保留模块名称。

4. 你给jQuery一个define配置。 jQuery调用shim。将define提供给调用{{1}}的模块可能会导致未定义的行为。不要这样做。