readme

README.md

 > 目前为止Angular版本是11，利用TypeScript的装饰器（Decorators）特性，可以写类似Java Spring Boots面向切面风格的代码。没写过这样代码的人可能会不适应，其实基础好的话稍微看看[官方文档](https://angular.cn/docs)可以马上上手。
 
 #### 项目介绍
-本项目使用脚手架 <font color="#c63">Angular CLI</font> <font color="#693">(version 11.2.12)</font> 构建。UI使用 <font color="#396">NG-ZORRO</font> ([官网](https://ng.ant.design/))，这是 Ant Design 的 Angular 版。
+本项目使用脚手架 <code>Angular CLI</code> <code>(version 11.2.12)</code> 构建。UI使用 <code>NG-ZORRO</code> ([官网](https://ng.ant.design/))，这是 Ant Design 的 Angular 版。
 
-目前只实现纯静态登陆。**用户名:** <font color="#36f">admin</font> **密码:** <font color="#36f">123456</font>
+目前只实现纯静态登陆。**用户名:** <code>admin</code> **密码:** <code>123456</code>
 
 截图：
 
@@ -114,17 +114,17 @@ registerLocaleData(zh);
 })
 export class AppModule { }
 ```
-- 引入路由模块 <font color="#939">AppRoutingModule</font>、登陆模块 <font color="#939">LoginModule</font> 、表单模块 <font color="#939">FormsModule</font> ，并通过 <font color="#693">@NgModule</font> 装饰器的  <font color="#39c">imports</font> 属性导入。
-- <font color="#c66">AppComponent</font> 组件放在 <font color="#693">@NgModule</font> 装饰器的  <font color="#39c">declarations</font> 属性 (可声明对象表) 和  <font color="#39c">bootstrap</font> 属性 (主视图，只有根模块才设置这个属性) 中。
-- 关于 <font color="#693">@NgModule</font> 的使用，参考[官方文档模块部分](https://angular.cn/guide/architecture-modules) 。
+- 引入路由模块 <code>AppRoutingModule</code>、登陆模块 <code>LoginModule</code> 、表单模块 <code>FormsModule</code> ，并通过 <code>@NgModule</code> 装饰器的  <code>imports</code> 属性导入。
+- <code>AppComponent</code> 组件放在 <code>@NgModule</code> 装饰器的  <code>declarations</code> 属性 (可声明对象表) 和  <code>bootstrap</code> 属性 (主视图，只有根模块才设置这个属性) 中。
+- 关于 <code>@NgModule</code> 的使用，参考[官方文档模块部分](https://angular.cn/guide/architecture-modules) 。
 
-<font color="#39c">/src/app/app.component.html</font>
+<code>/src/app/app.component.html</code>
 ```html
 <router-outlet></router-outlet>
 ```
 只有一个路由标签。
 
-<font color="#39c">/src/app/app.routing.module.ts</font>
+<code>/src/app/app.routing.module.ts</code>
 ```typescript
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -144,10 +144,10 @@ const routes: Routes = [
 })
 export class AppRoutingModule { }
 ```
-- 设置路由的文件，项目启动后页面默认重定向到 <font color="#33c">/login</font> 路由。
-- 添加了 <font color="#33c">/home</font> 路由，本实例暂时没用到。
+- 设置路由的文件，项目启动后页面默认重定向到 <code>/login</code> 路由。
+- 添加了 <code>/home</code> 路由，本实例暂时没用到。
 
-<font color="#39c">/src/app/components/ng-zorro-antd.module.ts</font>
+<code>/src/app/components/ng-zorro-antd.module.ts</code>
 ```typescript
 ...
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -162,9 +162,9 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 export class NgZorroAntdModule {}
 ```
 
-- 这个文件从 <font color="#693">ng-zorro-antd</font> 中取得所有组件 <font color="#693">Module</font> 并通过<font color="#693">@NgModule</font> 装饰器的  <font color="#39c">exports</font> 属性导出。
+- 这个文件从 <code>ng-zorro-antd</code> 中取得所有组件 <code>Module</code> 并通过<code>@NgModule</code> 装饰器的  <code>exports</code> 属性导出。
 
-<font color="#39c">/src/app/components/login/login.moudle.ts</font>
+<code>/src/app/components/login/login.moudle.ts</code>
 ```typescript
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -189,12 +189,12 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 })
 export class LoginModule { }
 ```
-- 这里引入了刚才定义的 <font color="#693">ng-zorro-antd</font>  导出的模块 <font color="#939">NgZorroAntdModule</font>，可用在 <font color="#396">html</font> 部分，例如一个普通按钮 <font color="#c96">&lt;button nz-button&gt;按钮&lt;/button&gt;</font> 标签, 增加了 <font color="#396">nz-button</font> 属性，让它在编译之后称为 <font color="#693">ng-zorro-antd</font> 按钮组件。
-- 引入 <font color="#c66">AppComponent</font> 组件。
+- 这里引入了刚才定义的 <code>ng-zorro-antd</code>  导出的模块 <code>NgZorroAntdModule</code>，可用在 <code>html</code> 部分，例如一个普通按钮 <code>&lt;button nz-button&gt;按钮&lt;/button&gt;</code> 标签, 增加了 <code>nz-button</code> 属性，让它在编译之后称为 <code>ng-zorro-antd</code> 按钮组件。
+- 引入 <code>AppComponent</code> 组件。
 - 注意引入表单相关依赖，做表单校验等会用到。
 
-<font color="#39c">/src/app/components/login/login.components.html</font> 
-登陆的 <font color="#396">html</font> 部分只列出表单相关代码。
+<code>/src/app/components/login/login.components.html</code> 
+登陆的 <code>html</code> 部分只列出表单相关代码。
 ```html
 ...
   <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit()">
@@ -290,12 +290,12 @@ export class LoginModule { }
 ...
 ```
 
-- 表单的 <font color="#396">[formGroup]="validateForm"</font> 属性绑定验证对象。
-- 表单的 <font color="#936">(ngSubmit)="onSubmit()"</font> 属性绑定表单提交事件。
-- 输入控件的 <font color="#36c">formControlName</font> 属性绑定对应的控件名。
+- 表单的 <code>[formGroup]="validateForm"</code> 属性绑定验证对象。
+- 表单的 <code>(ngSubmit)="onSubmit()"</code> 属性绑定表单提交事件。
+- 输入控件的 <code>formControlName</code> 属性绑定对应的控件名。
 
 
-<font color="#39c">/src/app/components/login/login.components.ts</font> 
+<code>/src/app/components/login/login.components.ts</code> 
 ```typescript
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -353,12 +353,9 @@ export class LoginComponent implements OnInit {
 }
 ```
 
-- <font color="#c36">ngOnInit()</font> 是组件生命周期的一种，<font color="#c63">Angular</font> 会在首次检查完组件或指令的输入属性后，紧接着调用它。这里的业务逻辑是初始化验证表单的内容。
-- <font color="#96c">onSubmit()</font> 提交表单的逻辑。首先验证实现了 <font color="#9c6">FormGroup</font> 接口的表单。高亮化未通过验证的组件（用户名和密码只做了非空验证）。然后验证是否登陆成功，做对应处理。
+- <code>ngOnInit()</code> 是组件生命周期的一种，<code>Angular</code> 会在首次检查完组件或指令的输入属性后，紧接着调用它。这里的业务逻辑是初始化验证表单的内容。
+- <code>onSubmit()</code> 提交表单的逻辑。首先验证实现了 <code>FormGroup</code> 接口的表单。高亮化未通过验证的组件（用户名和密码只做了非空验证）。然后验证是否登陆成功，做对应处理。
 
-**项目地址**: [https://codechina.csdn.net/sonicwater1/ng-demo](https://codechina.csdn.net/sonicwater1/ng-demo)
-
-**结语**：面向切面这种编码风格值得尝试，学习 <font color="#c63">Angular</font> 的同时也能加强了对 <font color="#639">TypeScript</font> 的掌握。