AngularJS入門04

2016年07月25日
CATEGORY- 1. 技術力｛技術情報｝

AngularJSとは

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

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

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

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

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

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

2016年07月25日
CATEGORY- 1. 技術力｛技術情報｝

AngularJS入門04

CATEGORY

LATEST ENTRY

秀長に学ぶ(3)

秀長に学ぶ(2)

秀長に学ぶ(1)

ダム式経営について

経営の安定について

TAG