angularjs|ngRouteでページ遷移時に外部ファイルを読み込む方法
angularjsのルーティングで、ページ遷移時に外部ファイル（json）のデータを取得する方法を紹介します。
ページ遷移時の最初にデータを取得するにはresolveを使用します。
外部ファイルを取得する処理はfactoryで定義しています。
下記のサンプルではsamplepage1.htmlのページ遷移時にsamplepage1.jsonを取得しsamplepage2.htmlのページ遷移時にsamplepage2.jsonを取得しています。
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/index.html', {
templateUrl: 'template/index.html',
controller: 'IndexController',
}).
when('/samplepage1.html', {
templateUrl: 'template/samplepage1.html',
controller: 'Sample1Controller',
resolve: {
'samplepage1Data':function(jsonService){
return jsonService.get('/samplepage1.json').then(function(response){
return response.data;
});
}
}
}).
when('/samplepage2.html', {
templateUrl: 'template/samplepage2.html',
controller: 'Sample2Controller',
resolve: {
'samplepage2Data':function(jsonService){
return jsonService.get('/samplepage2.json').then(function(response){
return response.data;
});
}
}
}).
otherwise({
redirectTo: '/index.html',
});
});
app.factory('jsonService', function ($http) {
return {
get: function (filename) {
return $http.get(filename);
}
};
});
//各コントローラーで取得したデータを参照できます
app.controller('Sample1Controller', function (samplepage1Data){
});
app.controller('Sample2Controller', function (samplepage2Data){
});