AngularJS の入門をしてみる - 技術をかじる猫

まずは WebJars の使い方おさらい

Playframework2.3 では WebJars にデフォルト対応しているという事で、まず単純に Bootstrap を読んでみる。

    libraryDependencies ++= Seq(
      jdbc,
      anorm,
      cache,
      ws,
      "org.webjars" % "bootstrap" % "3.0.2",
      "org.webjars" % "angularjs" % "1.3.0-rc.1"
    )

で、これを読もうとすると、

    <link rel='stylesheet' href='@routes.Assets.at("lib/bootstrap/css/bootstrap.css")'>

パスのURIがポカーンですわ。分かるか！と思ったら、「lib/bootstrap」までがライブラリ名、「css/bootstrap.css」はWebJarsの「Files」の中のライブラリ名(バージョン付き)から下の名前のようだ。分かりやすくする為に WebJars に手を入れる必要がある。内容はここ参照。

libraryDependencies に webjars-play を入れる必要がある。

    "org.webjars" %% "webjars-play" % "2.3.0",
    "org.webjars" % "bootstrap" % "3.0.2",
    "org.webjars" % "angularjs" % "1.3.0-rc.1"

次、routes に下記をほげっと

    GET     /webjars/*file              controllers.WebJarAssets.at(file)

これで WebJars にアクセスできるようになるので、読み込む対象を入れておこう。すると、HTML の記述が下記でいける様になる。

    <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("css/bootstrap.min.css"))'>

え？冗長になった？読めない予測できないURLと格闘するのとどっちがいい？

私は絶対こっちの方がマシだと思うよ。

初回 AngularJS コード

最初 Oreilly の「AngularJS 開発ガイド」を参考に書こうと思ったのだが、最初のコードからして早速動かない。

同じ本を参考にしようとして早速詰まった同胞に捧げよう「HelloController is not a function」と言われてこける。

多分本で使ってる AngularJS バージョンが古い*1んだと予測される。チュートリアル入り口で意味も分からずエラー吐かれるのは挫折フラグだと思うんだ。

仕方無いので、本はもはや『どんな機能があるか』だけ把握するのに使う。進歩の早い Web 業界じゃ良くある事だと割り切るしか無い。

で、ざっくり書いたのが下記

    <div ng-app="myAppName">
        <script type="text/javascript" src='@routes.Assets.at("lib/angularjs/angular.js")'></script>
        <script type="text/javascript" src='@routes.Assets.at("javascripts/controller.js")'></script>
        <div ng-controller="HelloController">
            <p>{{greeting.text}}, World</p>
        </div>
    </div>

バージョンは 1.3-rc 1 ここ重要。

controller.js は下記。

    angular.module('myAppName', [])
        .controller('HelloController', function($scope) {
             $scope.greeting = {text: "Hello"};
        });

超基礎でいきなり嵌りどころかよと思うが言っても仕方無い。

*1:バージョン番号書いてないけど