KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

AngularJS入門04


misawa01

AngularJSとは

AngularJSとはGoogleとコミュニティにより開発されたJavaScript(MVW *1)フレームワークです。データバインディング、DI(依存注入)などの機能を保有し、複雑なアプリケーションもシンプルに実装可能です。
*1 「MVW」とは「Model View Whatever」の略で、「Model」「View」「その他何でも」という意味です。

今回は
AngularJSの開発環境を構築し、GitHub上のサンプルを動作させる方法ご紹介します。
具体的には、
・NodeJSのインストール
・Bowerのインストール
・CoffeeScriptのインストール
・サンプルの実行環境構築
 です。
それでは、順に見ていきましょう。

NodeJSのインストール
Node.js公式サイトよりインストーラーをダウンロードして、インストールを行ってください。
misawa02

Bowerのインストール
npmコマンドを使ってBowerをインストールします。
ターミナルから下記のコマンドを実行してください。

npm install bower -g
# Versionの確認ができればOK
bower -v
1.7.9

CoffeeScriptのインストール
npmコマンドを使ってCoffeeScriptをインストールします。
ターミナルから下記のコマンドを実行してください。

npm install -g coffee-script
# Versionの確認ができればOK
coffee -v
CoffeeScript version 1.10.0

GitHubからGoogle App Engineプロジェクトを作成

1. GitHub Repositoryよりソースファイルをチェックアウトしてください。

git clone https://github.com/Sin330/ng_sample.git

2. チェックアウトしたソースをEclipseにImportする。
以下のメニューを選択後、必要な設定を行いImportを行ってください。

File -> Import -> General -> Existing Projects into Workspace

以下の関連記事を参考にGoogle App Engineの環境を設定してください。
Google App Engine 第三回

外部JavaScriptのインストール

Bowerを使用して、外部JavaScriptのインストールを行います。
ターミナルから下記のコマンドを実行してください。
bower.jsonの内容に応じてファイルがダウンロードされます。

> cd ${PROJECT_FOLDER}/war
> bower install

bower cached        https://github.com/angular/bower-angular-route.git#1.5.5
bower validate      1.5.5 against https://github.com/angular/bower-angular-route.git#^1.5.5
bower cached        https://github.com/google/material-design-lite.git#1.1.3
bower validate      1.1.3 against https://github.com/google/material-design-lite.git#^1.1.3
bower cached        https://github.com/angular/bower-angular.git#1.5.5
bower validate      1.5.5 against https://github.com/angular/bower-angular.git#1.5.5
bower install       material-design-lite#1.1.3
bower install       angular-route#1.5.5
bower install       angular#1.5.5

material-design-lite#1.1.3 bower_components\material-design-lite

angular-route#1.5.5 bower_components\angular-route
└── angular#1.5.5

angular#1.5.5 bower_components\angular

CoffeeScriptのコンパイル
CoffeeScriptコマンドを使用して、CoffeeScriptファイルをコンパイルします。
ターミナルから下記のコマンドを実行してください。
コマンドを実行すると、.coffeeファイルを監視し自動でコンパイルを行うようになります。

cd ${PROJECT_FOLDER}
make_coffee.bat

サンプルの実行
Eclipseのプロジェクトを右クリックし、Debug As -> Web Applicationを選択してサンプルを実行してください。

下記のアドレスにアクセスして動作確認を行ってください。
現在のところSample01からSample03まで動作します。

http://localhost:8888

misawa03

今回修正をしたコードについて

基本的な機能、動作は変更していません。
変更内容は、以下の通りです。
ソースコードの解説は次回以降、順に解説していく予定です。
1. Material Design Liteの適応
2. Angular3へのマイグレーションを見越しての、$scope除外(コントローラーのクラス化)
3. MainMenuの作成
4. ng-routeを使用して、各サンプルをTemplate化

【関連記事】
Google App Engine 第一回
Google App Engine 第二回
Javaのライブラリを手軽にテストしたい!! Groovy入門 第1回
Google App Engine 第三回
Google App Engine 第四回
Google App Engine 第五回
Google App Engine 第六回
Google App Engine 第七回
Google App Engine 第八回
Google App Engine 第九回
Google App Engine 第十回
Google App Engine 第十一回
Google App Engine 第十二回
AngularJS入門01
AngularJS入門02
AngularJS入門03