如何快速引入Angular Material以实现材料设计

12 月 ago

宇, 华

2 minutes

概述

使用Angular CLI，在Angular Web应用程序中快速引入Material Design的备忘录，使用名为”Angular Material”的设计包专门为Angular开发设计。

设定/条件

这是截至2019年1月1日的信息。此外，以下是基于以下环境的假设。

npm： 6.4.1

引入

可以使用以下的Angular CLI命令安装软件包。
暂时，在应用的根目录下执行即可。

ng add @angular/material

在安装过程中，由于可以进行交互式的引导，所以大家可以根据自己的选择进行安装。顺便提一下，我自己的回答如下所示。

ブラウザアニメーション入れる？： Yes (入れる)

这样一来，angular.json 文件中的导入描述等等应该会被自动处理。

组件修复

首先，我们要把主页设计得更像是”非常符合材质设计”的感觉。

修正Appシェル（可省略）

如果您已经在Universal中使用AppShell，按照以下步骤修改每个文件。如果您没有使用（或者对此一无所知的人），请跳过此步骤。

因为在First Contentful Paint状态下，将屏幕设置为随便旋转的加载界面。

<div class="app-shell">
  <mat-spinner></mat-spinner>
</div>

.app-shell {
  display: flex;
  justify-content: center;
  align-items: center;
}

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; // 追加

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { Routes, RouterModule } from '@angular/router';
import { AppShellComponent } from './app-shell/app-shell.component';

const routes: Routes = [ { path: 'shell', component: AppShellComponent }];

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    RouterModule.forRoot(routes),
    MatProgressSpinnerModule // 追加
  ],
  bootstrap: [AppComponent],
  declarations: [AppShellComponent],
})
export class AppServerModule {}

修改顶层组件

修正以下内容：
对于顶层组件的每个文件进行修改。
本次仅创建了标题栏，并注入了Material Design风格。

在中文中，主要内容的部分由来表示，因此在这里不需要设计。

<header>
  <mat-toolbar color="primary">
    <span>Demo App</span>
    <span class="spacer"></span>
    <mat-icon>home</mat-icon>
  </mat-toolbar>
</header>
<main>
  <h1>Welcome to {{ title }}!</h1>
  <router-outlet></router-outlet>
</main>
<footer></footer>

.spacer { flex: 1 1 auto }

.icon {
  display: flex;
  padding: 4px;
}

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Angular Material　導入時に回答次第で自動追加
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ServiceWorkerModule } from '@angular/service-worker'; // PWA 対応（無くても良い）
import { MatToolbarModule } from '@angular/material/toolbar'; // 追加
import { MatIconModule } from '@angular/material/icon'; // 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment'; // PWA 対応（無くても良い）

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserAnimationsModule,
    RouterModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), // PWA 対応（無くても良い）
    MatToolbarModule, // 追加
    MatIconModule, // 追加
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

到此为止，Material Design 的简单介绍就完成了。

确认

打开应用程序，尝试在网络浏览器中访问，结果如下所示。

只需要根据官方文档，在每个组件中导入所需的模块，然后继续创建主要内容。

以上，材料设计的引入已经完成。