Execute code at startup of angular application

Question

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

Answer 1

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!');
}]);

  
{{ header }}
  
Current item started: {{ item.started }}
  
Restart