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化
【関連記事】
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
- 2016年07月25日
- CATEGORY- 1. 技術力{技術情報}