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