吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

$routeParamsを使用して、URLのパラメータを取得する

2013年11月26日 / category : angularjs, lab, その他

外部HTMLを切り替える際に、URLのパラメータを取得し、表示する画像を変更するサンプルを紹介します。

ngRouteモジュールのwhen関数内で指定するURLにパラメーターを仕込みます。

$routeProvider.when('URL', parameters);

例えば、URLを下記のようにする。

/photo/:categoryid/:photoid
パラメータとして変数を指定する場合は、「:parameName」のカタチにする。(おそらく)

このパラメータを考慮し、画像参照先を下記のようにする。
‘images/’ + カテゴリID(categoryid) + ‘/photo’ + 写真ID(photoid) + ‘.jpg’
(例:’images/0/photo0.jpg’)

when関数内のURL指定は、下記のようになる。

$routeProvider.when('/photo/:categoryid/:photoid', parameters);

ページが切り替わった際のパラメータの取得方法は、下記の通り、

myApp.controller('PhotoCtrl', ['$scope', '$routeParams', function($scope, $routeParams){
	$scope.categoryId = $routeParams.categoryid; //カテゴリID
	$scope.photoId = $routeParams.photoid; //写真ID
}]);

これで、変数「categoryId」「photoId」に、それぞれ「カテゴリID」「写真ID」を格納できたので、
後は、HTML側に出力するだけです。

<img ng-src="images/{{categoryId}}/photo{{photoId}}.jpg">

ng-src属性は、AngularJSで使用する変数を出力する際に使用する属性です。
ng-src

それではサンプルを見ていきます。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/5/
■サンプルファイル一式
ダウンロード – zip
■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div id="container">

<p>ページ切り替え : <a href="#/photo/0/0">赤いかぼちゃ</a> | <a href="#/photo/0/1">黄色いかぼちゃ</a>
 | <a href="#/photo/1/0">岡山県 倉敷</a> | <a href="#/photo/1/1">岡山県 後楽園</a></p>
<div id="viewBox">
<div ng-view></div>
</div>

</div>

</body>
</html>
■HTML – photo.html
<div ng-controller="PhotoCtrl">
<p><img ng-src="images/{{categoryId}}/photo{{photoId}}.jpg" width="640" height="427" alt=""></p>
<p>images path : images/{{categoryId}}/photo{{photoId}}.jpg</p>
</div>
■JavaScript – app.js
var myApp = angular.module('app', ['ngRoute']);

myApp.config(['$routeProvider',
	function($routeProvider){
		$routeProvider.when('/photo/:categoryid/:photoid', {
			templateUrl: 'photo.html',
			controllerAs: 'PhotoCtrl'
		})
		.otherwise({
			redirectTo: '/photo/0/0'
		});
	}
]);
■JavaScript – controllers.js
myApp.controller('PhotoCtrl', ['$scope', '$routeParams', function($scope, $routeParams){
	$scope.categoryId = $routeParams.categoryid;
	$scope.photoId = $routeParams.photoid;
	$scope.msg = 'html = $routeParams.id : ' + $routeParams.photoid;
}]);