angular-cliで作成したプロジェクトにangular/materialを適用する

`angular-cli`を使って作成したプロジェクトに`Angular Material`を導入した際に行ったことのメモです。  
この記事の内容を試した際の`angular-cli`のバージョンは、次の通りです。  

>@angular/cli: 1.3.0
>node: 8.1.3
>os: darwin x64

現時点の最新版`angular-cli`では、ビルドツールがSystemJSからWebpackになっているので注意が必要です。  

## 参考にした記事とか

### 公式ドキュメント
Angular Material Getting started  
https://material.angular.io/guide/getting-started

### Qiita記事

Angular CLIによるAngular2入門 / Angular2アプリを爆速開発  
http://qiita.com/kitfactory/items/c95ca84371670b21f4ac

angular-cli + UIフレームワーク Angular2-Material で Angular2 アプリを構築するチュートリアル  
http://qiita.com/kent_ocean/items/cec3af592ede7cd6f040

Angular Material 2の導入の備忘録  
http://qiita.com/shin_hayata/items/9e8f28970012d53be8f1


## サンプル用のプロジェクトを作成

プロジェクト作成

```
ng new angular-material-handson --routing
```

Angularのルーティング機能を使う予定なので、ルーティングモジュールを自動で生成するためのオプション`routing`を付けて実行しています。

## Getting started

公式のGetting startedの手順に従ってAngularMaterialの導入をすすめる

### angular/materialのインストール
npmで`@angular/material`パッケージをインストールする。  
ここでは、[公式](https://material.angular.io/guide/getting-started) の手順に従ってCDKも同時にインストールする。

```
npm install --save @angular/material @angular/cdk
```

### angular/animationsのインストール
追加のAngularモジュールをインストール。  
`@angular/animations`はMaterialの幾つかのトランジション効果を実現するために必要らしい。

```
npm install --save @angular/animations
```

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### Angular Materialコンポーネントのインポート

`MaterialModule`をインポートする。
今回のサンプルでは、app.componentのみを使いますが、他のコンポーネントからも使用する場合は、合わせてexportsも記述する必要があります。

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material'; // 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule // 追加
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### CSSの読み込み
CSSを読み込みます。  
Angular-cliで作成したプロジェクトでは、`src/style.css`にベーススタイルをインポートすることでプロジェクト全体にテーマを適用することができます。

```css:style.css
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; /* 追加 */
```

### hammer.jsのインストール
ジェスチャー対応に必要なパッケージをインストールします。
`hammer.js`はAngularMaterialでスマートフォンやタブレット端末でのタッチジェスチャーに対応するために必要なライブラリです。

```
npm install --save hammerjs
```

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import 'hammerjs'; // 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### マテリアルアイコンのインストール

マテリアルアイコンも追加しておきます。

```html:index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularMaterialHandson</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- 追加 -->
</head>
<body>
  <app-root></app-root>
</body>
</html>
```

## 実際に試してみる
ここまでの手順で一通りのMaterialコンポーネントが使えるようになっています。

### Toolbarを追加する
app.component.html、app.component.cssを次のように変更

```html:app.component.html
<md-toolbar color="primary">
  <span>Toolbar</span>
  <a md-button routerLink=".">Menu</a>
  <a md-button routerLink=".">setting</a>
  <span class="remaining-space"></span>
  <md-icon class="icon">favorite</md-icon>
  <md-icon class="icon">delete</md-icon>
</md-toolbar>

<h1>てすと</h1>

<router-outlet></router-outlet>
```

```css:app.component.css
.icon {
  padding: 0 14px;
}

.remaining-space {
  flex: 1 1 auto;
}
```

`npm start`で開発サーバーを起動し`http://localhost:4200`を確認すると...
次のようにツールバーが表示されます。

![スクリーンショット 2017-08-14 15.02.03.png](https://qiita-image-store.s3.amazonaws.com/0/79414/d8542d73-bc67-55e5-d4da-98d6584a9451.png)


以上です。