AngularJS

AngularJS のコントローラを利用して 'Hello, 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!' を設定します。
    {{...}} の中で、JavaScript の式を記述することができます。
    angular.module('myApp', []);
angular.module('myApp')
  .controller('myController', function($scope) {
    $scope.msg = 'Hello, AngularJS!';
  });

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