概要

AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。

サンプルコード

index.html

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
</head>
<body>

<div ng-view></div>

<script>
 var app = angular.module('myApp', ['ngRoute']);
 app.config(['$routeProvider', function($routeProvider){
   $routeProvider
   .when('/path1', {
     templateUrl: 'mytemplate1.html',
   })
   .when('/path2/:param', {
     controller: 'myController',
     templateUrl: 'mytemplate2.html',
   })
  .otherwise({
     redirectTo: '/path1'
   });
 }]);

 app.controller('myController', ['$scope', '$routeParams', function($scope, $routeParams){
   $scope.param = $routeParams;
 }]);
</script>

</body>
</html>

mytemplate1.html

<p>template1</p>
<a href="/#/path2/123">/#/path2/123</a>

mytemplate2.html

<p>template2: {{ param }}</p>