AngularJSで画面遷移するときに便利なng-view

AngularJSアプリケーション開発ガイドという本を買って勉強中です。今、全体の20%くらいしか呼んでませんが、だいぶ全体像がつかめてきました。

バージョンが古いのか、Changing Views with Routes and $locationという章のサンプルコードがうまく動かなかったので、動くようにしました。

この章では、ページ遷移なしで、画面を遷移させましょうというのが主題でした。

必要になるファイルは

  • index.html
  • view1.html
  • view2.html
  • script.js

の三点。

angular-route.jsを読み込む

Railsなどのフレームワークを利用している方は、ご存知だと思いますが、URLを解釈して、どのページを表示させるか判断する処理をルーティングといいます。AngularJSにもこの機能が備わっています。

まずは、ルーティングを可能にするangular-route.jsを読み込みます。

<!DOCTYPE html>
<html ng-app="MainApp">
  <head>
    <meta charset="utf-8">
    <title>ほげほげ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    <!--
    ここの1行がなかった!これによってルーティングができるようになります。
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular-route.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <!-- ng-viewが指定されたタグの内部がルーティングによって変化する -->
    <div ng-view></div>
  </body>
</html>

次に、このモジュールはルーティングの機能を使います、と宣言します。

// ngRouteがルーティングの機能を司る
const MainApp = angular.module('MainApp', ['ngRoute']);

ルーティングの設定を書く

次にルーティングのルールを記述していきます。

URLの文字列と、それに対応するController(mainCtrl)とtemplateUrl(view1.html, view2.html)を指定してあげます。

const MainApp = angular.module('MainApp', ['ngRoute']);
MainApp.config(function($routeProvider){ // ngRouteの$routeProviderが使える。
    $routeProvider.
    when('/', { // '/'にアクセスされたときは
        controller: 'mainsCtrl',  // mainsCtrlを使って
        templateUrl: 'view1.html', // view1.htmlの中身をng-viewの中に入れる。
    }).
    when('/view2',{ // 以下同様につなげられる。
        controller: 'mainsCtrl',
        templateUrl: 'view2.html',
    }).
    otherwise({ // 上のものに該当しなかった場合は
        redirectTo: '/' // '/'にリダイレクト
    });
});
MainApp.controller('mainsCtrl', function($http, $scope){
    // いい感じの処理。
});

それぞれのviewを書く

あとはview1.htmlview2.htmlを書いていくだけです。

<h1>view1</h1>
<a ng-href="#/view2">view2へ</a>
<h1>view2</h1>
<a ng-href="#/view1">view1へ</a>

まとめ

こんなに簡単に画面の再ロードなしの画面遷移ができると楽しいです。

これだけではWebシステムは作れないですが、簡単なスムーズに動く軽いWebサイトを作るのには十分だと思います。

ぜひ、チャレンジしてみてください!