AngularJSをはじめてみる

AngularJS

久々の更新です。
今日からしばらくAngularJSの勉強をしていこうと思います。

http://angularjs.org/
AngularJSはGoogleによって開発されているJavaScriptのライブラリです。

AngulaeJSの目的はMVCを備えたブラウザベースのアプリケーションの開発とテスト両方を容易にすることだそうです。

まずは、AngularJSのトップページを読み進めながら、最初の一步を学んでいきましょう。

最初にAngularJSを用いたコードを示します。
HTMLドキュメントとして、以下を記入してブラウザで開いてください。
(ソースコードはAngularJS公式サイトより引用)

<!doctype html>
<html ng-app><--①ng-app宣言 -->
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script><!-- ②AngularJSのインクルード -->
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here"><!-- ③ng-modelの宣言 -->
      <hr>
      <h1>Hello {{yourName}}!</h1><!-- ④変数のバインド -->
    </div>
  </body>
</html>

1つずつ見ていきます。

①ng-appの宣言
AngularJSを適用したいタグ要素の属性として、「ng-app」を設定することによって、
設定したタグの中はAngularJSの機能を使うことができます。

②AngularJSのインクルード
JavaScriptライブラリの宣言です。
もちろん、ダウンロードしたAngularのJavaScriptファイルを読み込むこともできます。

③ng-modelの宣言
ng-modelが何かは置いておいて、ここではこのテキストボックスに"yourName"というプロパティを定義した・・・・くらいに考えればよいです。

④変数のバインド
プロパティを{{}}で囲むことで、そのプロパティにアクセスできます。
ここでは、テキストボックスに入力した文字列が入ってくることになります。

以下が実行イメージになります。

f:id:ats337:20140129015611p:plain