Angular Material 2の導入の備忘録

バージョン(2016.12.10現在)

Angular 2.2
@angular/material@2.0.0-alpha.11-3

公式ページ
Angular Material 2

下記の手順は、公式ページを実際にフォローした際に採った手順の抜粋です

導入手順

インストールなど（公式ページどおり）

Angular CLIをインストールします。

console

npm install -g angular-cli

これで、ngコマンドが使えるようになります。

続いて、今回の開発プロジェクトのルートフォルダを作成します。

console

ng new my-project

最後に、ルートフォルダに移動して、プロジェクトにangular materialをインストール

console

npm install --save @angular/material

Angular Material 2のスタイルの作成

srcフォルダ内のstyles.cssに、ベースのprebuiltスタイルをインポートしておきます。

styles.css

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

＃アイコンはなんとなくインポートしています

開発プロジェクト専用のSassファイルをsrcフォルダ内に作成します。（内容は公式ページどおりです）

myapp-theme.scss

@import '~@angular/material/core/theming/all-theme';
@include md-core();
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
$candy-app-warn:    md-palette($md-red);
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

＃色は、好きな色を選択します。
（参考）md-light-themeは、コアに存在する関数です。

node_modules/@angular/material/core/theming/prebuilt/_theming.scss

// Creates a container object for a light theme to be given to individual component theme mixins.
@function md-light-theme($primary, $accent, $warn: md-palette($md-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $md-light-theme-foreground,
    background: $md-light-theme-background,
  );
}

作った専用Sassファイルをangular-cliでコンパイルできるように設定ファイル（angular-cli.json）にファイル名を追加します。

angular-cli.json

      "styles": [
        "styles.css",
        "myapp-theme.scss"
      ],

関連ファイル/フォルダ構成

angular-cli.json … 追記
src/styles.css … 追記
src/myapp-theme.scss … 新規作成

（おまけ）
その他、component/serviceを入れていくフォルダをngコマンドで作成していきます。

コンポーネント

console

ng generate component xxxx

src/component/xxxx.component.css（※必要に応じてscssに変える。後述）
src/component/xxxx.component.html
src/component/xxxx.component.ts
src/component/xxxx.component.spec.ts

サービス

console

ng generate service xxxx

src/shared/xxxx.ts
src/shared/xxxx.spec.ts

xxxx.component.scssを作成した場合

『myapp-theme.scss』のときと同じようにangular-cli.jsonに追加して、cliからコンパイルが実行されるようにします。

angular-cli.json

      "styles": [
        "styles.css",
        "myapp-theme.scss",
        "app/xxx/xxxx.component.scss"
      ],

導入手順（2017.1.22追記）

HammerJSを追加する

本設定でWebアプリケーションを作成すると、Web consoleに警告メッセージ「Could not find HammerJS. Certain Angular Material components may not work correctly.」が表示されることがあります。

この場合、手動でHammerJSをインストールしてください。

console

npm install --save hammerjs

angular-cli.jsonにも追記します。

angular-cli.json

      "scripts": [
        "../node_modules/hammerjs/hammer.min.js"
      ],

これで警告メッセージが表示されなくなります。

こちらのページを参考にしました。

（終わり）