2013-10-09 47 views
51

有沒有辦法在我的AngularJS應用程序啓動時執行一些JavaScript代碼?我有一些需要確保在任何應用程序指令/控制器之前運行的通用代碼。我不想被綁定到路線和ng-view,我需要這是任何ng-app的通用解決方案。啓動角度應用程序時執行代碼

我以爲我可以使用模塊配置,我真的嘗試過,但我試圖調用一個服務,這似乎無法訪問模塊負載。

回答

75

你可以這樣做,

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

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

這讓我對電話到控制器中的競爭條件。看起來並不是所有的控制器都在這個功能執行時就緒。 – Dan

+0

@丹,你在你的控制器上使用解析器嗎? – lyyons

+0

@lyyons這不僅適用於路線嗎? – Dan

23

短版

您需要使用module.run(initializationFn)功能,在實際的方法可以取決於服務。您可以注入依賴按通常:

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

的例子有初始化依賴於$rootScope,但你也可以注入服務等

加長版

The relevant module.run documentation是相當簡潔,因爲是其他(優秀)答案。讓我結合成一個更詳細的例子,這也顯示瞭如何在initializationFn注入factory創建的服務:

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

相關問題