テックブログ

  1. Angular
  2. 1069 view

【超簡単】Angular6 でAngularMaterialを導入する方法【チュートリアル】

はじめに

Angularが6にバージョンアップされた事によって、簡単にAngularMaterialを利用する事が可能になったので、AngularMaterialを導入する方法をまとめました。
このチュートリアルをやり終えたら、6で追加された新機能ng addに関してもざっくりと把握する事が出来ます。

初学者でも出来るようになっているので、そういった方にもAngularの凄さを体感して頂けると幸いです。

AngularMaterialとは?

AngularでMaterialUIを使用出来るようにするためのツールで、ハイクオリティーなUIを簡単に実現する事が出来ます。
googleが提供している事でも有名です。

以前は導入に当たってhttps://material.angular.io/guide/getting-started
の手順を踏む必要があったのですが、ver6へのアップデートでその手順が不要となりさらにAngular Material Starter Componentsにより一気にトップ、簡単にはじめる事が可能となりました。

どんな画面が出来るの?

画像で紹介します。

Material Sidenav

ブレイクポイントに基づきレスポンシブ対応もされています。

Material Dashboard

Material Data Table

作業の流れ

  1. AngularCLIを最新に
  2. scss対応のアプリケーションを作成
  3. アプリケーションをサーブする
  4. Angular MaterialとCDKのインストール
  5. 新機能ng addを利用してセットアップ
  6. ついでにアプリケーションをpwa化
  7. スターターコンポーネントの生成
  8. 表示の確認my-nav
  9. テーマの読み込み
  10. 表示の確認my-dashboard my-table

早速作業していきましょう(完成まで後10分)

AngularCLIを最新の物にする

ターミナルもしくは、コマンドプロンプトに移動して

グローバルでCLIをアンインストール

$ npm uninstall -g angular-cli

グローバルでCLIをインストール

$ npm install -g @angular/[email protected]

scss対応のアプリケーションを作成


$ ng new project-name --style=scss

※拡張性を考慮して一応scssにしています。

アプリケーションをサーブする

プロジェクトディレクトリに移動後


$ ng serve --open

Angular MaterialとCDKのインストール


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

新機能ng addを利用してセットアップ

ng add @angular/material

Angular Materialとテーマのインストールとセットアップを行い、新しいスターターコンポーネントをng generateに登録

ng addとは

CLIのコマンドng add は、皆さんのプロジェクトに新しい機能を追加するのを容易にします。ng addは、プロジェクトのパッケージマネージャを使って、新しい依存関係をダウンロードし、(schematicとして実装された)インストール用のスクリプトを実行します。このスクリプトは、設定の変更と共にプロジェクトをアップデートすること、追加された依存関係(polyfillなど)を追加すること、さらにパッケージ固有の初期化コードをscaffoldすることができます。

ついでにアプリケーションをpwa化

ng add @angular/pwa

今更聞けないPWAとAMP

スターターコンポーネントの生成

まとめ3つ作ってしまいましょう。

ng generate @angular/material:material-nav --name=my-nav
ng generate @angular/material:material-dashboard --name=my-dashboard
ng generate @angular/material:material-table --name=my-table

ng generateにより、my-nav、my-dashboard、my-tableという3つのコンポーネントが作成されました。

表示の確認

src/app/app.component.htmlに移動して記述されている内容を全て削除して


を貼り付けてみてください。
地味な画面が出てきたと思います。
実はこれは、angularmaterialのテーマを読み込んでいないからなのです。
テーマは自分で作成する事も出来ますが、今回は予め用意されているものを利用しましょう。

テーマの読み込み

src/app/styles.cssに移動して

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

を追加してください。
美しいテンプレートが表示され、優れたui,ux。
レスポンシブ対応が行われている事が確認出来るはずです。

他のコンポーネントの表示確認

src/app/app.component.htmlの中に記述する要素を



等にすれば確認をする事が可能です。

お疲れ様でした

Angular6のAngular Material Starter Componentsを使用する事によって、素晴らしいスタートダッシュを決められるという事が分かったのではないでしょうか?

ここだけの話なのですが、Angular6では、他にもng updateなどの便利な機能が追加されました。
Angular6について詳しく知りたい人は
Angular 6リリースノート – Angular公式ブログ日本語訳
を見たり、
AngularMaterialについてもっと知りたい人は
AngularMaterial 公式
を見たり、
Angularに興味を持った人は
Angular 公式チュートリアル
をやるといいと思います。

Angular7へのアップデートでAngularMaterial(cdk)は更に強化されました。
以下の記事でAngular7でのアップデート内容をざっくりとまとめています。

The following two tabs change content below.

zoe

1994年、京都生まれ。麻布高校卒業後、2年間FPSのクランマスターとして活躍し、駒澤大学の経営学部に進学 → 中退→ とんかつ屋→ WINDII→ Sier→ ベンチャー→ WINDII

Angularの最近記事

  1. Electronでデスクトップアプリを作る【Angular7】

  2. AngularMaterialのdialog使い方

  3. htmlをpdfに変換する 【Angular7】

  4. Angular7アップデート内容まとめ【ドラッグ&ドロップ実装】

  5. 【超高機能】Angular6でFroala WYSIWYG Editorを導入する方法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。