javascript execution order with AngularJS

Question

I am going to maintain someone else's website, and I found a block of code like this (I have removed a lost of code to make example of code simpler)

    var Application = (function ($, global) {
    'use strict';
    global.site = global.site || {};
    global.site.App = App;

    function App() {
       // code removed
    }

    App.getState = function () {
        return 'standard';
    };

    App.setState = function () {
        // Set current state on load
        site.App.currentState = site.App.getState();
    };

    //a lot of code was removed

    return {
        init:function(){

            global.site.app = new global.site.App();

            // Set browser sate on load
            site.App.setState();
            console.log('Application: site.App.currentState', site.App.currentState);  
        }
    }

}(window.jQuery, window));

$(Application.init);

var siteApp = angular.module('siteApp', []);
siteApp.controller('AppController', function() {
      console.log('AppController: site.App.currentState', site.App.currentState);
});

The problem is that even though I put var Application = (function ($, global) {...}(window.jQuery, window)); above angularjs module, the angularjs module run first. And I have to admit that I don't fully undenstand how the var Application ... design pattern work, so my questions are:

How can I make $(Application.init); run first ?.
What kind of design pattern is that (Application.init) , so I can googel it and try to understand it

any helps are appreciated.

$(Application.init); will execute only when document is fully loaded. Read this api.jquery.com/ready — Sandeeproop
– Sandeeproop, Commented Feb 3, 2015 at 6:11
You can try removing $(Application.init), and direct calling Application.init() — Sandeeproop
– Sandeeproop, Commented Feb 3, 2015 at 6:13
well, I did not realise $() = $(document).ready(function() {}) = $(function() {});. your suggestion did fixed the order problem. thanks Sandeeproop — Mark
– Mark, Commented Feb 3, 2015 at 6:28
Welcome. I'll add this as answer. Please mark it as accepted ;-) — Sandeeproop
– Sandeeproop, Commented Feb 3, 2015 at 6:41

Sandeeproop · Accepted Answer · 2015-02-03 06:42:51Z

2

You can try removing

$(Application.init)

and direct calling

Application.init()

answered Feb 3, 2015 at 6:42

Sandeeproop

1,7761 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

malix · Accepted Answer · 2015-02-03 18:54:36Z

0

A) That code is overly convoluted and should probably be moved to an Angular service/value/factory

B) To manage code order, you can also remove your ng-app="App" and bootstrap Angular yourself:

  angular.element(document).ready(function () {
    Application.init();
    angular.bootstrap(document, ['App']);
  }

C) That code uses the module pattern, e.g. http://toddmotto.com/mastering-the-module-pattern

answered Feb 3, 2015 at 18:54

malix

3,5921 gold badge33 silver badges41 bronze badges

Collectives™ on Stack Overflow

javascript execution order with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related