AngularJSでシングルページアプリケーションを作るためのミニマルなサンプル

1月 09, 2014

12年あたりから目にするようになった「Single-page application（SPA）」というものがある。
Single-page application - Wikipedia, the free encyclopedia

これは言ってみれば、初めにトップページを読み込んだらその後はページ遷移を一切行わないWebアプリケーションのことだ。

SPAは、WebSocketでサーバーなどと通信をし続けなければならいない場合や、ストリーミングビデオやオーディオを再生し続けなければならない場合に特に有効だろう。その他にも、ページの再読み込みによるUXの低下を避ける効果もある。

AngularJSにもSPAを作る機能がある。AngularJS本家サイトのチュートリアルもある。
AngularJS: 7 - Routing & Multiple Views

しかし、このサンプルはすでに様々な機能が組み込まれているので分かりづらい。そこで、AngularJSでSPAを作るためのミニマルなサンプルを作ってみた。

ソースのダウンロード

angular_route.html

<!DOCTYPE html>
<html lang="ja" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Angular Route Sample</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
    <script src="angular_route.js"></script>
  </head>
  <body style="padding:16px;">

    <!-- ビデオ -->
    <div>初めにビデオを再生しましょう</div>
    <iframe width="320" height="180" src="//www.youtube.com/embed/teMdjJ3w9iM" frameborder="0" allowfullscreen></iframe>

    <!-- メインコントローラー -->
    <div ng-controller="CtrlMain" style="margin-top:16px; margin-bottom:16px;">
      <div>viewを変更してもビデオが途切れない、つまりページがリフレッシュされていないことが確認できます</div>
      <button ng-click="switchViewTo('view1');">to view1</button>
      <button ng-click="switchViewTo('view2');">to view2</button>
    </div>

    <!-- 切り替えられるView -->
    <div style="background-color:#eee; padding:8px;" ng-view></div>

  </body>
</html>

angular_route_view2.html

<h4 style="color:#F00;">view2</h4>

angular_route.js

/**
 * AngularJSアプリケーション初期化
 */
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/view1', {template: '<h4>view1</h4>', controller: 'CtrlMain'});
  $routeProvider.when('/view2', {templateUrl: '/angular_route_view2.html', controller: 'CtrlMain'});
}]);


/**
 * メインコントローラー
 */
function CtrlMain($scope, $location) {
  $scope.switchViewTo = function(toView) {
    console.log('switchViewTo() toView=' + toView);
    $location.path("/" + toView);
  }
}

angular_route.htmlをロードしたら、まずビデオを再生させる。その後、「to view 1」もしくは「to view 2」というボタンをクリックしてその下の表示を切り替える。

この時にURLが変更されていることに注意する。URLが変更されていてもビデオが途切れていないことから、ページがリフレッシュされていないことが確認できる。

琴線探査