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)
@@ -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"
}
@@ -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]
@@ -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="/">
@@ -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を配置します。
+ <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を配置します。
<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