AngularJsをはじめてみる

AngularJsとは?

AngularJSは、Googleとコミュニティによって開発されている
オープンソースJavaScriptフレームワークです。
Webアプリのフロントエンド開発にMVCアーキテクチャを採用しています。
ライセンスは、MIT Licenseでライセンスされたフリーソフトウェアです。
AngularJsは、下記のサイトでダウンロード出来ます。
AngularJS — Superheroic JavaScript MVW Framework

AngularJsの初め方

AngularJSでは、利用する全てのものは、必ずAngularのモジュールに登録する必要があります。
まぁ...何かしらの関数とかサードパーティ製のモジュールとかを
AngularJSが認識している必要があると言うことだと思います。
例えば、controller.jsを作るとします。
それのJSに下記の定義を書きます。

var webApp = angular.module('webApp', []);

ここで利用しているangular.moduleが、
Angularモジュールの作成、登録、取得をグローバル空間で行うためのものです。
なので、利用する全てのものは、必ずAngularモジュールに登録する必要があります。
それだけでは、使えないので、HTMLファイルにAngularを使っていることを定義します。
下記に記載されたようにng-app="名前"を定義します。

<html lang="ja" ng-app="webApp">

これで、Angularに登録されているwebAppと言う名前のモジュールを利用出来るように
なります。

コントローラーを書いてみる

コントローラーは、下記のように書きます。

var webApp = angular.module('webApp', []);
webApp
	.controller('controller', function($scope) {

	});

それだけでは、使えないので、HTMLにどのコントローラーを使うか定義します。

<body ng-controller="controller">
</body>

これで、controllerが使えるようになります。
例えば、何かしらの文字を表示させるようにするには、
コントローラーに処理を追加します。

var webApp = angular.module('webApp', []);
webApp
	.controller('controller', function($scope) {
		$scope.hello = 'HelloWorld';
	});

これは、$scopeにhelloというものを用意して、それに対して、'HelloWorld'の文字列を
設定しています。
Angularでは、$scopeで、ビューとコントローラーがデータをやりとりします。
HTMLの方にそれを使うように書きます。

<!DOCTYPE html>
<html lang="ja" ng-app="webApp">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<script src="angular.min.js"></script>
	</head>
	<body ng-controller="controller">
		<p>{{hello}}</p>
	</body>
</html>

これで、画面を表示すると、HelloWorldの文字列が表示されるようになります。
$scopeに設定したものをHTMLで利用する場合は、{{}}で囲み利用します。
全てがそうではないのですが、ケースにより{{}}をつけたり、つけなかったりする場合もあります。