#5min Angular QuickStart

無論参考にするのはAngular公式サイトでございます。

#Buid this app!
・前提条件：node js のインストール
・Step1:アプリケーションのプロジェクトフォルダーを作成し、パッケージの依存関係を定義してスペシャルプロジェクトのセットアップをしよう
・Step2:Angular アプリケーションのroot component を作ろう
・Step3:Angular Moduleを作成しよう
・Step4:Angularにroot component を定義するmain.tsを追加しよう
・Step5:アプリケーションをホストするindex.htmlを追加しよう。
・Step6:アプリケーションを構築し、実行しよう
・アプリケーションに変化を加えよう
・要約

#Step1:Create the app's project folder
##目次
この章では
(a) プロジェクトフォルダーの作成
(b) パッケージ定義とファイルの配置をしよう
(c) パッケージをインストールしよう

##Step1-a.Create the project folder
　quick startにはありませんが、Deck topの直下にangular2-quickstart(angularjsのアプリケーションのファイル)を作っていきます。

$ pwd 
/Users/{ USER 名}/Desktop/
$ mkdir angular2-quickstart
$ cd angular2-quickstart
$ pwd
/Users/{ USER 名}/Desktop/angular2-quickstart

###おそらく使うコマンド

コマンド	コマンドの役割
pwd	print working directory: 現在のworkingディレクトリを絶対パスで表示
mkdir { ディレクトリ名}	make directory : { ディレクトリ名 }を作成
cd { ディレクトリ名 }	change directory : 現状のディレクトリを{ディレクトリ名}に移動します。

##Step1-b.Add package definintion and configuration files
###パッケージの追加
ターミナルを開いて以下のファイルをangularjsのファイルを追加していきます。

$ pwd 
/Users/{ user名 }/Desktop/angular2-quickstart
$ touch package.json
$ ls 
package.json
$ touch tsconfig.json
$ touch typings.json
$ touch systemjs.config.js
$ ls
package.json		tsconfig.json
systemjs.config.js	typings.json

ファイルの説明は以下に記載していきます。
###おそらく使うコマンド

コマンド	コマンドの役割
ls	list:ファイルの一覧を表示するコマンド
touch { file名 }	:{file 名}のタイムスタンプを変更または、空のファイルを作成します。

###追加したファイルの説明
パッケージの定義とfile定義に従ってプロジェクトフォルダに追加します。

追加するパッケージ名	パッケージの説明
package.json	quick startの依存関係といくつかの有益なscriptを定義しているパッケージリストです。詳しくはNpm Package Configurationをご確認ください。
tsconfig.json	tsconfig.jsonはtypeScriptのコンパイラーファイルです。詳しくはTypeScript Confingrationをご確認ください。
typings.json	TypeScriptの定義ファイルを定義します。詳しくはTypeScript Configrationをご確認ください。
systemjs.config.js	JSのシステム定義ファイルです。

###追加したファイルの中身
作成したファイルに以下の中身を追加していきます。

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

##1-c.Install packages
npmコマンドを使ってpackage.jsonのパッケージリストをインストールしていきます。
ターミナルのウィンドウで以下のコマンドを入力しきます。

$ pwd
/Users/{ user名 }/Desktop/angular2-quickstart
$ npm install

npm installのあとにtypingsフォルダーは開くことができません。もし確認がしたい場合は、マニュアル通りにこれらをインストールしてください。
$ npm run typings install
インストールの間に赤文字の警告的エラーメッセージが表示された場合。インストールは慣例的に警告が表示されたエラーからリカバリーし、正常にインストールができます
###npm error and warnings
npm installの最初から最後までnpm errorとコンソールに表示がなく、全てが正常にうまくいった場合。
npm WARNメッセージが途中でいくつかでてきますが、インストールは完了しています。
いくつかgyp ERR!メッセージがでた後に、npm WARNメッセージが表示されることがあります。
それらを無視してもかまいません。
node-gypを使ってパッケージは再びコンパイルを試します。
再度やったコンパイルが失敗したら、パッケージはリカバーを始め、全てが正常に動作します。
npm installの最後までにnpm ERR!がでなかった場合に限ります。

###npmに必要なパッケージとライブラリを追加します。
Angularアプリケーションの開発は、ライブラリとパッケージはアプリケーションが必要としています。npm package managerに依存しています。
Angularの開発チームは依存関係と開発環境の依存関係のセクションの中のパッケージのスタートセットを推奨しています。
詳細はnpm packagesをみてください。

###つかえるScript
common development taskを実行するために私たちの提案しているpackage.jsonの中にいくつかのnpm scriptsが含まれています。

package.json

{
"scripts": {
"start": "tsc && concurrently "npm run tsc:w" "npm run lite" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
}
}

多くのnpm scriptは以下の方法に従って実行します。
script nameによってnpm runは従っています。

いくつかのコマンド(startのような)はrunキーワードを必要としいません。
###いくつかのscriptが何をするか。
・npm start:コンパイラとサーバを同時に実行します。どちらも"watch mode"で実行します。
・npm run tsc:TypeScriptコンパイラを一度実行します。
・npm run tsc:w:watch modeでタイプスクリプトコンパイラを実行します。"watch mode":プロセスは実行を続けます。監視中にType Scriptの変更をまち、変更とコンパイルを実行します。
・``npm run lite:lite-serverを実行します。軽量な静的なファイルサーバーをAngular アプリケーションがルーティングで使うサポートにとってとても素晴らしい。・ npm run typings```:typings toolを実行します。
・```npm run postinstall```:npmにより自動的にコールされ、パッケージを正常にインストールします。このScriptは```typing.json```の中で定義されているTypeScript definition filesをインストールします。

これでセットアップおわりました。
コードを書きはじめましょう。