使用 Angular CLI 6.0.0 中的 ng add 和 Schematics，可以轻松设置 Angular Material
我尝试使用Angular CLI v6中新增的ng add命令和Angular Material的Schematics来进行Angular Material的设置。包括创建Angular项目，仅需使用几个命令和几行代码就能创建出如下的仪表盘UI。
事前准备
安装Angular CLI
我們將安裝最新版本的AngularCLI軟體，截至2018/04/22，最新版本是6.0.0-rc.5，但是發現以下問題導致ng add無法正常運作。因此這次我們將使用6.0.0-rc.4版本。
$ 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命令进行Angular Material的设置
终于，我将使用ng add命令来处理本题。
按照ng add 的格式，在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工具创建类似仪表盘风格的用户界面
据目前（2018/04/22）来看，Angular Material的Schematics除了导航组件外，似乎还包括以下组件。
-
- 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)
将创建的仪表板放置。
<main-nav></main-nav>
+ <dashboard></dashboard>
以下是一个示例，多个mat-card被自动放置。
以上就是?
请留意
建议在使用Angular和AngularMaterial时注意，因为它们目前仍处于RC阶段，可能会有规格变更的可能性。建议在实际使用时查阅官方文档以获得最新信息。
如果只需要一个选项，那么请参考以下中文释义：参考
https://github.com/angular/angular-cli/wiki/add – Angular CLI的添加页面。
https://github.com/angular/angular-cli/releases/tag/v6.0.0-beta.5 – Angular CLI的v6.0.0-beta.5版本发布页面。
https://qiita.com/puku0x/items/1024af7860588caafcc6 – 有关Angular CLI的qiita页面。
