AngularJSを使ってみよう

LINE Engineering2012-10-29

LINE Engineering Blog official account

こんにちは、こんばんわ
NHN Japan ウェブサービス本部開発1室UITチーム吉田徹生(@teyosh)と申します。

最近ではJavaScriptのMVCフレームワークが雨後のタケノコのようにたくさん出てきています。
先日Quirks ModeがJavaScript Libraryの利用状況をアンケートが公開していました。
backbone.jsやknockout.jsなど、MVCライブラリもランクインしてきました。

その中で今回はAngularJSを紹介しようと思います。

まずは、Angular JSについて

AngularJS（アンギュラージェイエス）は、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークである。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としている。MIT Licenseでライセンスされたフリーソフトウェアである。
初版は、Miško HeveryとAdam Abronsによって2009年に発表され、2012年6月にバージョン1.0.0がリリースされた[1]。[wikipedia]

10月現在

stable 1.0.2
unstable 1.1.0

が出ています。
今回は1.0.2を中心に解説していきます。

利用方法

scriptを挿入してください。
CDNがありますので、それを読み込むのがおすすめです。

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

又は、GitHubにありますのでcloneしてください。

Hello World

早速ですが、日本語を書くよりコードを見ていただいたほうが解りやすいかと思います。

HTML:

<body ng-app>
    <div ng-controller="helloCtrl">
        <span>{{hello}}</span>
    </div>
</body>

javascript:

function helloCtrl($scope){
    $scope.hello = "Hello, World";
}

sample

AngularではAttributeに諸々追加していきます。

では、上から見ていきたいと思います。

Angular appが宣言されます
DOMが読み込み終わったらcontrollerが呼び出されます
modelが更新されます
viewが更新されます

肝になる要素の説明です。

ng-app

angularのappliの宣言です。

ng-controller

controllerの設定になります。
ここで指定したfunctionを呼び出します。

Model置換になります。

ちなみにAttributeのprefixは以下が設定できます。
・ng
・ng-*
・x-ng-*
・data-ng-*
* ngとはA[ng]ularの略だそうです。

MVCならではのviewからmodelの変更やclick等のイベントを指定することも出来ます。

<body ng-app>
<div ng-controller="helloCtrl">
    <input type="text" ng-model="hello">
    <span>{{hello}}</span>
    <button ng-click="goodbye()">Good Byeに変更</button>
</div>
</body>

javascript:

function helloCtrl($scope){
    $scope.hello = "Hello, World";
    $scope.goodbye = function(){
        $scope.hello = "Good Bye";
    }
}

sample

inputにmodelを設定することにより、リアルタイムでmodelの書き換え
buttonにng-clickイベントを登録することによりモデルの書き換え

になります

他には、module作成やdirectiveの追加などまだまだ沢山の機能がありますので
AngularJSで、質問やモジュール自慢などお待ちしております。
日本語がいいという方はこちらから

frontend