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
Help us understand the problem. What is going on with this article?

Angular CLI 6.0.0のng addとSchematicsを使ってAngularMaterialを簡単セットアップ

More than 1 year has passed since last update.

Angular CLI v6で追加されるng addコマンドとAngular MaterialのSchematicsを使ってAngular Materialのセットアップを行ってみました。
Angularプロジェクトの作成を含め、たった数コマンドと数行のコードで次のようなダッシュボードUIを作成することができました。

スクリーンショット 2018-04-22 19.23.01.png

事前準備

Angular CLIのインストール

現在最新RC版のAngularCLIをインストールします。
2018/04/22 時点の最新版は、6.0.0-rc.5でしたが、以下のバグがありng addが正常に動かないようです。今回は、6.0.0-rc.4を使用して進めました。
https://github.com/angular/angular-cli/issues/10381

$ ng npm i -g @angular/cli@6.0.0-rc.4

インストールされたバージョンは次の通り。

$ ng -v                                                                                                                                      

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0-rc.4
Node: 8.11.1
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.5.6
@angular-devkit/core         0.5.6
@angular-devkit/schematics   0.5.6
@ngtools/json-schema         1.1.0
@schematics/angular          0.5.6
@schematics/update           0.5.6
rxjs                         6.0.0-uncanny-rc.7
typescript                   2.7.2

プロジェクトの作成

ng newで事前にプロジェクトを作成しておきます。

$ ng new v6-add-demo

Angular Material & CDKのインストール

ng addコマンドを使用する際も、事前にパッケージをインストールしておく必要があります。

$ npm i --save @angular/material@next @angular/cdk@next

今回はmaterial、CDKともにv6.0.0-rc.12を使用しました。

ng addでAngularMaterialのセットアップ

いよいよ、本題のng addコマンドを使ってみます。
ng add <package>の形で、Angularプロジェクトに追加するパッケージを指定すると、Schematicsの機能で必要なインポートやテンプレートの展開などが行われます。(追加する側のパッケージもSchematics対応されている必要あり)

$ ng add @angular/material

実行すると、以下のようにファイルが更新されています。

実行結果
Installing packages for tooling via npm.
UPDATE package.json (1477 bytes)
UPDATE angular.json (4134 bytes)
UPDATE src/app/app.module.ts (423 bytes)
UPDATE src/index.html (473 bytes)
UPDATE src/styles.css (101 bytes)
angular.json
@@ -29,6 +29,9 @@
               }
             ],
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               {
                 "input": "src/styles.css"
               }
@@ -80,6 +83,9 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               {
                 "input": "styles.css"
               }
app/app.module.ts
@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
index.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <meta charset="utf-8">
   <title>V6AddDemoMaterial</title>
   <base href="/">
style.css
@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+
+body { margin: 0; }

Schematicsでナビゲーションを作成

次に、toolbarとsidenavを作成します。

$ ng g @angular/material:materialNav --name=main-nav
実行結果
CREATE src/app/main-nav/main-nav.component.css (110 bytes)
CREATE src/app/main-nav/main-nav.component.html (945 bytes)
CREATE src/app/main-nav/main-nav.component.spec.ts (619 bytes)
CREATE src/app/main-nav/main-nav.component.ts (489 bytes)
UPDATE src/app/app.module.ts (803 bytes)

作成したmain-navを配置します。

app/app.component.html
+ <main-nav></main-nav>

ここまでの状態で、npm startしてlocalhost:4200を確認すると、次のようにtoolbarが追加されていることが確認できます。(左上のメニュークリックでsidenavも出ます)

スクリーンショット 2018-04-22 19.07.25.png

Schematicsでダッシュボード風のUIを作成

Angular MaterialのSchematicsには、現在(2018/04/22)ナビゲーションの他に次のコンポーネントが含まれているようです。

  • materialDashboard
  • materialTable

せっかくなので、materialDashboardも試してみました。

$ ng g @angular/material:materialDashboard --name=dashboard
実行結果
CREATE src/app/dashboard/dashboard.component.css (254 bytes)
CREATE src/app/dashboard/dashboard.component.html (927 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (632 bytes)
CREATE src/app/dashboard/dashboard.component.ts (397 bytes)
UPDATE src/app/app.module.ts (1007 bytes)

作成したdashboardを配置します。

app/app.component.html
<main-nav></main-nav>
+ <dashboard></dashboard>

次のように、複数のmat-cardが自動で配置されています。

スクリーンショット 2018-04-22 19.16.39.png

以上です🙃

注意

今回は使用したAngularおよび、AngularMaterialはまだRCのため、今後仕様が変更になる可能性もあります。実際に使用する際は、その時点での公式ドキュメントを確認することをおすすめします。

参考

https://github.com/angular/angular-cli/wiki/add
https://github.com/angular/angular-cli/releases/tag/v6.0.0-beta.5
https://qiita.com/puku0x/items/1024af7860588caafcc6

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