Angular完整项目开发2 - UI库Angular Material的引入

好看的前端界面离不开UI库的支持。几年前搞AngularJS项目时用的是Bootstrap, 效果确实不错，不过最近发现了Angular Material这个库，似乎是为Angular定制的，配合度更好，再看一下版本，已经更新到11.x了，值得一试。

上一篇中，把webapp运行了起来，不过还没放什么UI控件，本篇放几个控件试试。

1. 安装Angular Material

ng add @angular/material

几个提示都选择默认项。

2. 添加一组按钮看看

app.module.ts:

import { MatButtonModule } from '@angular/material/button';
...
imports: [
    ...
    MatButtonModule
],

app.component.html:

<div>
    <button mat-raised-button>Basic</button>&nbsp;
    <button mat-raised-button color="primary">Primary</button>&nbsp;
    <button mat-raised-button color="accent">Accent</button>&nbsp;
    <button mat-raised-button color="warn">Warn</button>&nbsp;
    <button mat-raised-button disabled>Disabled</button>&nbsp;
</div>

效果：

 

3.不过瘾，再添加一个日期选择框

app.module.ts:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

...
imports: [
    ...
    MatDatepickerModule, 
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
],

app.component.html:

<div>
    <mat-form-field appearance="fill">
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</div>

效果：

       

 

微评：

整体效果看着不错，不输Bootstrap，思路上也更像传统的java/C#开发，通过声明来引用控件。

几年前初次接触Angular 2+的时候，感觉非常非常吃力，现在想来，当时还是用了传统前端javascript的思维在学Angular2, 所以思维冲突严重。现在换个了思路，用java/C#开发的视角来看待Angular，感觉舒服多了！

 

参考：https://stackoverflow.com/questions/60548634/matnativedatemodule-matmomentdatemodule-not-found-in-angular-9-1-1