Angular2を手軽に始められるangular-cliからUIフレームワークをいれるまで

現在のangular-cliはビルドツールがSystemJSからwebpackになったのでこれから始める方は
[こちら](http://qiita.com/hatappi/items/787cd8e8b0915fc911bf)を見てください

今回はAngular2をはじめる上でベースとなるプロジェクトを作成してくる`angular-cli`と、
UIフレームワークをいれるまでを紹介します。

## **Angular2が動くまで**

### まずは`angular-cli`をインストール

```
npm install -g angular-cli
```

### プロジェクトを作ってみます
typingsが入ってない場合はまず`npm install -g typings`でインストールしておいてください

```
ng new PROJECT_NAME
```
処理が終わった後に

```
ng serve
```

で何もエラーがでなければ、`http://localhost:4200/`で下記のような画面になるはず

<img width="234" alt="スクリーンショット 2016-06-16 23.22.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/44247/21efff4b-107b-f3c5-7f27-a2c48365904c.png">

### これで一旦セットアップ完了！
特に何も手を加えることなくAngular2がさわれる環境ができた！

## **UIフレームワークをいれてみる**
今回SalesforceがリリースしたCSSフレームワークの`Salesforce Lightning Design System(SLDS)`を使用する。
https://github.com/ng-lightning/ng-lightning

### package.json
今回必要な`ng-lightning`とSLDSに必要なcssやiconなどが入ったdesing-systemなどを追加します。

```diff
--- a/package.json
+++ b/package.json
@@ -20,10 +20,13 @@
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router": "3.0.0-alpha.3",
+    "@salesforce-ux/design-system": "^1.0.0",
     "es6-shim": "0.35.1",
+    "ng-lightning": "^0.11.1",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",
+    "tether": "^1.2.0",
     "zone.js": "0.6.12"
   },
   "devDependencies": {
```

### angular-cli-build.js
build時の設定がかかれています。
ここで指定したものがdist配下のvendorの中にビルド時に
おかれます。

```diff
--- a/angular-cli-build.js
+++ b/angular-cli-build.js
@@ -15,7 +15,11 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/**/*.+(ts|js|js.map)',
       'rxjs/**/*.+(js|js.map)',
-      '@angular/**/*.+(js|js.map)'
+      '@angular/**/*.+(js|js.map)',
+      'ng-lightning/**/*',
+      '@salesforce-ux/design-system/assets/**/*',
+      'ts-helpers/**/*',
+      'tether/**/*'
     ]
   });
 };
```

### src/system-config.ts
ng-lightningを使用するためにmapの設定を行います。
ts-helpersなどはng-lightningを使用する際に使用するので一緒にmapに指定してあげます。

```diff
--- a/src/system-config.ts
+++ b/src/system-config.ts
@@ -7,10 +7,17 @@
  **********************************************************************************************/
 /** Map relative paths to URLs. */
 const map: any = {
+  'ng-lightning/ng-lightning': 'vendor/ng-lightning',
+  'ts-helpers': 'vendor/ts-helpers/index.js',
+  'tether': 'vendor/tether/dist/js/tether.js',
 };
 
 /** User packages configuration. */
 const packages: any = {
+  'ng-lightning/ng-lightning': {
+    defaultExtension: 'js',
+    main: 'ng-lightning.js'
+  },
 };
```

#### 後はview部分を設定していきます。

### src/index.html
このファイルはテンプレートファイルとなります。

先ほど`angular-cli-build.js`に`'@salesforce-ux/design-system/assets/**/*',`を追記したので、
dist/vendor配下にディレクトリが出来たと思います。出来ていない場合は`ng build`をするなどしてみてください。
中にstylesheetが入っているので指定してあげます。

```diff
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Hogehoge</title>
   <base href="/">
+  <link rel="stylesheet" href="vendor/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system-ltng.css">
 
   {{#unless environment.production}}
   <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
@@ -11,7 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body class="slds">
   <app-root>Loading...</app-root>
```

### src/main.ts
このファイルがrootのファイルとなります。
svgPathを指定しているのは、デフォルトが`assets/icons`なのですが、今回はvendor配下に
対象のディレクトリがあるので、そちらを指定してあげます。

```diff
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,12 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 import { AppComponent, environment } from './app/';
+import { provideNglConfig } from 'ng-lightning/ng-lightning';
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrap(AppComponent);
-
+bootstrap(AppComponent, [
+  provideNglConfig({'svgPath': 'vendor/@salesforce-ux/design-system/assets/icons'}),
+]);
```

### src/app/app.component.ts
ng-lightningのdirectivesをimportして指定します。

```diff
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { NGL_DIRECTIVES } from 'ng-lightning/ng-lightning';
 
 @Component({
   moduleId: module.id,
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  directives: [NGL_DIRECTIVES]
 })
 export class AppComponent {
   title = 'app works!';
+  selected: boolean = false;
 }
```

### src/app/app.component.html
実際にhtmlに配置してみます

```diff
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,13 @@
 <h1>
   {{title}}
 </h1>
+
+<div class="slds-text-heading--label slds-m-top--x-large slds-m-bottom--small">Stateful</div>
+<button type="button" nglButtonIcon [(nglButtonState)]="selected">
+  <ngl-icon icon="settings"></ngl-icon>
+</button>
+<button type="button" nglButton="neutral" [(nglButtonState)]="selected">
+  <ngl-icon icon="add" state="not-selected">Follow</ngl-icon>
+  <ngl-icon icon="check" state="selected">Following</ngl-icon>
+  <ngl-icon icon="close" state="selected-focus">Unfollow</ngl-icon>
+</button>
```

## 起動
サーバーを立ち上げたら終わりです

```bash
ng serve
```

![tooltip.gif](https://qiita-image-store.s3.amazonaws.com/0/44247/a5104557-91a3-d989-9c33-a76523807f52.gif)

## 最後に
今回はUIフレームワークをいれるところまでやりましたが、[angular-cli](https://github.com/angular/angular-cli)がとにかく便利です。
プロジェクトを作成してくれるだけでなく、github pageのデプロイなどの機能をついています。
Angular2さわってみたいけど、どこからやろうかの人は実際にさわるのでおすすめです。

今回使用したリポジトリは[こちら](https://github.com/hatappi/angular2-lightning)です。
github pageにもデプロイされているので、動作などはこちらからさわってみてください
https://hatappi.github.io/angular2-lightning/