AngularJSの全体像がつかめてきましたぞ！ガチャピン！1

本を買って勉強中です。今、全体の20%くらいしか呼んでませんが、だいぶ全体像がつかめてきました。

ただ、どうやら、バージョンが古いのか、

Changing Views with Routes and $location

という章のサンプルコードがうまく動かなかったので、それの補足というか、こうやったら動いたよっていうやつです。

この章の主題は、ページが変わることなしに、画面を遷移させましょうっていう話です。

必要になるファイルは

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

の三点。

angular-route.jsを読み込む

Railsとかやってたら、ご存知かと思いますが、URLを解釈して、どのページを表示させるか判断する処理をルーティングといいます。AngularJSもMVCフレームワークなので、もちろんこの機能が備わっているわけです。

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

index.html

<!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>

    <!--
    ここの１行がなかった！これによってルーティングができるようになります。
    -->
    <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>

次に、このモジュール3はルーティングの機能を使いますよ。っていう感じで指定してやります。

script.js

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

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

次にどういう設定でルーティングしていくかを書いていきます。

script.js

var 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.htmlとview2.htmlを書いていくだけです。

view1.html

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

view2.html

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

AngularJSのURLは基本的にこういう感じで#/path/to/linkみたいな感じになるようです。よく見たら、GmailのURLも#が使われていますね。

まとめ

いやはや、こんなに簡単にページ遷移なしの、画面遷移ができるとなかなか楽しいですね。

基本的に画像やらなんやらは最初にダウンロードしちゃって、あとはデータだけを取り出したり送ったりすることで、データの通信が少なく、サーバーにもユーザにも優しいアプリケーションができそうです。

この記事に書いてあることがきっとViewの基本。次はModelの基本として、サーバーからデータを取得する方法でも書きましょうかね。

  1. ムック風 ↩
  2. まだmoduleとは何かはっきりした理解はできていませんが、アプリケーション単位で作られるものだと思います。なので、普通、ひとつのアプリケーションにつき、ひとつのmoduleが基本だと思います。 ↩