Angular + Requirejs - 加载顺序错误答案

【问题标题】：Angular + Requirejs - Loading in the wrong orderAngular + Requirejs - 加载顺序错误
【发布时间】：2013-11-12 19:42:24
【问题描述】：

我正在尝试使用 requirejs 加载 angular 和 jquery。我能做的最好的事情是 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>

【问题讨论】：

标签： javascript jquery angularjs asynchronous requirejs

【解决方案1】：

您可以使用domReady (UPDATED) 确保 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']);
        }); 
});

有关此问题的更多信息，请参阅the RequireJS official documentation：

使用 RequireJS 加载脚本足够快是可能的它们在 DOM 准备好之前完成。任何试图与 DOM 交互应该等待 DOM 准备好。

诀窍在 this 博客文章中找到。

编辑如果您遵循博文的建议，请使用这个 domReady 脚本，而不是我之前发布的那个：https://github.com/requirejs/domReady/blob/master/domReady.js。

【讨论】：

似乎没有任何区别。我什至尝试尽可能准确地匹配博客文章的示例语法。这是您建议更改的项目：https://github.com/nick-brown/broken-require/tree/domReady/
请注意，根据the official documentation，您不要像这样使用domready；您可以将代码包装在 domready() 调用中，或者使用插件语法要求它，即 'domReady!'。不过，不知道这是否足以解决 OP 的问题。
@Nick Brown 该博文使用不同的 domReady 脚本，因此存在语法差异。我写了那篇文章，但忘记了使用的是哪个脚本。不要使用官方文档建议的那个。我已提交拉取请求以供您审核。
但是当你可以使用 jQuery .ready() 来引导 DOM 加载时，你为什么还要使用 domReady 呢？

【解决方案2】：

在 shim 中添加 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'}
      }
});

【讨论】：

不幸的是，没有改变任何东西。
当您将 https:// 添加到您的 CDN 时似乎可以工作您仍然需要引导您的应用程序。 angular.bootstrap(document, ["app"]);但这应该可以解决加载问题。
奇怪，对我仍然不起作用，但我会在我回到家并使用不同的连接时尝试一下。

【解决方案3】：

这可能是一个较晚的响应，但正如 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']);
        })
    })
});

【讨论】：