本教程将向您展示如何使用Angular Material构建漂亮的登录和注册UI。 我们将研究各种材料设计组件，以及如何将它们用于实现具有专业外观的应用程序。 本教程的完整代码可以在我们的GitHub存储库中找到。

入门

我们将从创建Angular应用程序开始。 希望您已经在工作环境中安装了Node.js和Angular CLI。

使用以下命令创建新的Angular应用。

# create a new Angular project under the name responsive-angular-material
ng new registration-login-angular-material

此命令创建引导Angular应用程序所需的所有文件。 下一步将是在应用程序中添加Angular Material。

cd responsive-angular-material/#install angular material 
ng add @angular/material

使用Angular CLI创建组件

Angular中的组件是应用程序的构建块。 尽管您可以手动创建组件，但是Angular CLI使得自动生成包含所有必需的入门代码的组件非常容易。 要在Angular CLI中生成组件，只需运行以下命令：

# MyComponent is the name of your component
ng g component MyComponent

我们的应用程序将包含以下组件：

• Registration组件
• Login组件

现在让我们生成这些组件。

#registration component
ng g component RegistrationComponent#login component
ng g component LoginComponent

添加主题

Angular Material的美丽之处在于它带有预构建的主题，因此您只需将一些简单的代码片段插入应用程序即可轻松引导应用程序的外观。 要添加主题，只需将其导入style.css。

/*style.css*/
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

建立使用者介面

我们希望我们的UI具有导航栏，其中包含用于注册和登录的链接。 因此，我们将创建一个带有两个链接到应用程序组件的按钮的导航栏。

要创建工具栏和按钮，请分别使用<mat-toolbar>和<mat-button>组件。

继续并在src / app / app.component.html中添加UIHTML代码。 注意，我们还添加了到路线的链接。

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary"><mat-toolbar-row><!--  <span>HOME</span> --><span><a href="/">HOME</a></span><span class="spacer"></span><a mat-button routerLink="/register">Register</a><a mat-button routerLink="/login">Login</a></mat-toolbar-row>
</mat-toolbar>

接下来，我们将向我们的UI添加一些样式。 打开app.component.css并添加以下CSS样式。

.spacer {flex: 1 1 auto;
}

导入角材料零部件

您还需要从@angular/material导入模块。 您可以选择从主模块导入它们，也可以创建一个单独的模块，其中包含所有材料设计模块。 由于在创建UI的其余部分时我们将使用许多这些模块，因此我们将为所有组件创建一个单独的模块。 继续并创建一个新文件src / app / material.module.ts 。

如下所示，在文件中添加<mat-toolbar> ， </mat-toolbar-row>和<mat-button>组件的模块。

import { NgModule } from  '@angular/core';import {MatButtonModule,MatToolbarModule} from  '@angular/material';@NgModule({
imports: [MatButtonModule,MatToolbarModule],
exports: [MatButtonModule,MatToolbarModule],})export  class  MyMaterialModule { }

然后，从代码中的其他组件开始，我们只需要包括刚创建的模块app / app.module.ts，如下所示。

// app/app.module.ts
import { MyMaterialModule } from  './material.module';@NgModule({imports: [BrowserModule,BrowserAnimationsModule,MyMaterialModule,],
})

发出ng serve命令来测试您的应用程序，您将看到一个带有“ 注册”和“ 登录”链接的漂亮导航区域。

启用路由

路由使用户可以在不同页面之间导航。 为了在我们的应用程序中启用路由，我们将首先定义路由配置。 为此，将以下代码添加到app.module.ts中。

import { RouterModule, Routes } from '@angular/router';imports: [BrowserModule,BrowserAnimationsModule,MyMaterialModule,RouterModule.forRoot([{ path: '', redirectTo: '/', pathMatch: 'full' },{ path: 'register', component: RegistrationComponentComponent },{ path: 'login', component: LoginComponentComponent },]),],

下一步将添加<router-outlet></router-outlet>元素，该元素使Angular Router能够知道将路由组件放置在何处。 app.component.html文件现在应如下所示：

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary"><mat-toolbar-row><!--  <span>HOME</span> --><span><a href="/">HOME</a></span><span class="spacer"></span><a  mat-button  routerLink="/register">Register</a><a  mat-button  routerLink="/login">Login</a></mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>

我们已经放置了路由器插座，以便组件可以在导航栏下方呈现。

注册用户界面

在本节中，我们将主要使用布局和表单控制组件。 该用户界面将展示以下材料设计组件：

• 卡片组件（ <mat-card> ）-在单个主题的上下文中用于文本，照片和动作的内容容器
• 标签组件（ <mat-label> ）-用于为表单字段指定标签
• 输入组件（ <input matInput> ）-指定输入字段
• 表单字段组件（ <mat-form-field> ）-包装多个Angular组件以形成一个表单字段
• 复选框组件（ <mat-checkbox> ）-具有增强的Material Design样式的本机复选框
• 日期选择器组件（ <mat-datepicker> ）-增强的日期选择器

但首先，让我们将它们导入src / app / material.ts中 。

import { NgModule } from  '@angular/core';
import {MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatRadioModule,MatListModule,} from  '@angular/material';
import {MatDatepickerModule} from  '@angular/material/datepicker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';@NgModule({
imports: [MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule,FormsModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],exports: [MatNativeDateModule,FormsModule,
MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],})export  class  MyMaterialModule { }

我们将从<mat-card> ，它将包含注册UI中的所有内容。 打开registration-component.component.html并添加以下代码。

<mat-toolbar><span>Registration</span>
</mat-toolbar>
<mat-card class="my-card"><mat-card-content><!-- CONTENT HERE --></mat-card-content><mat-card-actions><!-- REGISTER BUTTON --></mat-card-actions>
</mat-card>

接下来，我们将在内容部分内添加一个HTML表单，其中将包含我们所有的表单字段。

<mat-toolbar><span>Registration</span>
</mat-toolbar>
<mat-card class="my-card"><mat-card-content><form class="my-form"><!--FORM FIELDS HERE--></form></mat-card-content><mat-card-actions><!--REGISTER BUTTON HERE--></mat-card-actions>
</mat-card>

接下来，我们将为名字，姓氏，地址，电子邮件和密码添加表单字段。 我们将使用<mat-label>创建标签，并使用<input matInput />创建输入字段。

<mat-card-content><form class="my-form"><mat-form-field class="full-width"><mat-label>First Name</mat-label><input  matInput  placeholder="First name"  name="fname"  required></mat-form-field><mat-form-field class="full-width"><mat-label>Last Name</mat-label><input  matInput  placeholder="Last Name" name="lname"  required></mat-form-field><mat-form-field class="full-width"><mat-label>Address</mat-label><input  matInput  placeholder="Address" name="address"  required></mat-form-field><mat-form-field class="full-width"><mat-label>Email</mat-label><input  matInput  placeholder="Email" name="email"></mat-form-field><mat-form-field class="full-width"><mat-label>Password</mat-label><input  matInput  placeholder="Password"  name="password"></mat-form-field></form>
</mat-card-content>

接下来，我们将为性别添加一个复选框，并为出生日期添加一个日期选择器。 我们将使用具有增强的Material Design样式和动画的<mat-checkbox>和<mat-datepicker> 。

<section class="example-section"><label class="example-margin">Gender:</label><mat-radio-group [(ngModel)]="gender"><mat-radio-button class="example-margin" value="after">Male</mat-radio-button><mat-radio-button class="example-margin" value="before">Female</mat-radio-button><mat-radio-button class="example-margin" value="before">Other</mat-radio-button></mat-radio-group></section><mat-form-field><mat-label>Date of Birth</mat-label><input matInput [matDatepicker]="picker" placeholder="Choose a date"><mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker>
</mat-form-field>

最后一位是</mat-card-content>之后的按钮，用于提交用户信息。

<mat-card-content><form class="my-form"><!--FORM FIELDS--> </form>
</mat-card-content>
<mat-card-actions><button mat-raised-button (click)="register()" color="primary">REGISTER</button>
</mat-card-actions>

表格样式

让我们在表单上添加一些样式，以使其更具表现力。 打开create-account.component.css并添加以下CSS样式。

.my-form{min-width: 150px;max-width: 500px;width: 100%;
}.full-width {width: 100%;
}

注册用户界面如下所示：

为登录组件构建UI

登录界面将包含以下组件：

• 卡片组件（ <mat-card> ）-在单个主题的上下文中用于文本，照片和动作的内容容器
• 输入组件（ <input matInput> ）-指定输入字段

就像我们为注册UI所做的一样，我们将具有一个材料卡组件来容纳登录表单。

显示登录页面HTML代码，其中包含两个用于输入电子邮件和密码凭据的输入。

<mat-toolbar><span>LOGIN</span>
</mat-toolbar>
<mat-card class="my-card"><mat-card-content><form class="my-form"><mat-form-field class="full-width"><mat-label>Email</mat-label><input  matInput  placeholder="Email" name="email"></mat-form-field><mat-form-field class="full-width"><mat-label>Password</mat-label><input  matInput  placeholder="Password" name="password"></mat-form-field></form></mat-card-content><mat-card-actions><button mat-raised-button (click)="login()" color="primary">LOGIN</button></mat-card-actions>
</mat-card>

完成的用户界面如下所示：

结论

本教程介绍了制作完整的UI所需的大多数Angular Material组件。 如您所见，由于所有组件都有预定义的样式，因此Angular Material非常易于使用。 这意味着您可以快速构建漂亮的UI。 另外， Angular Material文档提供了很多示例，并且易于遵循。

翻译自: https://code.tutsplus.com/tutorials/how-to-build-a-login-and-registration-ui-with-angular-and-material-design--cms-31794