【初級】AngularJS導入

【初級】AngularJS導入

AngularJSを試したい時、最低限必要なパッケージ及び導入手順を記述する。※ 2015年時点

前提条件

AngularJS 1.3(Versionが違うと全然違う)
Mac or Linux?

必要なもの

Homebrew

OS X用パッケージマネージャー
今回はインストールを割愛する為
以下のURL参考
http://brew.sh/index_ja.html

AngularJS

今回、目的としているFramework
https://angularjs.org

node.js

サーバサイドJavaScript
http://nodejs.jp

webpack

静的なファイルの依存関係を解決し結合したり分割するツール
http://webpack.github.io

npm

Node.jsのモジュールを管理するためのツール
https://www.npmjs.com

glup

Node.js上で動くタスク自動化のためのビルドツール
http://gulpjs.com

bower

フロントエンド用のパッケージマネージャ
npmからフロントエンド用を分けるために使用
npmに全部混ぜて活用も可能
http://bower.io

karma-cli

karma用のコマンドラインインターフェース

karma

テスト自動環境環境
http://karma-runner.github.io/0.12/index.html

yeomen

ビルドツール(AngulerJS推奨?)
http://yeoman.io

Chrome

Batarangツール使用の為、ブラウザ固定

導入順番

1. node.js
2. npm
3. bower
4. プロジェクトごとに管理する
5. mkdir test
6. yeomen
7. webpack
8. karma-cli
9. npm init
10. bower init
11. karma
12. AngularJs

コマンド

• node.js
  homebrewを用いてインストールする
  (Linuxはyumとかでよろしく)

%brew install node
%node -v
v0.10.36

• npm
  homebrewを用いてインストールする
  (Linuxはyumとかでよろしく)

%brew install npm
%npm -v
2.3.0

• bower
  npmを用いてインストールする
  グローバル環境にインストール

%npm install -g bower
May bower anonymously report usage statistics to improve the tool over time? (Y/n) Y or N ←どっちでも可
%bower -v
1.4.1

• yeomen
  npmを用いてインストールする
  グローバル環境にインストール
  yo -vやると色々聞かれる

%npm install -g yo

• webpack
  npmを用いてインストールする
  グローバル環境にインストール
  ローカルでもいいかも

%npm install -g webpack

• karma-cli
  npmを用いてインストールする
  グローバル環境にインストール

%npm install karma-cli -g

• karma
  npmを用いてインストール
  ローカル環境にインストール

%npm install karma

• AngularJs
  bowerを用いてインストール
  ローカル環境にインストール

%bower install angular

以上。