角+ Requirejs - 装载在错误的顺序 [英] Angular + Requirejs - Loading in the wrong order

查看：114 发布时间：2016/4/7 22:24:28 javascript jquery angularjs asynchronous requirejs

本文介绍了角+ Requirejs - 装载在错误的顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想有装有requirejs角和jQuery。我能做的最好的是时间的一切负荷的50％正常，另一半我得到的错误无模块：mainApp

我假设这是基于上requirejs异步加载脚本的速度打破一半的时间。

当它工作，我看到的Hello World测试（虽然我确实看到{{文字}}闪光灯被替换之前，但我一直在读如何解决这里）。的时候，我得到的错误，其余{{文本}}只是停留在屏幕上。

树：

 的index.html
 -  JS
     - 库
        require.js
     - 模块
        mainApp.js
    main.js

main.js

  require.config（{
  路径：{
    'jQuery的'：'//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min'，
    '角'：'//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular'，
  }，
  垫片：{
    '角'：{'出口'：'角'}，
    jQuery的：{'出口'：'jQuery的'}
  }
}）;需要（['jQuery的'，'角'，'模块/ mainApp']，功能（$，棱角分明，mainApp）{
  $（函数（）{使用jQuery，因为它会运行此即使DOM负荷已经发生了//
    angular.bootstrap（文件，['mainApp']）;
  }）;
}）;

模块/ mainApp.js

 定义（['角']，功能（角）{
  返回angular.module（'mainApp'，[]）。控制器（'MainCtrl'，['$范围'，函数（$范围）{
      $ scope.text =的'Hello World';
  }]）;
}）;

相关的index.html

 ＆LT; HEAD＆GT;
    ＆LT;脚本SRC =JS /库/ require.js数据主要=JS /主＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; DIV NG-应用=mainApp＆GT;
        ＆LT; DIV NG控制器=MainCtrl＆GT;
            {{文本}}
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;

解决方案

您可以使用 domready中（更新时间：），以确保该DOM满载，即所有JS文件都在那里，自引导应用中。

  requirejs.config（{
    路径：{
        jQuery的：'/路径/要/ jQuery的，
        角度：'路径/要/角度'，
        domready中：'/路径/ TP / domready中
    }，垫片：{
        角度：{
            出口：'角'
        }，
    }
}）;
定义（['jQuery的'，'角'，'模块/ mainApp']，
    功能（$，棱角分明，'mainApp'）{
        //告诉角度等到DOM就绪
        //前自举程序
        需要（['domready中']，函数（）{
            angular.bootstrap（文件，['mainApp']）;
        }）;
}）;

请参阅的RequireJS官方文档了解相关信息，疑难杂症：

它使用RequireJS时加载脚本的速度不够快，可以
  他们完成之前，DOM已准备就绪。试图将任何工作
  与DOM交互应该等待DOM准备就绪。

诀窍是在这的博客文章。
修改如果您按照博客文章的建议，请使用此domready中的脚本，而不是pviously贴一个我$ P $：<一href=\"https://github.com/requirejs/domReady/blob/master/domReady.js\">https://github.com/requirejs/domReady/blob/master/domReady.js.
I'm trying to have angular and jquery loaded with requirejs. The best I can do is that 50% of the time everything loads correctly, the other half I get the error No Module: mainApp

I'm assuming this is breaking half the time based on the speed on which requirejs is asynchronously loading the scripts.

When it works, I see the "Hello World" test (although I do see {{text}} flash before it is replaced, but I've been reading how to fix that here). The rest of the time I get the error and {{text}} just stays on the screen.

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>
解决方案
You can use domReady (UPDATED) to make sure that the DOM is fully loaded, i.e. all JS files are there, before bootstrapping your application.
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']);
        }); 
});
See the RequireJS official documentation for more information on this gotcha:

It is possible when using RequireJS to load scripts quickly enough that they complete before the DOM is ready. Any work that tries to interact with the DOM should wait for the DOM to be ready.

The trick is found on this blog post.

EDIT If you follow the blog post's advice, please use this domReady script instead of the one I previously posted: https://github.com/requirejs/domReady/blob/master/domReady.js.

这篇关于角+ Requirejs - 装载在错误的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

角+ Requirejs - 装载在错误的顺序 [英] Angular + Requirejs - Loading in the wrong order

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

角+ Requirejs - 装载在错误的顺序 [英] Angular + Requirejs - Loading in the wrong order

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭