简体   繁体   English

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

[英]Load scripts in a synchronous order in Require JS

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

The main.js has all the necessary libraries required by app.js(angular module) and hence I want to ensure app.js gets loaded only after all the libraries in the main.js are resolved through require call. main.js具有app.js(角度模块)所需的所有必需库,因此,我想确保仅在main.js中的所有库通过require调用解决后才加载app.js。 But since require js behaves asynchronous way, app.js file gets loaded before the libraries in main.js file is loaded and hence error resolving app.js. 但是由于require js表现为异步方式,因此在加载main.js文件中的库之前会先加载app.js文件,因此会错误解决app.js。

Kindly pour in your suggestions to restrict app.js from loading before main.js is loaded completely. 请倾听您的建议,以在完全加载main.js之前限制app.js的加载。

Thanks Santhosh 谢谢桑托什

If you write script like this in head tag, its not loaded synchronously in browser. 如果您在head标签中编写这样的脚本,则它不会在浏览器中同步加载。 main.js took long time to load as compare to app.js in browser. 与浏览器中的app.js相比,main.js的加载时间较长。 Hence you getting this error. 因此,您会收到此错误。 Try to load app.js via main.js file 尝试通过main.js文件加载app.js

Your have to use shim : {} to define dependencies in requireJS config file. 您必须使用shim : {}在requireJS配置文件中定义依赖项。

main.js 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'
]
});

In main.js you have to bootstrap your angular App and then have to call app.js from bootstrap.js 在main.js中,您必须引导您的角度应用程序,然后必须从bootstrap.js调用app.js

bootstrap.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']);
    });

});

here in bootstrap file your app.js is called so always you app.js is called after main.js 在引导文件中,您的app.js被调用,因此总是在main.js之后调用app.js

For more information about angular with requireJS please refer startersquad example. 有关requireJS的有关角度的更多信息,请参考startersquad示例。

Read this documentation for more information. 阅读此文档以获取更多信息。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM