AngularJS 入門

AngularJS 入門

AngularJSとは？

AngularJS は、Google 社およびコミュニティによって開発された、JavaScript フレームワークのひとつです。MIT ライセンスのオープンソースソフトウェアであり、商用利用も可能です。AngularJS はクライアントサイドの MVC (Model-View-Controller) モデルを実現することができ、特に SPA (シングルページアプリケーション) の構築に適しています。従来、Web サービスではサーバ側で HTML や DOM を生成することが多かったですが、最近の Web サービスでは、クライアント側でデータ処理や DOM の操作が行われることが一般的になりつつあります。

AngularJS はこのようなクライアントサイドでの動的なデータ操作と UI 更新を可能にするための強力なツールセットを提供しており、特に以下のような特徴を持っています。

  • データバインディング：モデルとビューのリアルタイム同期
  • 宣言的プログラミング：HTML 内にディレクティブを埋め込み、ビューの挙動を制御
  • モジュールベースのアーキテクチャ：再利用可能なコードのモジュール化
  • ユニットテストの容易さ：テスト可能なコードを書くためのサポート

サンプル

AngularJS での簡単なサンプルを紹介します。以下の例では、ng-app ディレクティブで AngularJS アプリケーションを定義し、ng-model ディレクティブで双方向データバインディングを実現しています。yourName に入力した値がリアルタイムでビューに反映されます。

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
  <div>
    <p><input type="text" ng-model="yourName"></p>
    <p>Hello {{yourName}}!</p>
  </div>
</body>
</html>

上記のコードでは、<input> フィールドに入力されたテキストが即座に Hello {{yourName}}! に反映されます。

フィルタ

AngularJS では、データを表示する際にさまざまなフィルタを使用して、値を変換することが可能です。例えば、数値のカンマ区切りや通貨表記、日付フォーマットの変換などがサポートされています。

{{12345678|number}}  // 結果: 12,345,678
{{12.34|number:4}}   // 結果: 12.3400
{{12.34|currency}}   // 結果: $12.34
{{'2099-12-31T12:59:59'|date}}  // 結果: Dec 31, 2099
{{"Yamada"|uppercase}}  // 結果: YAMADA

モジュールとコントローラ

AngularJS のアプリケーションは、モジュールとコントローラを使って構成されます。以下の例では、myApp というモジュールを作成し、myController コントローラでスコープ変数 message を定義しています。

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.message = 'Hello world!';
});
</script>
</head>
<body>
  <div ng-app="myApp">
    <div ng-controller="myController">
      {{message}}
    </div>
  </div>
</body>
</html>

リスト操作

AngularJS では、ng-repeat ディレクティブを使ってリストデータを繰り返し表示することができます。以下の例では、members リスト内のデータをループして表示しています。

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function() {
    this.members = [
        { name: 'Tanaka', age: 36 },
        { name: 'Suzuki', age: 16 },
        { name: 'Yamada', age: 26 }
    ];
});
</script>
</head>
<body>
  <div ng-controller="myController as myCtrl">
    <ul>
      <li ng-repeat="member in myCtrl.members">{{member.name}} {{member.age}}</li>
    </ul>
  </div>
</body>
</html>

アクション

AngularJS では、ng-click を用いて、コントローラ内のアクションを簡単に呼び出すことができます。以下のサンプルでは、カウンタを増減させるアクションを定義しています。

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function() {
  this.count = 0;
  this.inc = function() { this.count++; }
  this.dec = function() { this.count--; }
});
</script>
</head>
<body>
  <div ng-controller="myController as myCtrl">
    {{myCtrl.count}}
    <button ng-click="myCtrl.inc()">+1</button>
    <button ng-click="myCtrl.dec()">-1</button>
  </div>
</body>
</html>

フォームバリデーション

AngularJS では、フォームバリデーションの仕組みが組み込まれており、フォームの入力内容が適切でない場合にはエラーメッセージを表示できます。例えば、必須フィールドや文字数の制限などを指定することが可能です。

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
  <form name="myForm" novalidate>
    <input type="text" name="text1" ng-model="sampleText" ng-required="true" ng-minlength=3 ng-maxlength=8>
    <div ng-show="myForm.text1.$error.required">Required!</div>
    <div ng-show="myForm.text1.$error.minlength">Too short!</div>
    <div ng-show="myForm.text1.$error.maxlength">Too long!</div>
  </form>
</body>
</html>

複雑なサンプル

以下は、名前と年齢を入力してリストに追加するサンプルです。チェックボックスを使用して要素を削除することもできます。

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function() {
  this.members = [];
  this.addMember = function() {
    this.members.push({ name: this.name, age: this.age });
    this.name = ''; this.age = '';
  };
  this.removeMember = function(index) {
    this.members.splice(index, 1);
  };
});
</script>
</head>
<body>
  <div ng-controller="myController as myCtrl">
    <input type="text" ng-model="myCtrl.name" placeholder="Name">
    <input type="number" ng-model="myCtrl.age" placeholder="Age">
    <button ng-click="myCtrl.addMember()">Add</button>
    <ul>
      <li ng-repeat="member in myCtrl.members">
        {{member.name}} ({{member.age}})
        <button ng-click="myCtrl.removeMember($index)">Remove</button>
      </li>
    </ul>
  </div>
</body>
</html>
 

その他の参考記事:angularjs npm tutorial