2013-10-09 4 views
51

Есть ли способ, которым я могу выполнить некоторый код JavaScript при запуске моего приложения AngularJS? У меня есть общий код, который мне нужно, чтобы убедиться, что он запускается перед любыми директивами/контроллерами приложений. Я не хочу привязываться к маршрутам и ng-view, мне нужно, чтобы это было общее решение для любого ng-app.Выполнить код при запуске углового приложения

Я думал, что могу использовать Module Config, и я действительно пробовал это, но я пытаюсь вызвать службу, которая кажется невозможной для доступа к загрузке модуля.

ответ

75

Вы можете сделать так,

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

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

Это дает мне условия гонки для вызовов в контроллерах. Кажется, что не все контроллеры готовы, когда функция выполняется. – Dan

+0

@ Дань, вы используете решает свои контроллеры? – lyyons

+0

@lyyons Не работает ли это только для маршрутов? – Dan

3

Вы можете использовать функцию «Выполнить» из модуля API: http://docs.angularjs.org/api/angular.Module

Этот код будет выполнен после создания инжектора, так что вы должны быть в состоянии получить в услуге, которую вы собираетесь использовать.

23

Короткая версия

Вы должны использовать функцию module.run(initializationFn), где фактический метод может зависеть от услуг. Вы можете вводить зависимости как обычно:

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

Пример имеет инициализации зависит от $rootScope, но вы также можете вводить услуги и т.д.

Longer версия

The relevant module.run documentation довольно лаконична, равно как и другие (отличные) ответы. Позвольте мне объединить его в более подробный пример, который также показывает, как придать factory созданный сервис в вашем 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>

+0

более длинная версия лучше и почему? – Xsmael

+0

в более длинной версии я могу использовать 'this' вместо' service.'? а потом ничего не вернуть? будет работать так же? – Xsmael

+0

Более длинная версия - это более длинная версия * объяснения *. Механика обеих версий точно такая же. – Jeroen

Смежные вопросы