@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

今更AngularJSでHelloWorld

今更AngularJSでHello Worldをしてみたいと思います。
AngularJS — Superheroic JavaScript MVW Framework
AngularJSはHTMLをテンプレートファイルとしてアプリケーションを組み込むような感じのJavaScriptMVCフレームワークになるのかと思います。
使うのは、ng-appとng-modelとバインド用の{{}}です。
ng-appはHTMLファイルの中のアプリケーションとして動作する部分を定義するものだと思えば良いのでしょうか。通常は、html要素か、body要素か、div#containerとかそのあたりの部分になるのかと思います。属性として定義すれば良いです。

<!DOCTYPE html>
<html lang="ja" ng-app>
  <!-- HTMLの中身 -->
</html>

続いて、ng-modelは、input要素などに定義してvalue属性をHTMLテンプレート内で使えるようにするものだと思えば良いかと思います。ng-model="変数名"の様な感じで書きます。

<input type="text" ng-model="data">

最後に、{{}}ですが、HTMLテンプレートに値を埋め込むためのものです。他の言語でもテンプレートエンジン等使ったことがあればイメージしやすいですね。

<div>{{data}}</div>

AngularJSで面白いところは、ng-modelを定義したinput要素の値が変化した瞬間にテンプレートに埋め込まれると言うことでしょうかね。実際にやってみるとおもしろいです。
サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>AngularJS First Sample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  </head>
  <body>
    <div id="container" ng-app>
      <input type="text" ng-model="data" placeholder="Please input your name" />
      <div>Hello {{data}}!</div>
    </div>
  </body>
</html>

サンプル

AngularJSで機先を制す

AngularJSで機先を制す