AngularJS 入門 - div1に上がりたいkeitanxkeitanの日記

なんで AngularJS？

http://angularjs.org/ より。
HTML は静的なドキュメントを記述するのには向いているが、動的なウェブアプリケーションを作るのには向いていない。
AngularJS はアプリケーションを作るのに必要な語彙を HTML に追加する。
→「HTML の語彙を拡張する」っていうところが jQuery とは違う感じがする。jQuery はあくまでも JavaScript のライブラリっていう印象だった。

jQuery v.s. AngularJS

同じことを jQuery と AngularJS とでやって比較してみる。
テキストボックスに名前を入力すると「Hello ○○○○!」って表示される HTML。

jQuery

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
          var name = $("#name");
          var greeting = $("#greeting");

          name.keyup(function() {
              greeting.text("Hello " + name.val() + "!");
          })
      })
    </script>
  </head>
  <body>
    <input id="name" type="text">
    <h2 id="greeting">Hello John!</h2>
  </body>
</html>

AngularJS

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
  </head>
  <body>
    <input type="text" ng-model="name">
    <h2>Hello {{name}}!</h2>
  </body>
</html>

AngularJS の方がずいぶんすっきりしている。
jQuery では「ドキュメントの準備が完了したら、処理の対象となる要素を探して、イベントリスナーをセットして…」と詳細な手続きを記述しなければならず、ネストが深くなることもしばしば。
AngularJS ではまず基本となる HTML を記述して、そこにデータバインディングについての記述を少しだけ足せば良い。
公式サイトでも言っていたけれど、一番重要な点は見た目が純粋な HTML と殆ど変わらないということ。
シンプルで、何が行われているのか理解しやすい。

思ったこと

「Angular = 痩せこけた」なるほど。
まだここまでしか見ていないけれど、とても便利な印象。
よく使う手続きをシンプルにまとめるのがライブラリだけれど、JavaScript 全く書かずに動的なウェブアプリケーションを作れるのはすごい。
中のコードもしっかり読みたいと思った。
他にどんなことができるのかとても気になりました。
引き続き勉強します。