[ANGULAR] SETUP FOR LOCAL DEVELOPMENT

https://angular.io/docs/ts/latest/guide/setup.html

ローカル開発のためのセットアップ

早くて効率的な開発のために
the Angular QuickStart seed
をインストールする。


ローカル開発環境へのセットアップ

The QuickStart live-coding 例題は、 an Angular playground.です。それは本物の アプリを開発する場所ではない。自分自身のマシン上で開発するべきである。 

 the QuickStart seed を使うとあなたのマシン上に、早く簡単に新しいプロジェクトのセットアップができる。

(the QuickStart seed は、github　でメンテナンスされている。)

nodeとnpmがインストールされてるか確認しろ。

1.プロジェクトフォルダーを作る。名前はとりあえずquickstartにする。(あとで変更できる。)
2.プロジェクトフォルダーにthe QuickStart seed をclone(gitのcloneコマンド)またはダウンロードする。
3.npmでパッケージsをインストールする
4.サンプルアプリを実行するためにnpm startを実行する

cloneの場合
下記のコマンドを実行する

git clone https://github.com/angular/quickstart.git quickstart

cd quickstart

npm install
npm start
(http://localhost:3000/確認できる)

ダウンロードの場合　省略

the QuickStart seedの中身は?

the QuickStart seedは、the QuickStart Playgroundと同じアプリを含んでいる。
ほかにもいろいろなファイルがプロジェクトフォルダー内にある。
それらは、後でlearn about later.

/appFocusフォルダー内の三つのタイプスクリプト(.ts) ファイルに注目する

app

app.component.ts

app.module.ts

main.ts

全てのガイドやクックブックは、これらの三つのコアファイルsを必ず持っている。
それぞれのファイルは、個別の目的がある。アプリの成長に合わせて個別に拡張されていく。

File	Purpose
app.component.ts	the QuickStart playgroundにあるのと同じAppComponentの定義。 rootcomponent 拡張されるすべてのアプリの木構造の根元になる。
app.module.ts	ルートモジュールとなるAppModuleの定義。Angularにアプリケーションの組み立て方を指示する。インストール直後は、 the AppComponentだけを宣言している。そのうちにに多くの components を宣言するだろう。
main.ts	main.tsは、JiT(Just in Time) compiler でアプリをコンパイルし、プラウザで動作するようにアプリをbootstraps する. ほとんどのプロジェクトでmain.tsが適切な選択であり、Plunkerのようなライブコーディング 環境では、これしか選べない。別のコンパイルとデプロイ方法は、後ほど、このドギュメントで 紹介する。

次の一歩　
　Angular初心者ならこのまま learning pathを進むことを勧める

付録　node と npm

Angularや他のプラットフォームでのweb開発にとって、nodeとnpmは、必須だ。nodeは、クライアント開発やツールの作成ができる。nodeのアプリであるthe npmパッケージマネージャーは、javascriptのライブラリをインストールする。

Get them now　マシンに入ってないならすぐに手に入れろ

バージョンを確認しろ　node はv4.x.x かそれ以上　npm は、3.x.x かそれ以上

コマンドをターミナル/コンソール　ウインドーから入力しろ。node -v  と　npm -v　古いバージョンはエラーを起こす。

いろんなバージョンのnode,npmを使う場合は、nvmを使うことをすすめる。

(個人的には、virtualboxやbitnamiのmeanやrubyなどを使うことを勧める。とくにbitnamiのスタックは、git,Devkitなんかも一緒にインストールしてくれるし、マシンの環境をほとんど汚さない)

付録　なぜローカルで開発するのか

ブラウザからLive codingを使いAngularを探検するのは素晴らしい。

ほとんどのドキュメントが完全なサンプルにリンクしているてブラウザー上で使える。theサンプルコードを動作させて、修正を友人と共有し、ダウンロードすることができる。

The QuickStartは、the AppComponentファイルだけを表示している。読者に余計な気を使わさないためにapp.module.ts と main.tsは、同じようなものが内部的に作られている。ほかのサンプルもthe QuickStartに基づいている。

• plunkerではアプリを公開できない
• オンラインでないとコーディングできない
• ブラウザー上でのTypeScriptのコンパイルは遅い
• ローカルのIDEみたいにコード補完やリファクタリンクがてきない。

 the live codingは遊び場、ドキュメントサンプルを動かし実験することに使ってくれ。file a documentation issue やfile an issue with Angular itselfするときに、バグを再現 させる場所としては完璧。

本物の開発はローカル環境で行ってくれ。