在Require JS中以同步顺序加载脚本

时间:2015-11-02 12:51:14

标签: javascript angularjs requirejs

   <head>
   <script language="javascript" src="require.js" data-main="scripts/main" >    
    </script>
    <script type="text/javascript" src="scripts/app.js"> </script> 
  </head>

main.js具有app.js(angular模块)所需的所有必需库,因此我想确保只有在通过require调用解析了main.js中的所有库之后才加载app.js。但是由于需要js以异步方式运行,app.js文件在加载main.js文件中的库之前加载,因此错误解析了app.js.

请注意您的建议,以便在完全加载main.js之前限制app.js的加载。

由于 Santhosh

1 个答案:

答案 0 :(得分:0)

如果在head标签中编写这样的脚本,则不会在浏览器中同步加载。与浏览器中的app.js相比,main.js需要很长时间才能加载。因此,您收到此错误。尝试通过main.js文件加载app.js

您必须使用shim : {}来定义requireJS配置文件中的依赖项。

main.js

require.config({

paths: {
    'angular': '../lib/angular/angular',
    'angular-route': '../lib/angular-route/angular-route',
    'domReady': '../lib/requirejs-domready/domReady'
},

/**
 * for libs that either do not support AMD out of the box, or
 * require some fine tuning to dependency mgt'
 */
shim: {
    'angular': {
        exports: 'angular'
    },
    'angular-route': {
        deps: ['angular']
    }
},

deps: [
    // kick start application... see bootstrap.js
    './bootstrap'
]
});

在main.js中,您必须引导角度应用程序,然后必须从bootstrap.js调用app.js

bootstrap.js

define([
    'require',
    'angular',
    'app',
    'routes'
], function (require, ng) {
'use strict';

/*
 * place operations that need to initialize prior to app start here
 * using the `run` function on the top-level module
 */

require(['domReady!'], function (document) {
    ng.bootstrap(document, ['app']);
    });

});

这里在bootstrap文件中你的app.js被调用所以你总是在main.js之后调用app.js

有关使用requireJS设置角度的更多信息,请参阅startersquad示例。

阅读此documentation以获取更多信息。