近年、javascriptの開発にフレームワークを使用する傾向にあるようです。
javascriptのフレームワークには、AngularJSやBackbone.js、Knockout.js、React.jsなどがあり、種類が増えてきています。
javascriptのフレームワークは、おおむね以下のような特徴があります。
- MVC/MVVMモデル
- HTML/JavaScriptの双方向バインディング
- URLルーティング
- HTMLテンプレート
今回は、数種類あるjavascriptのフレームワークの中の一つ「AngularJS」をピックアップし、ダウンロード・導入〜実際に動作させてみたいと思います。
AngularJSとは
AngularJSはGoogle製のJavaScriptフレームワークで、Googleとコミュニティで開発している非常に活発なオープンソース(MIT)です。
AngularJSはMVWフレームワークで
- 双方向データバインディング
- ルーティング
- 独自タグ、属性
- REST API呼び出し
- DI
など機能が豊富なフルスタックフレームワークです。
AngularJSダウンロード
1.公式サイトにアクセス
以下リンクをクリックし、公式サイトを開きます。
公式サイト
2.Downloadボタンクリック
真ん中の青いDownloadボタンをクリックします。
3.モーダルのDownloadボタンクリック
以下のようなモーダルが表示されます。
デフォルトの選択のままDownloadボタンをクリックします。
angular.min.jsのダウンロードが始まります。
AngularJS導入＆動作確認
1.ダウンロードしたjsファイルを任意の場所にアップロード
例）ルートディレクトリ以下の「js/common/angular.min.js」にアップロード
2.アップロードしたjsファイルを読み込む
headタグ内でscriptタグを使用して読み込む
<html> <head> <script src="js/common/angular.min.js"></script> </head> <body> </body> </html>
3.AngularJS動作確認
htmlタグに「ng-app」ディレクティブを追加し、body内に「{{ 5 + 1 }}」を記述
<html ng-app>
<head>
<script src="js/common/angular.min.js"></script>
</head>
<body>
5 + 1 = {{ 5 + 1 }}
</body>
</html>
以下のように「{{ 5 + 1 }}」の部分が「6」と表示されていればOKです。
「{{ }}」は、エクスプレッション構文で、HTML内で動的な処理を行うために使用します。
以上でAngularJsのダウンロード〜動作確認は終了です。
導入までは簡単に行えたかと思います。