omachizura

仕事メモ、役に立ったスキルをまとめています。


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){
});