Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@daikiojm

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

More than 3 years have passed since last update.

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パッケージをインストールする。

ここでは、公式 の手順に従ってCDKも同時にインストールする。

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

angular/animationsのインストール

追加のAngularモジュールをインストール。

@angular/animationsはMaterialの幾つかのトランジション効果を実現するために必要らしい。

npm install --save @angular/animations
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も記述する必要があります。

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にベーススタイルをインポートすることでプロジェクト全体にテーマを適用することができます。

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
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 { }

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

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

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を次のように変更

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>
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

以上です。

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
daikiojm
https://daikiojm.me/

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?