角度アプリケーションの起動時にコードを実行

Question

AngularJSアプリケーションの起動時にJavaScriptコードを実行する方法はありますか？私はアプリディレクティブ/コントローラの前に必ず実行する必要がある共通コードをいくつか持っています。私は経路とng-viewに縛られたくないので、私はこれをng-appの汎用ソリューションにする必要があります。

私はModule Configを使用できると思っていましたが、実際に試しましたが、サービスを呼び出そうとしていますが、Module Loadでアクセスできないようです。

Answer 1

、

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

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

Answer 2

あなたはモジュールのAPIから「ファイル名を指定して実行」機能を使用することができます。 http://docs.angularjs.org/api/angular.Module

あなたが使用することを求めているサービスで得ることができる必要がありますので、このコードは、インジェクタの作成後に実行されます。あなたはこのように行うことができます

Answer 3

ショートバージョンが

あなたは、実際の方法は、サービスに依存することができ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>