Edited at

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を作成することができました。


事前準備


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も出ます)


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が自動で配置されています。

以上です🙃


注意

今回は使用した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