Geek Answers Handbook

Angular + Requirejs - Download out of order

I am trying to have angular and jquery loaded with requirejs. The best I can do is that in 50% of cases everything loads correctly, and the other half is a No Module: mainApp

I guess this breaks half the time based on the speed at which requirejs asynchronously loads scripts.

When it works, I see the test "Hello World" (although I see {{text}} flash before replacing, but I read how to fix it here). The rest of the time I get an error message 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>
+2
source share
3 answers

You can use domReady ( UPDATED ) to make sure that the DOM is fully loaded, that is, all JS files are there, before downloading the 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 official RequireJS documentation for more details :

Using RequireJS, you can quickly load scripts so that they complete before the DOM is ready. Any work that tries to interact with the DOM must wait until the DOM is ready.

The trick is on this blog post.

EDIT If you follow the tips on the blog, use this domReady script instead of the one I posted earlier: https://github.com/requirejs/domReady/blob/master/domReady.js .

+6
source

Add jQuery as a dependency for Angular in the pad.

 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'} } });
+2
source

This might be a late answer, but as Dustin Blake said, you can also use jQuery .ready() instead of including another module like 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 easier to read require(['angular', "modules/mainApp"], function(){ angular.bootstrap(document, ['mainApp']); }) }) });
+1
source

More articles:


All Articles