Execute code at startup of angular application

Angularjs

Angularjs Problem Overview


Is there a way I can execute some JavaScript code at start-up of my AngularJS application? I have some common code that I need to make sure runs before any of the app directives/controllers. I do not want to be tied to routes and ng-view, I need this to be a generic solution for any ng-app.

I thought I could use Module Config, and I actually tried that, but I am trying to call a service, which seems impossible to access on Module Load.

Angularjs Solutions


Solution 1 - Angularjs

You can do like this,

var app = angular.module('myApp',[]);

app.run(function($rootScope) {
    //.....
});

Solution 2 - Angularjs

Short version

You need to use the module.run(initializationFn) function, where the actual method can depend on services. You can inject dependencies as per usual:

var app = angular
    .module('demoApp', [])
    .run(['$rootScope', function($rootScope) {
        $rootScope.bodyClass = 'loading';
        // Etc. Initialize here.
    }]);

The example has initialization dependent on $rootScope, but you can also inject services, etc.

Longer version

The relevant module.run documentation is rather terse, as are the other (excellent) answers. Let me combine it into a more verbose example, that also shows how to inject a factory created service in your initializationFn:

var app = angular.module('demoApp', []);

// Service that we'll also use in the .run method
app.factory('myService', [function() {
  var service = { currentItem: { started: new Date() } };
  
  service.restart = function() {
    service.currentItem.started = new Date();
  };
  
  return service;
}]);

// For demo purposes
app.controller('demoCtrl', ['$scope', 'myService', function($scope, myService) {
  $scope.header = 'Demo!';
  $scope.item = myService.currentItem;
  $scope.restart = myService.restart;
}]);

// This is where your initialization code goes, which
// may depend on services declared on the module.
app.run(['$window', 'myService', function($window, myService) {
  myService.restart();
  $window.alert('Started!');
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="demoApp" ng-controller='demoCtrl' ng-cloak>
  <h1>{{ header }}</h1>
  <p>Current item started: {{ item.started }}</p>
  <p><button ng-click="restart()">Restart</button></p>
</div>

Solution 3 - Angularjs

You can use the "run" function from the Module API: http://docs.angularjs.org/api/angular.Module

This code will be executed after injector creation so you should be able to get at the service you are looking to use.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMichel HabibView Question on Stackoverflow
Solution 1 - AngularjsAnshad VattapoyilView Answer on Stackoverflow
Solution 2 - AngularjsJeroenView Answer on Stackoverflow
Solution 3 - AngularjsErstad.StephenView Answer on Stackoverflow