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

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

script.js

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

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

script.js

それぞれのviewを書く

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

view1.html

view2.html

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

まとめ

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

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

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


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