azorka1861/detail.html

## detail.html
<div><strong>件名:</strong> {{ message.subject }}</div>
<div><strong>送信者:</strong> {{ message.sender }}</div>
<div><strong>日時:</strong> {{ message.date }}</div>
<div>
    <strong>宛先：</strong>
    <span ng-repeat="recipient in message.recipients">{{ recipient }}</span>
</div>
<div>{{ message.message }}</div>
<a href="#/">メッセージのリストに戻る</a>

## index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS 1.6 ngRouteのサンプル</title>
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- angularjs -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script>
(function(){
    'use strict';

    angular.module('myApp', ['ngRoute'])
    .value('messageList', function() {
        return [
            {
            id: 0,
            sender: "JohnDoe@example.com",
            subject: "進捗どうですか？",
            date: "2016/12/19 13:45:32",
            recipients : ["JohnSmith@example.com"],
            message: "お疲れ様です。あの件の進み具合はいかがでしょうか？ご連絡お待ちしております。"
            },
            {
            id: 1,
            sender: "Yamada@example.com",
            subject: "例の件はまだですか？",
            date: "2016/12/19 15:26:56",
            recipients : ["Tanaka@example.com"],
            message: "例の件はどうなっていますでしょうか？連絡下さい。"
            }
        ]
    })
    .controller('ListController', function($scope, messageList) {
      var messages = messageList();
      $scope.messages = messages;
    })
    .controller('DetailController', function($scope, $routeParams, messageList) {
      var messages = messageList();
      $scope.message = messages[$routeParams.id];
    })
    .config(function($routeProvider, $locationProvider) {
        $locationProvider.hashPrefix('');
        $routeProvider
        .when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
        })
        .when('/view/:id', {
          templateUrl: 'detail.html',
          controller: 'DetailController'
        })
        .otherwise({
          redirectTo: '/'
        });

    })
})();
</script>

</head>
<body>
<div class="container">

  <div class="page-header">
    <h2>AngularJS 1.6 ngRouteのサンプル</h2>
  </div>
  <div ng-view></div>

</div><!-- /container -->
</body>
</html>

## list.html
<div class="table-responsive">
    <table class="table table-bordered table-hover table-striped table-condensed">
        <tbody>
            <tr>
                <td>送信者</td>
                <td>件名</td>
                <td>日時</td>
            </tr>
            <tr ng-repeat="message in messages">
                <td>{{ message.sender }}</td>
                <td><a href="#/view/{{ message.id }}">{{ message.subject }}</a></td>
                <td>{{ message.date }}</td>
            </tr>
        </tbody>
    </table>
</div><!-- //table-responsive -->
	<div><strong>件名:</strong> {{ message.subject }}</div>
	<div><strong>送信者:</strong> {{ message.sender }}</div>
	<div><strong>日時:</strong> {{ message.date }}</div>
	<div>
	<strong>宛先：</strong>
	<span ng-repeat="recipient in message.recipients">{{ recipient }}</span>
	</div>
	<div>{{ message.message }}</div>
	<a href="#/">メッセージのリストに戻る</a>
	<!DOCTYPE html>
	<html lang="ja" ng-app="myApp">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AngularJS 1.6 ngRouteのサンプル</title>
	<!-- bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- angularjs -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
	<script>
	(function(){
	'use strict';

	angular.module('myApp', ['ngRoute'])
	.value('messageList', function() {
	return [
	{
	id: 0,
	sender: "JohnDoe@example.com",
	subject: "進捗どうですか？",
	date: "2016/12/19 13:45:32",
	recipients : ["JohnSmith@example.com"],
	message: "お疲れ様です。あの件の進み具合はいかがでしょうか？ご連絡お待ちしております。"
	},
	{
	id: 1,
	sender: "Yamada@example.com",
	subject: "例の件はまだですか？",
	date: "2016/12/19 15:26:56",
	recipients : ["Tanaka@example.com"],
	message: "例の件はどうなっていますでしょうか？連絡下さい。"
	}
	]
	})
	.controller('ListController', function($scope, messageList) {
	var messages = messageList();
	$scope.messages = messages;
	})
	.controller('DetailController', function($scope, $routeParams, messageList) {
	var messages = messageList();
	$scope.message = messages[$routeParams.id];
	})
	.config(function($routeProvider, $locationProvider) {
	$locationProvider.hashPrefix('');
	$routeProvider
	.when('/', {
	templateUrl: 'list.html',
	controller: 'ListController'
	})
	.when('/view/:id', {
	templateUrl: 'detail.html',
	controller: 'DetailController'
	})
	.otherwise({
	redirectTo: '/'
	});

	})
	})();
	</script>

	</head>
	<body>
	<div class="container">

	<div class="page-header">
	<h2>AngularJS 1.6 ngRouteのサンプル</h2>
	</div>
	<div ng-view></div>

	</div><!-- /container -->
	</body>
	</html>
	<div class="table-responsive">
	<table class="table table-bordered table-hover table-striped table-condensed">
	<tbody>
	<tr>
	<td>送信者</td>
	<td>件名</td>
	<td>日時</td>
	</tr>
	<tr ng-repeat="message in messages">
	<td>{{ message.sender }}</td>
	<td><a href="#/view/{{ message.id }}">{{ message.subject }}</a></td>
	<td>{{ message.date }}</td>
	</tr>
	</tbody>
	</table>
	</div><!-- //table-responsive -->