I have taken over the responsibility of managing someone else's website, and while going through the codebase, I came across a snippet that looks like the one below (with some code omitted for simplicity):
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);
});
My main issue is that the angularjs module is executing before the
var Application = (function ($, global) {...}(window.jQuery, window)); (Application.init) , I have the following questions:
- How can I ensure that
$(Application.init);runs before anything else? - What type of design pattern is being used in
(Application.init), so I can research and understand it better?
Any assistance or guidance on this matter would be greatly appreciated.