JavaScript (HTML5): AngularJS 導入

AngularJS とは

Backbone.js や Knockout などのような MV* フレームワークで、HTML 更新無しでシームレスな遷移を行うウェブアプリ(シングル HTML でマルチページ)を実現することができます。

公式サイト
http://angularjs.org

 

AngularJS で Hello World

AngularJS は HTML と JavaScript が上手く連携されるようになっており、以下の内容を HTML として保存するだけで、入力するテキストが動的にページに表示されるウェブアプリが完成します。

<!doctype html>
<html lang="ja" ng-app="mainApp">
  <head>
    <meta charset="utf-8" />
    <title>Hello World AngulerJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  </head>
  <body>
    <h1>AngulerJS</h1>
    <input type="text" ng-model="name">
    <p>Hello World. {{name}}</p>
  </body>
</html>

ng-*** という属性をタグに付けたり、{{***}} という記法をすることでデータを入力したり出力することができます。

上記の例では ng-model 属性を付けた input タグが AngularJS には Model として解釈され、{{name}} と書かれた部分は View として解釈されています。
AngularJS では Model が更新されれば View が更新されるデータバインディングを実現しています。