Angular, currently in version 11, takes advantage of TypeScript’s Decorators feature to write code similar to Java Spring Boots’ section-oriented style. People who have not written such code may not adapt, in fact, a good foundation to read the official documentation can immediately start.

Project introduction

This project is built using scaffolding Angular CLI (Version 11.2.12). UI uses Ng-Zorro (official website), which is the Angular version of Ant Design.

At present, only pure static login is implemented. User name: admin Password: 123456

Screenshots:

1. Login screen by default

2. Click the login button to verify that the form is not empty

3. Verify that the user name and password are incorrect

4. Login is successful

Project directory

ng-demo├ ─ ─ the README. Md ├ ─ ─ presents. The json ├ ─ ─ e2e │ ├ ─ ─ protractor. Conf., js │ ├ ─ ─ the SRC │ │ ├ ─ ─ app. E2e-spec. Ts │ │ └ ─ ─ app. Po. Ts │ └ ─ ─ tsconfig. Json ├ ─ ─ karma. Conf., js ├ ─ ─ package. The json ├ ─ ─ the SRC │ ├ ─ ─ app │ │ ├ ─ ─ the app-routing.module. Ts │ │ ├─ Heavy Metal Exercises - - Heavy metal Exercises - - Heavy metal Exercises │ │ ├ ─ ─ app. The module. Ts │ │ └ ─ ─ components │ │ ├ ─ ─ home │ │ │ ├ ─ ─ home.com ponent. HTML │ │ │ ├ ─ ─ home.com ponent. SCSS │ │ │ └ ─ ─ home.com ponent. Ts │ │ ├ ─ ─ the login │ │ │ ├ ─ ─ login.com ponent. HTML │ │ │ ├ ─ ─ login.com ponent. SCSS │ │ │ ├ ─ ─ │ ├ ─ ├ ─ 08.02.02-zorro-antd.module. Exercises ── assets │ ├── images │ ├── environment The favicon. Ico │ ├ ─ ─ index. The HTML │ ├ ─ ─ main. Ts │ ├ ─ ─ polyfills. Ts │ ├ ─ ─ styles. The SCSS │ ├ ─ ─ test. The ts │ └ ─ ─ theme. The less ├ ─ ─ ├─ ├─ ├─ ├.class.json └─ ├.class.json └─ ├.class.jsonCopy the code

Project description

/src/app/app.modules.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginModule } from './components/login/login.module';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule {}Copy the code
  • Import the routing module AppRoutingModule, the LoginModule LoginModule, and the FormsModule FormsModule through the @NgModule decorator’s imports property.
  • The AppComponent is in the @NgModule decorator’s declarations property (list of declarable objects) and bootstrap property (main view, set only by the root module).
  • See the module section of the official documentation for the use of @NgModule.

/src/app/app.component.html

<router-outlet></router-outlet>
Copy the code

There is only one routing label.

/src/app/app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
  {path: 'login'.component: LoginComponent},
  {path: ' '.redirectTo: '/login'.pathMatch: 'full'},
  {path: 'home'.component: HomeComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}Copy the code
  • Set the route file. After the project starts, the page is redirected to the /login route by default.
  • Add /home route, this instance is not used for now.

/src/app/components/ng-zorro-antd.module.ts

.import { NzButtonModule } from 'ng-zorro-antd/button'; .@NgModule({
  exports: [
    ...
    NzButtonModule,
    ...
  ]
})
export class NgZorroAntdModule {}
Copy the code
  • This file gets all component modules from ng-zorro-antd and exports them via the @NgModule decorator exports property.

/src/app/components/login/login.moudle.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoginComponent } from './login.component';
import { NgZorroAntdModule } from '.. /ng-zorro-antd.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
  	LoginComponent
  ],
  imports: [
    BrowserModule,
    NgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [].bootstrap: [
  	LoginComponent
  ]
})
export class LoginModule {}Copy the code
  • This introduces the ng-Zorro-antd export module NgZorroAntdModule, which can be used in the HTML section. For example, a normal button tag adds the NZ-button attribute to make it called the NG-Zorro-ANTd button component when compiled.
  • Introduce the AppComponent.
  • Note the introduction of form-related dependencies, which are used for form validation and so on.

/ src/app/components/login/login.com ponents. HTML on part of the HTML list only form the relevant code.

.<form nz-form name="form" [formGroup] ="validateForm" (ngSubmit) ="onSubmit()">
    <nz-form-item>
      <nz-form-label [nzSpan] ="4">The user name</nz-form-label>
      <nz-form-control 
        nzHasFeedback 
        [nzSpan] ="20"
        nzErrorTip="Please enter user name"
      >
        <nz-input-group [nzSuffix] ="suffixUsername">
          <input 
            nz-input 
            placeholder="Please enter user name" 
            name="username" 
            formControlName="username"
            required 
          />
        </nz-input-group>
        <ng-template #suffixUsername>
          <i 
            nz-icon 
            class="ant-input-clear-icon" 
            nzTheme="fill" 
            nzType="close-circle" 
            *ngIf="validateForm.controls.username.value.length>0" 
            (click) ="validateForm.controls.username.setValue('')"
          ></i>
        </ng-template>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan] ="4">The secret&nbsp;&nbsp;&nbsp;&nbsp;code</nz-form-label>
      <nz-form-control 
        nzHasFeedback 
        [nzSpan] ="20"
        nzErrorTip="Please enter your password"
      >
        <nz-input-group [nzSuffix] ="suffixPassword">
          <input 
            nz-input 
            name="password" 
            formControlName="password"
            [type] ="passwordVisible ? 'text' : 'password'" 
            placeholder="Please enter your password" 
            required
          />
        </nz-input-group>
        <ng-template #suffixPassword>
          <i 
            nz-icon 
            class="ant-input-clear-icon" 
            nzTheme="fill" 
            nzType="close-circle" 
            *ngIf="validateForm.controls.password.value.length>0" 
            (click) ="validateForm.controls.password.setValue('')"
          ></i>
          <i 
            nz-icon 
            [nzType] ="passwordVisible ? 'eye-invisible' : 'eye'" 
            (click) ="passwordVisible = ! passwordVisible"
          ></i>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan] ="20" [nzOffset] ="4">
        <div nz-row class="login-form-margin">
          <div nz-col [nzSpan] ="12">
            <label nz-checkbox formControlName="remember">
              <span>Remember that I</span>
            </label>
          </div>
          <div nz-col [nzSpan] ="12" style="text-align: right;">
            <a class="login-form-forgot">Forget your password?</a>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan] ="24" [nzOffset] ="0" style="text-align: center;">
        <button 
          type="submit"
          nz-button 
          style="width: 100px;" 
          nzType="primary"
          ng-disabled="form.$invalid"
        >The login</button>
      </nz-form-control>
    </nz-form-item>
  </form>.Copy the code
  • The form’s [formGroup]=”validateForm” attribute binds the validation object.
  • The form’s (ngSubmit)=”onSubmit()” attribute binds the form submission event.
  • Enter the control name corresponding to the formControlName property binding for the control.

/src/app/components/login/login.components.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-component'.templateUrl: './login.component.html'.styleUrls: ['./login.component.scss']})export class LoginComponent implements OnInit {

  constructor(
    public login: FormBuilder,
    private message: NzMessageService
  ) {}
  
  publicvalidateForm! : FormGroup;public passwordVisible:Boolean = false;
  
  // Submit the form
  onSubmit():void{

    // Update the highlight of the form's unvalidated controls
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }

    // If the verification is successful
    if(this.validateForm.status=='INVALID') {this.message.create('warning'.'Please fill in username and password');
      return;
    }

    // If the verification is successful
    if(this.validateForm.status=='VALID') {let { username, password } = this.validateForm.value;
      if( username == 'admin' && password == '123456') {this.message.create('success'.'Login successful');
      }else{
        this.message.create('error'.'Wrong username and password'); }}}/ / initialization
  ngOnInit(): void {
    this.validateForm = this.login.group({
      username: [' ', [Validators.required]],
      password: [' ', [Validators.required]],
      remember: [true]}); }}Copy the code
  • NgOnInit () is a component lifecycle that Angular calls the first time it checks the input properties of a component or directive. The business logic here is to initialize the contents of the validation form.
  • OnSubmit () submits the form logic. First validate the form that implements the FormGroup interface. Highlight components that are not authenticated (user names and passwords are only non-null validated). Then verify whether the login is successful, do the corresponding processing.

Project address: gitee.com/sonicwater/…

Conclusion: The tangential style of coding is worth a try. Learning Angular helps you master TypeScript.