AngularJSをちょっとだけ触ってみた

表題に偽りなく本当に「ちょっと」なのでチュートリアル的なのを探してたりする人は回れ右してくださいね。

さて、ちょっと前から話題になってる感のある「AngularJS（あんぎゅらーじぇいえす）」ですが、ほんのちょこっとだけ触ってみました。
雰囲気をつかむためにそれなりに動くものを最小限で書くとこんな感じです。
（コード量減らすために色々省略してます）

<html ng-app>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<p>Your Name : <input ng-model="name"></p>
<p>Hello, {{name}}</p>
</html>

HTMLタグにおまじない（ng-app）を書いて、
GoogleのCDNからAngularJS本体を読み込んで、
テキストボックスに専用の名前を付けて（ng-model=”name”）、
テキストボックスに入力されたものをそのまま表示（{{name}}）させてるだけですね。

他に何も書かなくても勝手に入力と出力がバインドされます。
実際にはAngularJSが裏側で色々と頑張ってくれてるわけですが、class名がーとかID名がーとか考えずにこういうバインドができるのはとても楽ですね。

他にもコードをほとんど書かなくても楽しめるものとして、先程のコードのテキストボックスをちょっとだけいじってみましょう。

<input ng-model="name" required>

はい、謎属性の「required」を追加しただけですね。
でもこれだけで未入力時には赤くハイライトされ、入力されるとハイライトが消えます。

この動作からも分かるようにAngularJS自体がHTMLを加工して表示しているので、通常のHTML/CSSのつもりで開発したものをいきなりAngularJS化するのは難しいのですが、ここまで楽にダイナミックなUIが作れるのは良いですね。

AngularJSをちょっとだけ触ってみた

TAG

TAG