０、はじめに
この業界にいると一度はHTML+JavaScriptを使用することがあると思います。私も最近Webサイトの構築を行う機会がありました。なんとなく何のフレームワークも使用しないで構築してしいましたが、もっと最近の組み方をすることで開発速度や保守性などが改善されるのではないか？ということを今更ながら感じました。そんなわけで、最近の流行りに追いつくためにも、人気が高そうな「AngularJS」を使用方法を調べていきます。
１、AngularJSってなんだろう？
AngularJSはGoogleとコミュニティより開発しているオープンソース(MIT)のJavaScript用MVW（Model-View-Whatever）フレームワークになります。双方向データバインディング、DIコンテナー、HTMLテンプレート機能のルーティング等が使用ができる！
なるほど…よくわからん(・о・｀;)
JavaScriptのフレームワークを使用したことがない私にとっては言葉だけでは到底わかりません。実際に使用しながら学ぶことにします。
２、AngularJSを動かしてみる
時間がかかるとは思いますが、一つずつ確認して確実に使い方をマスターしていきます。まずは、必要最低限のコードでAngularJSの動きを確認します。そこで、下記の「index.html」を作成しました。
index.html
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<div>
<input type="text" ng-model="inputText">
</div>
<div>
{{inputText}}
</div>
</body>
</html>
実行結果
…う…動きました！一つ一つ使い方を追っていきましょう。
① AngularJSの読み込み
AngularJSを使用するためにはまず読み込まなければいけません。「index.html」の4行目でそれを行っています。AngularJSのバージョン随時変更する必要があります。
② AngularJSの有効化
このページではAngularJSを使用しますという宣言を行うことでAngularJSを有効にすることができます。「index.html」の2行目の「ng-app」がそれにあたります。
③ モデル名の設定
要素に「ng-model=”モデル名”」を記載することでモデル名の設定を行うことができ、ここでつけたモデル名がAngularJSで使用する際の名前になります。今回は、”inputText”という名前でバインド（関連付け）をしました。「index.html」の8行目の「ng-model=”inputText”」がそれにあたります。
④ 出力
「③ モデル名の設定」でバインドしたinputTextを表示します。「index.html」の11行目の「{{inputText}}」がそれにあたります。「{{}}」はAngular式と呼ばれる中身にAngularJSの式を記載しますよという記述方法になります。
今回は簡単なプログラムからAnjularJSの動きを確認しました。次回から、もう少し詳しく調べていきたいと思います。
