Angular + Requirejs - Cargando en el orden incorrecto

Question

Nov 12, 2013, 08:42 PM

jquery asynchronous javascript requirejs angularjs

Angular + Requirejs - Cargando en el orden incorrecto

Estoy tratando de tener angular y jquery cargados con requirejs. Lo mejor que puedo hacer es que el 50% del tiempo todo se carga correctamente, la otra mitad me sale el error.No Module: mainApp

Supongo que esto está rompiendo la mitad del tiempo en función de la velocidad en la que requirejs está cargando los scripts de forma asíncrona.

Cuando funciona, veo la prueba "Hello World" (aunque veo {{text}} flash antes de que se reemplace, pero he estado leyendo cómo solucionarlo aquí). El resto del tiempo recibo el error y {{text}} solo permanece en la pantalla.

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>