Anguar 5 minitues start with TypeScriptを簡単に和訳して実行してみる(2)。

#5min Angular QuickStart
![One framework.   Angular 2.png](https://qiita-image-store.s3.amazonaws.com/0/124054/8ff90f13-a599-eb83-5922-44246ee721e0.png)

無論参考にするのは<a href="https://angular.io/docs/ts/latest/quickstart.html">Angular公式サイト</a>でございます。


#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のアプリケーションのファイル)を作っていきます。
	
```terminal
$ 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*のファイルを追加していきます。

```terminal
$ 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を定義しているパッケージリストです。詳しくは<a href="https://angular.io/docs/ts/latest/guide/npm-packages.html">Npm Package Configuration</a>をご確認ください。  |
| tsconfig.json  | tsconfig.jsonはtypeScriptのコンパイラーファイルです。詳しくは<a href="https://angular.io/docs/ts/latest/guide/typescript-configuration.html#tsconfig">TypeScript Confingration</a>をご確認ください。  |
| typings.json  | TypeScriptの定義ファイルを定義します。詳しくは<a href="https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings">TypeScript Configration</a>をご確認ください。  |
| 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```のパッケージリストをインストールしていきます。
ターミナルのウィンドウで以下のコマンドを入力しきます。

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

```
>`npm install`のあとにtypingsフォルダーは開くことができません。もし確認がしたい場合は、マニュアル通りにこれらをインストールしてください。
>```terminal
>$ 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の開発チームは依存関係と開発環境の依存関係のセクションの中のパッケージのスタートセットを推奨しています。
>詳細は<a href="https://angular.io/docs/ts/latest/guide/npm-packages.html">npm packages</a>をみてください。

>###つかえる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をインストールします。

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