JavascriptのフレームワークAngularJSをご紹介します。グーグル製で最近リリースしたものです。
これすごいですね！jQueryもいいですが、これも相当楽に作業できますね。
詳しくは公式サイトを参照ください。
何がすごいかって言うとAngularJSの規則を覚えるとある程度は勝手にやってくれることろなんですね。
長いコードを書かなくても直感的に記述できるような感じです。
公式サイトがとてもわかりやすいです。関係無いですがこのサイトもツイッターブートストラップ（CSSフレームワーク）使っていますね。
公式サイトのAPIリファレンスを見てかまってみるのも良いかもしれません。
スポンサーリンク
どんなものかちょっと紹介してみます。
jQueryとの比較
テキストエリアに文字を入れると特定の場所に入力した文字が表示されるコードを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>比較テスト</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
var name = $('#name');
var greeting = $('#greeting');
name.keyup(function() {
greeting.text('こんにちは' + name.val() + 'さん！');
})
})
</script>
</head>
<body>
<input type="text" id="name">
<p id="greeting"></p>
</body>
</html> |
上記のようになりますね。ではAngularJSで書くとどうなるか。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="UTF-8"> <title>比較テスト</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <input type="text" id="name" ng-model="yourName"> <p id="greeting">こんにちは{{yourName}}さん!</p> </body> </html> |
これだけです！！htmlのところにng-appとinputのところにng-modelを書いて表示するところに{{name}}書くだけです！
めちゃビビった。とても簡単ですね。でもサイトにてご覧ください。
