current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm developing simple AngularJS (I'm quite new with Angular) application and I encountered problem that js are loading in wrong order. Below there are relevant (I hope) snippets of my app.

index.html

(...)
<script data-main="scripts/main.js" src="scripts/require.js"></script>
(...)

main.js

requirejs.config({
    baseUrl: 'scripts',
    paths: {
        angular: '../../bower_components/angular/angular',
        jquery: 'jquery',
        domReady: 'domReady',
        'jquery.scrollTo': '../../bower_components/jquery.scrollTo/jquery.scrollTo',
    },
    shim: {
        jquery: {deps: ['domReady']},
        'jquery.scrollTo': {deps: ['jquery']},
        angular: {deps: ['jquery.scrollTo'], exports: 'angular'}
    },
    packages: []
});
requirejs(['angular', 'domReady', 'jquery', 'app', 'scripts', 'jquery.scrollTo'], function(angular, domReady) {
    'use strict';
    domReady(function() {
        angular.bootstrap(document, ['myApp']);
    });
});

app.js

define('app', ['angular', 'domReady', 'jquery', 'jquery.scrollTo'], function (angular) {
    return angular.module('myApp', []);
});

scripts.js

require(['domReady', 'jquery', 'jquery.scrollTo'], function(domReady, $) {
    domReady(function() {
        console.log('scripts.run');
    });
});

I assumed that loading order should be following: main domReady jquery jquery.scrollTo angular scripts app

But in real loading order is following:

real loading order

The most strange for me is why scripts.js is loaded before jquery.js and jquery.scrollTo.js if require statement define that it is dependent on domReady, jquery and jquery.scrollTo?

share|improve this question
1  
AFAIK requirejs doesn't guarantee the script retrieval order, just the loading order. So script A may depend upon script B. Both can be retrieved in parallel over the network, and A may load more quickly, but will only be processed after A. Are you seeing actual parsing issues, or is this just theoretical based on the network tab above? –  deitch Nov 27 '14 at 21:08

2 Answers 2

up vote 0 down vote

I suggest to remove jquery completely from your code (if its possible for you) and requirejs. AngularJS has great dependency injection module which you could use to support timing of loaded parts.

Also - you could try to inline ng-app attribute inside html code insted of invoking angular via boostrap call, than you won't need "domReady".

If you can, please tell something more about your app so we can give you better response on availible solutions.

share|improve this answer
up vote 0 down vote

deitch's statement regarding loading order is correct. RequireJS will guarantee that the order in which the factory functions of your modules (factory == the callback you give to define) are executed will respect the dependencies specified. As far as the order in which modules are fetched the only thing you can be sure is that a module will be fetched before its factory function is executed but RequireJS otherwise has the freedom to fetch modules in any order.

In the case you are showing us, note how the modules that are first fetched after main are those which do not have a shim configuration defined for them. Modules with a shim configuration require a bit more processing from RequireJS and thus follow a different code path.

While we're at it, a few bizarre things in your code:

  1. A path configuration that just repeats the name of the module does nothing. For instance, jquery: 'jquery'. You could remove such path specifications.

  2. You have require at the top level of scripts.js. You should have define there instead.

  3. Your call to define in app.js specifies a module name (1st parameter to define). Leave the module name out.

  4. You give a jQuery a shim configuration. jQuery calls define. Giving a shim to a module that calls define is likely to result in undefined behavior. Don't do this.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.