AngularJS

AngularJS のコントローラを利用して 'Hello, AngularJS!' を表示します。

AngularJS とは、グーグルとコミュニティによって開発が進められている JavaScript フレームワークです。
従来、クライアントサイド開発といえば jQuery が定番でしたが、jQuery はあくまでページ操作を中心にサポートするライブラリでした。
AngularJS の特徴は、クライアントサイド開発で必要となる大方の機能が AngularJS ひとつを導入するだけで、一通り揃っています。
AngularJS が提供する具体的な機能を列挙します。
機能 概要
テンプレートエンジン モデルの値をレイアウトするための機能
双方向データバインディング モデル/ビュー間での値の変更を互いに反映させる機能
ディレクティブ 条件分岐、繰り返し、イベント処理などビューで利用する機能を提供
フィルター ビューに出力すべき値を加工する機能
ルーティング URLに応じて適用するテンプレートを切り替え
このコーナーの作成に当たっては、主として次のページを参考にさせていただきました。
AngularJS 入門
AngularJS TIPS

次のリンクをクリックすると "ngp_guid.html" が呼び出されて 'Hello, AngularJS!' が表示されます。
AngularJS サンプルプログラム

プログラムの説明

  1. "angular.min.js" はネットから組み込むので事前にダウンロードする必要はありません。
    ダウンロードするときは Angular Download から行って下さい。
  2. AngularJS サンプルプログラム "ngp_guid.html" です。
    AngularJS のコーナーでは、文字コードに utf-8 を使うことにします。
    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="UTF-8" />
    <title>AngularJS TIPS</title>
    </head>
    
    <body ng-controller="myController">
    <div>{{msg}}</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    
    <script>
    angular.module('myApp', []);
    angular.module('myApp')
      .controller('myController', function($scope) {
        $scope.msg = 'Hello, AngularJS!';
      });
    </script>
    
    </body>
    </html>
    
  3. html を AngularJS の myApp モジュールに関連付けます。
    <html ng-app="myApp">
    
  4. myApp モジュールを作成して myController コントローラーを登録します。
    div で定義した {{msg}} に 'Hello, AngularJS!' を設定します。
    angular.module('myApp', []);
    angular.module('myApp')
      .controller('myController', function($scope) {
        $scope.msg = 'Hello, AngularJS!';
      });
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)