AngularJSを最近使うようになってきて楽しいです。
このngRouteの使い方は、ng-repeatしているリストのクリックイベントでよく使うやり方です。
自身の記憶の整理のため記事にしておきます。
基本サンプルコード
index.html
<!DOCTYPE HTML>
<html ng-app="myApp" lang="ja">
<head>
<meta charset="utf-8">
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/foo/', {templateUrl: 'foo.html' }) // templateUrlでテンプレートとなるファイルとテンプレ名を指定
.when('/bar/', {templateUrl: 'bar.html' }) // 同様にテンプレ指定（ここでは遷移後）
.otherwise({redirectTo: '/foo'}); // 初めに表示するテンプレ名
}]);
app.controller('MainController', ['$scope', '$location', function($scope, $location){
$scope.click = function(value) {
$scope.value = value;
$location.path('/bar/'); // クリック後遷移するテンプレ指定
};
}]);
</script>
</head>
<body ng-controller="MainController">
<div ng-view></div>
</body>
</html>
foo.html
<div> <input type="text" ng-model="value" /> <button ng-click="click(value)">クリック</button> </div>
bar.html
<div>入力値：{{value}}</div>
