『AngularJSアプリケーション開発ガイド』第2章のサンプルコードの問題点と直し方

AngularJSアプリケーション開発ガイド

一言でいうと

動かない時はオライリーのサイトからサンプルコードを落として読もう

詳細な説明

本書の第2章第6節「ルートと$locationに応じたビューの切り替え」では、AngularJSのルーティング機能を利用しています。

ルーティング機能(ngRoute)は、AngularJS 1.2.0まではAngularJSに同梱されていたのですが、1.2.0以降は別モジュールとして分割された、という経緯があります。

原書の著者がGitHubで公開しているサンプルコードを見ると、読み込んでいるのはv1.0.8のangular.min.jsのみで、ルーティングモジュールは読み込んでいません。

一方、訳書である本書は、訳者によって以下のように変更されています。

<script src="src/angular.js"></script>
<script src="src/angular-route.js"></script>

本文中には全く登場しないangular-route.jsがしれっと登場していますが、AngularJS 1.2.0以上では、このファイルが無いとサンプルコードは動きません。angular-route.jsはCDNなどから取得するとよいでしょう。たとえば、最新版の1.3.5の場合、以下のコードで取得できます。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>

また、ngRouteは外部モジュールなので、モジュールを作成する際に依存先として指定しておく必要があります。

var app = angular.module("app", ["ngRoute"]);

ngRouteモジュールの読み込みと、依存先の指定の2点を行えば、第2章第6節(AMail)のサンプルコードは動きます。実際、冒頭で紹介した訳者によるサンプルコードでは、CDNからangular.min.jsとangular-route.jsを読み込んで、[“ngRoute”]しています。ただ、これらの解説は本文中に全くありません。本書が日本のAmazonで低評価になっている一因はここにあります。

コメントをどうぞ

コメントを残す