Angular 4 - 示例

---

---

在本章中，我們將討論一些與 Angular 4 相關的示例。

首先，我們建立了一個示例，其中顯示了一個登入表單，輸入為使用者名稱和密碼。輸入正確的值後，它將進入內部並顯示另一個表單，您可以在其中輸入客戶詳細資訊。此外，我們建立了四個元件 - 頁首、頁尾、使用者登入和主頁。

元件是使用以下命令建立的：

ng g component header

C:\ngexamples\aexamples>ng g component header
installing component
   create src\app\header\header.component.css
   create src\app\header\header.component.html
   create src\app\header\header.component.spec.ts
   create src\app\header\header.component.ts
   update src\app\app.module.ts

ng g component footer

C:\ngexamples\aexamples>ng g component footer
installing component
   create src\app\footer\footer.component.css
   create src\app\footer\footer.component.html
   create src\app\footer\footer.component.spec.ts
   create src\app\footer\footer.component.ts
   update src\app\app.module.ts

ng g component userlogin

C:\ngexamples\aexamples>ng g component userlogin
installing component
   create src\app\userlogin\userlogin.component.css
   create src\app\userlogin\userlogin.component.html
   create src\app\userlogin\userlogin.component.spec.ts
   create src\app\userlogin\userlogin.component.ts
   update src\app\app.module.ts

ng g component mainpage

C:\ngexamples\aexamples>ng g component mainpage
installing component
   create src\app\mainpage\mainpage.component.css
   create src\app\mainpage\mainpage.component.html
   create src\app\mainpage\mainpage.component.spec.ts
   create src\app\mainpage\mainpage.component.ts
   update src\app\app.module.ts

在app.module.ts中，父模組在建立時添加了所有元件。該檔案如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

建立的元件已新增：

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

元件也新增到宣告中：

declarations: [
   AppComponent,
   HeaderComponent,
   FooterComponent,
   UserloginComponent,
   MainpageComponent
],

在父app.component.html中，我們添加了使用者將看到的該檔案的主要結構。

<div class="mainpage">
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</div>

我們建立了一個 div 並添加了<app-header></app-header>、<router-outlet></router-outlet>和<app-footer></app-footer>。

<router-outlet></router-outlet>用於在頁面之間導航。在這裡，頁面是登入表單，一旦成功，它將重定向到主頁，即客戶表單。

要先獲取登入表單，然後再獲取mainpage.component.html，請在app.module.ts中進行如下所示的更改：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';

import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

@NgModule({
   declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      UserloginComponent,
      MainpageComponent
   ],
   
   imports: [
      BrowserModule,
      ReactiveFormsModule,
      RouterModule.forRoot(appRoutes),
      BrowserAnimationsModule,
      HttpModule,
      MdTableModule,
      MdInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

我們從@anuglar/router匯入RouterModule和Routes。在匯入中，RouterModules 將 appRoutes 作為引數，該引數在上面定義為：

const appRoutes: Routes = [
   {
      path: '',
      component: UserloginComponent
   },
   {
      path: 'app-mainpage',
      component: MainpageComponent
   }
];

Routes 獲取元件陣列，預設情況下呼叫 userloginComponent。

在userlogin.component.ts中，我們匯入了路由器並根據條件導航到mainpage.component.html，如下所示：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname=="systemadmin" && data.passwd=="admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      } else {
         alert("Invalid Login");
         return false;
      }
   }
}

以下是app.component.ts的 .ts 檔案。其中僅存在預設詳細資訊。

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}

現在讓我們顯示每個元件檔案的詳細資訊。首先，我們將先獲取頁首元件。對於新元件，將建立四個檔案header.component.ts、header.component.html、header.component.css和header.component.spec.ts。

header.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

header.component.html

<div>
   <hr />
</div>

我們沒有新增任何 css。這使得 header.component.css 檔案為空。此外，header.compoent.spec.ts檔案為空，因為此處未考慮測試用例。

對於頁首，我們將繪製一條水平線。可以新增徽標或任何其他詳細資訊，使頁首看起來更具創意。

現在讓我們考慮建立頁尾元件。

對於頁尾元件，將建立footer.component.ts、footer.component.html、footer.component.spec.ts和footer.component.css檔案。

footer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.css']
})

export class FooterComponent implements OnInit {
   constructor() { }
   ngOnInit() { }
}

footer.component.html

<hr/>

由於我們沒有新增任何 css，因此footer.component.css檔案為空。此外，footer.compoent.spec.ts檔案為空，因為此處未考慮測試用例。

對於頁尾，我們只需繪製一條水平線，如 .html 檔案中所示。

現在讓我們看看使用者登入元件如何工作。為使用者登入元件建立的檔案為userlogin.component.css、userlogin.component.html、userlogin.component.ts和userlogin.component.spec.ts。

檔案詳細資訊如下：

userlogin.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Login</header>
      <label>Username <span>*</span></label>
      <input type="text" name="uname" formControlName="uname"/>
      
      <div class="help">At least 6 character</div>
      <label>Password <span>*</span></label>
      <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>
      
      <div class="help">Use upper and lowercase lettes as well</div>
      <button [disabled]="!formdata.valid" value="Login">Login</button>
   </form>
</div>

在這裡，我們建立了一個帶有兩個輸入控制元件使用者名稱和密碼的表單。這是一種模型驅動表單方法，其詳細資訊在第 14 章 - 表單中進行了說明。

我們認為使用者名稱和密碼是必填的，因此在 ts 中添加了相應的驗證。單擊提交按鈕後，控制元件將傳遞到onClickSubmit，該控制元件在 ts 檔案中定義。

userlogin.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';

@Component({
   selector: 'app-userlogin',
   templateUrl: './userlogin.component.html',
   styleUrls: ['./userlogin.component.css']
})

export class UserloginComponent implements OnInit {
   formdata;
   constructor(private router: Router) { }
   ngOnInit() {
      this.formdata = new FormGroup({
         uname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(6)
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {
      console.log(data.uname);
      if (data.uname == "systemadmin" && data.passwd == "admin123") {
         alert("Login Successful");
         this.router.navigate(['app-mainpage'])
      }
   }
}

對於 formcontrol 和驗證，模組按如下所示匯入

import { FormGroup, FormControl, Validators} from '@angular/forms';

我們需要一個路由器，以便在使用者和密碼正確時導航到不同的元件。為此，路由器按如下所示匯入：

import { Router} from '@angular/router';

在ngOnInit中，對錶單進行驗證。我們需要使用者名稱超過六個字元，並且該欄位是必填的。密碼也適用相同的條件。

單擊提交後，我們可以檢查使用者名稱是否為systemadmin，密碼是否為admin123。如果是，則會出現一個顯示登入成功的對話方塊，並且路由器將導航到 app-mainpage，它是主頁元件的選擇器。

在userlogin.component.css檔案中為表單添加了 css：

.form_container{
   margin : 0 auto;
   width:600px;
}

form {
   background: white;
   width: 500px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
   font-family: lato;
   position: relative;
   color: #333;
   border-radius: 10px;
}

form header {
   background: #FF3838;
   padding: 30px 20px;
   color: white;
   font-size: 1.2em;
   font-weight: 600;
   border-radius: 10px 10px 0 0;
}

form label {
   margin-left: 20px;
   display: inline-block;
   margin-top: 30px;
   margin-bottom: 5px;
   position: relative;
}

form label span {
   color: #FF3838;
   font-size: 2em;
   position: absolute;
   left: 2.3em;
   top: -10px;
}
form input {
   display: block;
   width: 50%;
   margin-left: 20px;
   padding: 5px 20px;
   font-size: 1em;
   border-radius: 3px;
   outline: none;
   border: 1px solid #ccc;
}

form .help {
   margin-left: 20px;
   font-size: 0.8em;
   color: #777;
}

form button {
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: inherit;
   color: white;
   background: #FF3838;
   outline: none;
   border: none;
   padding: 5px 15px;
   font-size: 1.3em;
   font-weight: 400;
   border-radius: 3px;
   box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
}
form button:hover {
   background: #ff5252;
}

userlogin.component.spec.ts檔案為空，因為目前沒有測試用例。

現在讓我們討論主頁元件如何工作。為主頁元件建立的檔案為mainpage.component.ts、mainpage.component.html、mainpage.component.css和mainpage.component.spect.ts。

mainpage.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
   styleUrls: ['./mainpage.component.css']
})

export class MainpageComponent implements OnInit {
   formdata;
   cutomerdata;
   constructor(private http: Http) { }
   stateCtrl: FormControl;
   ngOnInit() {
      this.formdata = new FormGroup({
         fname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         lname: new FormControl("", Validators.compose([
            Validators.required,
            Validators.minLength(3)
         ])),
         address:new FormControl(""),
         phoneno:new FormControl("")
      });
   }
   onClickSubmit(data) {
      document.getElementById("custtable").style.display="";
      this.cutomerdata = [];
      for (var prop in data) {
         this.cutomerdata.push(data[prop]);
      }
      console.log(this.cutomerdata);
   }
}

我們建立了一個包含名、姓、地址和電話號碼的客戶表單。使用ngOnInit函式對這些資訊進行驗證。單擊提交後，控制元件將進入函式onClickSubmit。在這裡，用於顯示輸入詳細資訊的表格將可見。

customerdata 從 json 轉換為陣列，以便我們可以在表上的 ngFor 中使用它，這在 .html 檔案中完成，如下所示。

mainpage.component.html

<div class="form_container">
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <header>Customer Details</header>
      <label>FirstName <span>*</span></label>
      <input type="text" name="fname" formControlName="fname"/>
      <label>LastName <span>*</span></label>
      
      <input type="text" name="lname" formControlName="lname"/>
      <label>Address <span></span></label>
      <input type="text" name="address" formControlName="address"/>
      <label>Phone No <span></span></label>
      <input type="text" name="phoneno" formControlName="phoneno"/>
      <button [disabled]="!formdata.valid" value="Submit">Submit</button>
   </form>
</div>
<br/>

<div id="custtable" style="display:none;margin:0 auto;">
   <table>
      <tr>
         <td>FirstName</td>
         <td>LastName</td>
         <td>Address</td>
         <td>Phone No</td>
      </tr>
      <tr>
         <td *ngFor="let data of cutomerdata">
            <h5>{{data}}</h5>
         </td>
      </tr>
   </table>
</div>

在這裡，第一個 div 包含客戶詳細資訊，第二個 div 包含表格，該表格將顯示輸入的詳細資訊。使用者登入和客戶詳細資訊的顯示如下所示。這是包含登入表單以及頁首和頁尾的頁面。

輸入詳細資訊後，顯示如下

單擊提交後，將出現一個顯示登入成功的對話方塊。

如果詳細資訊無效，則會顯示一個顯示登入無效的對話方塊，如下所示：

如果登入成功，則將繼續到客戶詳細資訊的下一個表單，如下所示：

輸入並提交詳細資訊後，將出現一個對話方塊，顯示客戶詳細資訊已新增，如下面的螢幕截圖所示：

當我們在上面的螢幕截圖中單擊“確定”時，詳細資訊將顯示如下面的螢幕截圖所示：