【簡単】AngularJS(jsフレームワーク)のダウンロード&動作確認

  • LINEで送る

近年、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ボタンをクリックします。
スクリーンショット 2015-07-11 11.56.56.png

3.モーダルのDownloadボタンクリック

以下のようなモーダルが表示されます。
デフォルトの選択のままDownloadボタンをクリックします。
angular.min.jsのダウンロードが始まります。
スクリーンショット 2015-07-11 11.57.23.png

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です。

スクリーンショット 2015-07-13 23.45.00.png

「{{ }}」は、エクスプレッション構文で、HTML内で動的な処理を行うために使用します。

以上でAngularJsのダウンロード〜動作確認は終了です。
導入までは簡単に行えたかと思います。

AngularJS公式APIリファレンス

SNSでもご購読できます。

コメントを残す

*

CAPTCHA