Angular 4 - คู่มือฉบับย่อ

Angular มีสามรุ่นหลัก ๆ รุ่นแรกที่เปิดตัวคือ Angular1 ซึ่งเรียกอีกอย่างว่า AngularJS Angular1 ตามด้วย Angular2 ซึ่งมีการเปลี่ยนแปลงมากมายเมื่อเทียบกับ Angular1

โครงสร้างของ Angular ขึ้นอยู่กับสถาปัตยกรรมส่วนประกอบ / บริการ AngularJS ขึ้นอยู่กับตัวควบคุมมุมมองแบบจำลองAngular 4 เปิดตัวในเดือนมีนาคม 2017 พิสูจน์ได้ว่าเป็นการพัฒนาครั้งสำคัญและเป็นรุ่นล่าสุดจากทีม Angular หลังจาก Angular2

Angular 4 เกือบจะเหมือนกับ Angular 2 มันมีความเข้ากันได้แบบย้อนหลังกับ Angular 2 โครงการที่พัฒนาใน Angular 2 จะทำงานได้โดยไม่มีปัญหาใด ๆ กับ Angular 4

ตอนนี้ให้เราดูคุณสมบัติใหม่และการเปลี่ยนแปลงที่เกิดขึ้นใน Angular 4

ทำไม Angular4 และไม่ใช่ Angular3

ทีม Angular ประสบปัญหาการกำหนดเวอร์ชันภายในกับโมดูลของพวกเขาและเนื่องจากความขัดแย้งพวกเขาจึงต้องดำเนินการต่อไปและปล่อย Angular เวอร์ชันถัดไป - Angular4

ตอนนี้ให้เราดูคุณสมบัติใหม่ที่เพิ่มเข้ามาใน Angular 4 -

ngIf

Angular2 รองรับเฉพาะไฟล์ ifเงื่อนไข. อย่างไรก็ตาม Angular 4 รองรับไฟล์if elseสภาพเช่นกัน. ให้เราดูว่ามันทำงานอย่างไรโดยใช้แม่แบบ ng

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

เป็นคำหลักในการวนซ้ำ

ด้วยความช่วยเหลือของ as คำสำคัญที่คุณสามารถจัดเก็บค่าดังที่แสดงด้านล่าง -

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

ผลรวมของตัวแปรจะจัดเก็บเอาต์พุตของชิ้นงานโดยใช้ as คำสำคัญ.

แพ็คเกจแอนิเมชั่น

ภาพเคลื่อนไหวใน Angular 4 มีให้ใช้งานเป็นแพ็คเกจแยกต่างหากและต้องนำเข้าจาก @ angular / animations ใน Angular2 สามารถใช้ได้กับ @angular/core. มันยังคงเหมือนเดิมสำหรับด้านความเข้ากันได้แบบย้อนหลัง

เทมเพลต

Angular 4 ใช้ <ng-template> เป็นแท็กแทน <template>;หลังถูกใช้ใน Angular2 เหตุผลที่ Angular 4 เปลี่ยนไป<template> ถึง <ng-template> เป็นเพราะความขัดแย้งของชื่อ <template> แท็กด้วย html <template>แท็กมาตรฐาน จะเลิกใช้งานอย่างสมบูรณ์ในอนาคต นี่คือหนึ่งในการเปลี่ยนแปลงที่สำคัญใน Angular 4

TypeScript 2.2

Angular 4 ได้รับการอัปเดตเป็น TypeScript เวอร์ชันล่าสุดซึ่งก็คือ 2.2 ซึ่งช่วยปรับปรุงความเร็วและให้การตรวจสอบประเภทที่ดีขึ้นในโครงการ

ท่อไตเติ้ลกรณี

Angular 4 ได้เพิ่มกรณีชื่อท่อใหม่ซึ่งจะเปลี่ยนอักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

บรรทัดโค้ดด้านบนสร้างผลลัพธ์ต่อไปนี้ - Angular 4 Titlecase.

พารามิเตอร์การค้นหา Http

พารามิเตอร์การค้นหาไปยัง http get api ถูกทำให้ง่ายขึ้น เราไม่จำเป็นต้องโทรURLSearchParams เช่นเดียวกับที่ทำใน Angular2

แอพที่เล็กลงและเร็วขึ้น

แอปพลิเคชัน Angular 4 มีขนาดเล็กและเร็วกว่าเมื่อเทียบกับ Angular2 ใช้ TypeScript เวอร์ชัน 2.2 ซึ่งเป็นเวอร์ชันล่าสุดซึ่งทำให้การคอมไพล์ขั้นสุดท้ายมีขนาดเล็ก

ในบทนี้เราจะพูดถึงการตั้งค่าสภาพแวดล้อมที่จำเป็นสำหรับ Angular 4 ในการติดตั้ง Angular 4 เราต้องการสิ่งต่อไปนี้ -

Nodejs
Npm
CLI เชิงมุม
IDE สำหรับเขียนโค้ดของคุณ

โหนดต้องมากกว่า 4 และ npm ต้องมากกว่า 3

โหนด

หากต้องการตรวจสอบว่ามีการติดตั้ง nodejs ในระบบของคุณหรือไม่ให้พิมพ์ node –vในเทอร์มินัล สิ่งนี้จะช่วยให้คุณเห็นเวอร์ชันของ nodejs ที่ติดตั้งในระบบของคุณในปัจจุบัน

C:\>node –v
v6.11.0

หากไม่พิมพ์อะไรเลยให้ติดตั้ง nodejs บนระบบของคุณ ในการติดตั้ง nodejs ให้ไปที่โฮมเพจhttps://nodejs.org/en/download/ ของ nodejs และติดตั้งแพ็คเกจตามระบบปฏิบัติการของคุณ

หน้าแรกของ nodejs จะมีลักษณะดังต่อไปนี้ -

ติดตั้งแพคเกจที่จำเป็นตามระบบปฏิบัติการของคุณ เมื่อติดตั้ง nodejs แล้ว npm ก็จะถูกติดตั้งควบคู่ไปด้วย หากต้องการตรวจสอบว่ามีการติดตั้ง npm หรือไม่ให้พิมพ์ npm –v ในเทอร์มินัล ควรแสดงเวอร์ชันของ npm

C:\>npm –v
5.3.0

การติดตั้ง Angular 4 นั้นง่ายมากด้วยความช่วยเหลือของ angular CLI ไปที่หน้าแรกhttps://cli.angular.io/ ของเชิงมุมเพื่อรับการอ้างอิงของคำสั่ง

ประเภท npm install –g @angular/cliเพื่อติดตั้ง angular cli บนระบบของคุณ

คุณจะได้รับการติดตั้งด้านบนในเทอร์มินัลของคุณเมื่อติดตั้ง Angular CLI แล้ว คุณสามารถใช้ IDE ใดก็ได้ที่คุณเลือกเช่น WebStorm, Atom, Visual Studio Code เป็นต้น

รายละเอียดของการตั้งค่าโครงการอธิบายไว้ในบทถัดไป

AngularJS ขึ้นอยู่กับตัวควบคุมมุมมองโมเดลในขณะที่ Angular 2 ขึ้นอยู่กับโครงสร้างส่วนประกอบ Angular 4 ทำงานบนโครงสร้างเดียวกับ Angular2 แต่เร็วกว่าเมื่อเทียบกับ Angular2

Angular4 ใช้เวอร์ชัน TypeScript 2.2 ในขณะที่ Angular 2 ใช้ TypeScript เวอร์ชัน 1.8 ทำให้ประสิทธิภาพแตกต่างกันมาก

ในการติดตั้ง Angular 4 ทีม Angular ได้มาพร้อมกับ Angular CLI ซึ่งช่วยให้การติดตั้งง่ายขึ้น คุณต้องเรียกใช้คำสั่งสองสามคำเพื่อติดตั้ง Angular 4

ไปที่เว็บไซต์นี้ https://cli.angular.io เพื่อติดตั้ง Angular CLI

ในการเริ่มต้นการติดตั้งอันดับแรกเราต้องตรวจสอบให้แน่ใจว่าเราได้ติดตั้ง nodejs และ npm ด้วยเวอร์ชันล่าสุดแล้ว แพ็คเกจ npm ได้รับการติดตั้งพร้อมกับ nodejs

ไปที่ไซต์ nodejs https://nodejs.org/en/.

แนะนำให้ใช้ Nodejs v6.11.0 เวอร์ชันล่าสุดสำหรับผู้ใช้ ผู้ใช้ที่มี nodejs มากกว่า 4 อยู่แล้วสามารถข้ามขั้นตอนข้างต้นได้ เมื่อติดตั้ง nodejs แล้วคุณสามารถตรวจสอบเวอร์ชันของโหนดในบรรทัดคำสั่งโดยใช้คำสั่ง node–vดังแสดงด้านล่าง -

พรอมต์คำสั่งแสดง v6.11.0 เมื่อติดตั้ง nodejs แล้ว npm ก็จะถูกติดตั้งควบคู่ไปด้วย

ในการตรวจสอบเวอร์ชันของ npm ให้พิมพ์คำสั่ง npm –vในเทอร์มินัล มันจะแสดงเวอร์ชันของ npm ดังที่แสดงด้านล่าง

เวอร์ชันของ npm คือ 3.10.10 ตอนนี้เราได้ติดตั้ง nodejs และ npm แล้วให้เรารันคำสั่ง angular cli เพื่อติดตั้ง Angular 4 คุณจะเห็นคำสั่งต่อไปนี้บนหน้าเว็บ -

npm install -g @angular/cli //command to install angular 4

ng new Angular 4-app // name of the project

cd my-dream-app

ng serve

ให้เราเริ่มต้นด้วยคำสั่งแรกในบรรทัดคำสั่งและดูว่ามันทำงานอย่างไร

เริ่มต้นด้วยเราจะสร้างไดเร็กทอรีว่างจากนั้นเราจะรันคำสั่ง Angular CLI

ป้อนคำสั่งด้านบนเพื่อติดตั้ง Angular 4 กระบวนการติดตั้งจะเริ่มขึ้นและจะใช้เวลาสักครู่จึงจะเสร็จสมบูรณ์

เมื่อคำสั่งข้างต้นในการติดตั้งเสร็จสมบูรณ์พร้อมรับคำสั่งต่อไปนี้จะปรากฏขึ้น -

เราได้สร้างโฟลเดอร์ว่าง ProjectA4และติดตั้งคำสั่ง Angular CLI เรายังได้ใช้-gเพื่อติดตั้ง Angular CLI ทั่วโลก ตอนนี้คุณสามารถสร้างโปรเจ็กต์ Angular 4 ในไดเร็กทอรีหรือโฟลเดอร์ใดก็ได้และคุณไม่จำเป็นต้องติดตั้งโปรเจ็กต์ Angular CLI เนื่องจากมีการติดตั้งในระบบของคุณทั่วโลกและคุณสามารถใช้ประโยชน์จากไดเร็กทอรีใดก็ได้

ให้เราตรวจสอบว่ามีการติดตั้ง Angular CLI หรือไม่ ในการตรวจสอบการติดตั้งให้รันคำสั่งต่อไปนี้ในเทอร์มินัล -

ng -v

เราได้รับเวอร์ชัน @ angular / cli ซึ่งปัจจุบัน 1.2.0 เวอร์ชันโหนดที่รันคือ 6.11.0 และรายละเอียดระบบปฏิบัติการ รายละเอียดข้างต้นบอกเราว่าเราได้ติดตั้ง angular cli เรียบร้อยแล้วและตอนนี้เราพร้อมที่จะเริ่มโครงการของเราแล้ว

ตอนนี้เราได้ติดตั้ง Angular 4 แล้วให้เราสร้างโปรเจ็กต์แรกของเราใน Angular 4 ในการสร้างโปรเจ็กต์ใน Angular 4 เราจะใช้คำสั่งต่อไปนี้ -

ng new projectname

เราจะตั้งชื่อโครงการ ng new Angular 4-app.

ตอนนี้ให้เรารันคำสั่งดังกล่าวในบรรทัดคำสั่ง

โครงการ Angular 4-appสร้างสำเร็จแล้ว ติดตั้งแพ็คเกจที่จำเป็นทั้งหมดที่จำเป็นสำหรับโครงการของเราเพื่อให้ทำงานใน Angular 4 ตอนนี้ให้เราเปลี่ยนไปใช้โครงการที่สร้างขึ้นซึ่งอยู่ในไดเรกทอรีAngular 4-app. เปลี่ยนไดเร็กทอรีในบรรทัดคำสั่ง -cd Angular 4-app.

เราจะใช้ Visual Studio Code IDE สำหรับการทำงานกับ Angular 4; คุณสามารถใช้ IDE ใดก็ได้เช่น Atom, WebStorm เป็นต้น

ในการดาวน์โหลด Visual Studio Code ไปที่ https://code.visualstudio.com/ แล้วคลิก Download for Windows.

คลิก Download for Windows สำหรับการติดตั้ง IDE และรันการตั้งค่าเพื่อเริ่มใช้ IDE

ตัวแก้ไขมีลักษณะดังนี้ -

เรายังไม่ได้เริ่มโครงการใด ๆ ในนั้น ตอนนี้ให้เรานำโครงการที่เราสร้างขึ้นโดยใช้ angular-cli

เราจะพิจารณา Angular 4-appโครงการ. ให้เราเปิด Angular 4-app และดูว่าโครงสร้างโฟลเดอร์เป็นอย่างไร

ตอนนี้เรามีโครงสร้างไฟล์สำหรับโครงการของเราแล้วให้เรารวบรวมโครงการของเราด้วยคำสั่งต่อไปนี้ -

ng serve

ng serve คำสั่งสร้างแอปพลิเคชันและเริ่มต้นเว็บเซิร์ฟเวอร์

เว็บเซิร์ฟเวอร์เริ่มต้นที่พอร์ต 4200 พิมพ์ url http://localhost:4200/ในเบราว์เซอร์และดูผลลัพธ์ เมื่อรวบรวมโครงการแล้วคุณจะได้รับผลลัพธ์ต่อไปนี้ -

เมื่อคุณเรียกใช้ http://localhost:4200/ ในเบราว์เซอร์คุณจะถูกนำไปที่หน้าจอต่อไปนี้ -

ให้เราทำการเปลี่ยนแปลงเพื่อแสดงเนื้อหาต่อไปนี้ -

“Welcome to Angular 4 project”

เราได้ทำการเปลี่ยนแปลงในไฟล์ - app.component.html และ app.component.ts. เราจะพูดคุยเพิ่มเติมเกี่ยวกับเรื่องนี้ในบทต่อ ๆ ไป

ให้เราตั้งค่าโครงการให้เสร็จสิ้น หากคุณเห็นว่าเราใช้พอร์ต 4200 ซึ่งเป็นพอร์ตเริ่มต้นที่ angular – cli ใช้ในขณะคอมไพล์ คุณสามารถเปลี่ยนพอร์ตได้หากต้องการโดยใช้คำสั่งต่อไปนี้ -

ng serve --host 0.0.0.0 –port 4205

โฟลเดอร์แอพ Angular 4 มีดังต่อไปนี้ folder structure -

e2e- โฟลเดอร์ทดสอบ end to end e2e ส่วนใหญ่ใช้สำหรับการทดสอบการรวมและช่วยให้แน่ใจว่าแอปพลิเคชันทำงานได้ดี
node_modules- แพ็คเกจ npm ที่ติดตั้งคือ node_modules คุณสามารถเปิดโฟลเดอร์และดูแพ็คเกจที่มี
src - โฟลเดอร์นี้เป็นที่ที่เราจะทำงานในโครงการโดยใช้ Angular 4

โฟลเดอร์แอพ Angular 4 มีดังต่อไปนี้ file structure -

.angular-cli.json - โดยทั่วไปจะมีชื่อโครงการเวอร์ชันของ cli และอื่น ๆ
.editorconfig - นี่คือไฟล์กำหนดค่าสำหรับโปรแกรมแก้ไข
.gitignore - ไฟล์. gitignore ควรถูกผูกมัดในที่เก็บเพื่อแบ่งปันกฎการละเว้นกับผู้ใช้รายอื่นที่โคลนที่เก็บ
karma.conf.js- ใช้สำหรับการทดสอบหน่วยโดยใช้ไม้โปรแทรกเตอร์ ข้อมูลทั้งหมดที่จำเป็นสำหรับโปรเจ็กต์มีอยู่ในไฟล์arma.conf.js
package.json - ไฟล์ package.json บอกว่าจะติดตั้งไลบรารีใดใน node_modules เมื่อคุณรันการติดตั้ง npm

ในปัจจุบันหากคุณเปิดไฟล์ในโปรแกรมแก้ไขคุณจะได้รับโมดูลต่อไปนี้ที่เพิ่มเข้ามา

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

ในกรณีที่คุณต้องการเพิ่มไลบรารีเพิ่มเติมคุณสามารถเพิ่มไลบรารีได้ที่นี่และรันคำสั่ง npm install

protractor.conf.js - นี่คือการกำหนดค่าการทดสอบที่จำเป็นสำหรับแอปพลิเคชัน
tsconfig.json - โดยพื้นฐานแล้วจะมีตัวเลือกคอมไพเลอร์ที่จำเป็นในระหว่างการคอมไพล์
tslint.json - นี่คือไฟล์กำหนดค่าที่มีกฎที่ต้องพิจารณาขณะคอมไพล์

src folder เป็นโฟลเดอร์หลักซึ่ง internally has a different file structure.

แอป

ประกอบด้วยไฟล์ที่อธิบายไว้ด้านล่าง ไฟล์เหล่านี้ถูกติดตั้งโดย angular-cli ตามค่าเริ่มต้น

app.module.ts- หากคุณเปิดไฟล์คุณจะเห็นว่าโค้ดมีการอ้างอิงถึงไลบรารีต่างๆซึ่งนำเข้ามา Angular-cli ได้ใช้ไลบรารีเริ่มต้นเหล่านี้สำหรับการนำเข้า - angular / core, platform-browser ชื่ออธิบายการใช้งานของไลบรารี

นำเข้าและบันทึกลงในตัวแปรเช่น declarations, imports, providersและ bootstrap.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

declarations- ในการประกาศการอ้างอิงถึงส่วนประกอบจะถูกเก็บไว้ Appcomponent เป็นส่วนประกอบเริ่มต้นที่สร้างขึ้นเมื่อใดก็ตามที่มีการเริ่มโครงการใหม่ เราจะเรียนรู้เกี่ยวกับการสร้างส่วนประกอบใหม่ในส่วนอื่น

imports- จะมีการนำเข้าโมดูลดังที่แสดงด้านบน ในปัจจุบัน BrowserModule เป็นส่วนหนึ่งของการนำเข้าซึ่งนำเข้าจาก @ angular / platform-browser

providers- สิ่งนี้จะมีการอ้างอิงถึงบริการที่สร้างขึ้น บริการจะกล่าวถึงในบทถัดไป

bootstrap - สิ่งนี้มีการอ้างอิงถึงองค์ประกอบเริ่มต้นที่สร้างขึ้นเช่น AppComponent

app.component.css- คุณสามารถเขียนโครงสร้าง css ของคุณได้ที่นี่ ตอนนี้เราได้เพิ่มสีพื้นหลังให้กับ div ดังที่แสดงด้านล่าง

.divdetails{
   background-color: #ccc;
}

app.component.html - โค้ด html จะอยู่ในไฟล์นี้

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

นี่คือโค้ด html เริ่มต้นที่มีอยู่ในการสร้างโปรเจ็กต์

app.component.spec.ts - ไฟล์เหล่านี้เป็นไฟล์ที่สร้างขึ้นโดยอัตโนมัติซึ่งมีการทดสอบหน่วยสำหรับส่วนประกอบต้นทาง
app.component.ts- คลาสสำหรับองค์ประกอบถูกกำหนดไว้ที่นี่ คุณสามารถประมวลผลโครงสร้าง html ในไฟล์. ts การประมวลผลจะรวมถึงกิจกรรมต่างๆเช่นการเชื่อมต่อกับฐานข้อมูลการโต้ตอบกับส่วนประกอบอื่น ๆ การกำหนดเส้นทางบริการ ฯลฯ

โครงสร้างของไฟล์มีดังนี้ -

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

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

สินทรัพย์

คุณสามารถบันทึกรูปภาพไฟล์ js ของคุณในโฟลเดอร์นี้

สิ่งแวดล้อม

โฟลเดอร์นี้มีรายละเอียดสำหรับการใช้งานจริงหรือสภาพแวดล้อมการพัฒนา โฟลเดอร์นี้มีสองไฟล์

environment.prod.ts
environment.ts

ไฟล์ทั้งสองมีรายละเอียดว่าควรคอมไพล์ไฟล์สุดท้ายในสภาพแวดล้อมการใช้งานจริงหรือสภาพแวดล้อมการพัฒนา

โครงสร้างไฟล์เพิ่มเติมของโฟลเดอร์แอพ Angular 4 มีดังต่อไปนี้ -

favicon.ico

นี่คือไฟล์ที่มักพบในไดเรกทอรีรากของเว็บไซต์

index.html

นี่คือไฟล์ที่แสดงในเบราว์เซอร์

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel="stylesheet">
      <meta name = "viewport" content="width=device-width, initial-scale=1">
      <link rel = "icon" type="image/x-icon" href="favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

ร่างกายได้ <app-root></app-root>. นี่คือตัวเลือกที่ใช้ในapp.component.ts และจะแสดงรายละเอียดจากไฟล์ app.component.html

main.ts

main.ts คือไฟล์ที่เราเริ่มพัฒนาโครงการ เริ่มต้นด้วยการนำเข้าโมดูลพื้นฐานที่เราต้องการ ตอนนี้ถ้าคุณเห็น angular / core, angular / platform-browser-dynamic, app.module และ environment จะถูกนำเข้าโดยค่าเริ่มต้นระหว่างการติดตั้ง angular-cli และการตั้งค่าโครงการ

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

platformBrowserDynamic().bootstrapModule(AppModule) มีการอ้างอิงโมดูลหลัก AppModule. ดังนั้นเมื่อเรียกใช้งานในเบราว์เซอร์ไฟล์ที่เรียกคือ index.html Index.html ภายในหมายถึง main.ts ซึ่งเรียกโมดูลหลักเช่น AppModule เมื่อโค้ดต่อไปนี้รัน -

platformBrowserDynamic().bootstrapModule(AppModule);

เมื่อเรียก AppModule จะเรียก app.module.ts ซึ่งเรียกต่อไปว่า AppComponent ตาม boostrap ดังนี้ -

bootstrap: [AppComponent]

ใน app.component.ts มีไฟล์ selector: app-rootซึ่งใช้ในไฟล์ index.html ซึ่งจะแสดงเนื้อหาที่มีอยู่ใน app.component.html

สิ่งต่อไปนี้จะปรากฏในเบราว์เซอร์ -

polyfill.ts

ส่วนใหญ่จะใช้สำหรับความเข้ากันได้แบบย้อนหลัง

styles.css

นี่คือไฟล์สไตล์ที่จำเป็นสำหรับโปรเจ็กต์

test.ts

ที่นี่จะมีการจัดการกรณีทดสอบหน่วยสำหรับการทดสอบโครงการ

tsconfig.app.json

สิ่งนี้ถูกใช้ในระหว่างการคอมไพล์มีรายละเอียดการกำหนดค่าที่จำเป็นต้องใช้เพื่อเรียกใช้แอปพลิเคชัน

tsconfig.spec.json

ซึ่งจะช่วยรักษารายละเอียดสำหรับการทดสอบ

การพิมพ์ d.ts

ใช้เพื่อจัดการนิยาม TypeScript

โครงสร้างไฟล์สุดท้ายมีลักษณะดังนี้ -

ส่วนสำคัญของการพัฒนาด้วย Angular 4 จะทำในส่วนประกอบ คอมโพเนนต์เป็นคลาสที่โต้ตอบกับไฟล์. html ของคอมโพเนนต์ซึ่งแสดงบนเบราว์เซอร์ เราได้เห็นโครงสร้างไฟล์ในหนึ่งในบทก่อนหน้าของเรา โครงสร้างไฟล์มีส่วนประกอบของแอพและประกอบด้วยไฟล์ต่อไปนี้ -

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

ไฟล์ด้านบนถูกสร้างขึ้นโดยค่าเริ่มต้นเมื่อเราสร้างโปรเจ็กต์ใหม่โดยใช้คำสั่ง angular-cli

หากคุณเปิดไฟล์ app.module.ts มันมีไลบรารีบางส่วนที่นำเข้าและยังมีการประกาศซึ่งกำหนดองค์ประกอบแอปดังนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

การประกาศรวมถึงตัวแปร AppComponent ซึ่งเราได้นำเข้าแล้ว สิ่งนี้จะกลายเป็นองค์ประกอบหลัก

ตอนนี้ angular-cli มีคำสั่งให้สร้างส่วนประกอบของคุณเอง อย่างไรก็ตามคอมโพเนนต์แอพที่สร้างขึ้นโดยค่าเริ่มต้นจะยังคงเป็นพาเรนต์เสมอและคอมโพเนนต์ถัดไปที่สร้างขึ้นจะเป็นคอมโพเนนต์ย่อย

ตอนนี้ให้เรารันคำสั่งเพื่อสร้างส่วนประกอบ

ng g component new-cmp

เมื่อคุณรันคำสั่งด้านบนในบรรทัดคำสั่งคุณจะได้รับผลลัพธ์ต่อไปนี้ -

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

ตอนนี้ถ้าเราไปตรวจสอบโครงสร้างไฟล์เราจะได้โฟลเดอร์ใหม่ cmp ที่สร้างขึ้นภายใต้โฟลเดอร์ src / app

ไฟล์ต่อไปนี้ถูกสร้างขึ้นในโฟลเดอร์ cmp ใหม่ -

new-cmp.component.css - ไฟล์ css สำหรับคอมโพเนนต์ใหม่ถูกสร้างขึ้น
new-cmp.component.html - สร้างไฟล์ html
new-cmp.component.spec.ts - สามารถใช้สำหรับการทดสอบหน่วย
new-cmp.component.ts - ที่นี่เราสามารถกำหนดโมดูลคุณสมบัติและอื่น ๆ

มีการเพิ่มการเปลี่ยนแปลงลงในไฟล์ app.module.ts ดังนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
// includes the new-cmp component we created

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent // here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

new-cmp.component.ts ไฟล์ถูกสร้างขึ้นดังนี้ -

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .

@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})

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

หากคุณเห็นไฟล์ cmp.component.ts ใหม่ด้านบนจะสร้างคลาสใหม่ชื่อ NewCmpComponent ซึ่งใช้ OnInit.In ซึ่งมีตัวสร้างและเมธอดที่เรียกว่า ngOnInit () ngOnInit ถูกเรียกโดยค่าเริ่มต้นเมื่อเรียกใช้คลาส

ให้เราตรวจสอบวิธีการทำงานของโฟลว์ ตอนนี้คอมโพเนนต์แอพซึ่งสร้างขึ้นโดยค่าเริ่มต้นจะกลายเป็นองค์ประกอบหลัก ส่วนประกอบใด ๆ ที่เพิ่มในภายหลังจะกลายเป็นองค์ประกอบลูก

เมื่อเรากด url ในไฟล์ http://localhost:4200/ เบราว์เซอร์จะเรียกใช้ไฟล์ index.html ก่อนซึ่งแสดงด้านล่าง -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</title>
      <base href = "/">
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

ข้างต้นเป็นไฟล์ html ปกติและเราไม่เห็นสิ่งที่พิมพ์ในเบราว์เซอร์ ดูแท็กในส่วนเนื้อหา

<app-root></app-root>

นี่คือแท็กรากที่สร้างโดย Angular ตามค่าเริ่มต้น แท็กนี้มีการอ้างอิงในไฟล์main.ts ไฟล์.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule ถูกนำเข้าจากแอปของโมดูลหลักหลักและจะมอบให้กับโมดูล bootstrap ซึ่งทำให้โหลดโมดูลแอป

ให้เราดูไฟล์ app.module.ts ไฟล์ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

ที่นี่ AppComponent เป็นชื่อที่กำหนดเช่นตัวแปรที่เก็บข้อมูลอ้างอิงของไฟล์ app. Component.tsและสิ่งเดียวกันนี้มอบให้กับ bootstrap ให้เราดูไฟล์app.component.ts ไฟล์.

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
}

แกนเชิงมุมถูกนำเข้าและเรียกว่าคอมโพเนนต์และใช้ใน Declarator เป็น -

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

ในการอ้างอิงตัวประกาศไปยังตัวเลือก templateUrl และ styleUrlได้รับ ตัวเลือกที่นี่ไม่ได้เป็นอะไรนอกจากแท็กที่อยู่ในไฟล์ index.html ที่เราเห็นด้านบน

คลาส AppComponent มีตัวแปรชื่อ title ซึ่งแสดงในเบราว์เซอร์

@Component ใช้ templateUrl ที่เรียกว่า app.component.html ซึ่งเป็นดังนี้ -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

มีเพียงโค้ด html และชื่อตัวแปรในวงเล็บปีกกา จะถูกแทนที่ด้วยค่าซึ่งมีอยู่ในไฟล์app.component.tsไฟล์. นี้เรียกว่าการผูก เราจะกล่าวถึงแนวคิดของการผูกมัดในบทต่อไป

ตอนนี้เราได้สร้างส่วนประกอบใหม่ที่เรียกว่า new-cmp. สิ่งเดียวกันจะรวมอยู่ในไฟล์app.module.ts เมื่อรันคำสั่งเพื่อสร้างคอมโพเนนต์ใหม่

app.module.ts มีการอ้างอิงถึงองค์ประกอบใหม่ที่สร้างขึ้น

ตอนนี้ให้เราตรวจสอบไฟล์ใหม่ที่สร้างขึ้นใน new-cmp

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

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

ที่นี่เราต้องนำเข้าแกนด้วย การอ้างอิงของคอมโพเนนต์ถูกใช้ใน declarator

ผู้ประกาศมีตัวเลือกที่เรียกว่า app-new-cmp และ templateUrl และ styleUrl.

.html เรียกว่า new-cmp.component.html มีดังนี้ -

<p>
   new-cmp works!
</p>

ดังที่เห็นด้านบนเรามีโค้ด html คือแท็ก p ไฟล์สไตล์ว่างเปล่าเนื่องจากเราไม่จำเป็นต้องมีสไตล์ใด ๆ ในปัจจุบัน แต่เมื่อเราเรียกใช้โปรเจ็กต์เราไม่เห็นสิ่งที่เกี่ยวข้องกับองค์ประกอบใหม่ที่แสดงในเบราว์เซอร์ ตอนนี้ให้เราเพิ่มบางอย่างและสามารถมองเห็นสิ่งเดียวกันได้ในเบราว์เซอร์ในภายหลัง

ตัวเลือกกล่าวคือ app-new-cmp จะต้องเพิ่มในไฟล์ app.component .html ไฟล์ดังนี้ -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<app-new-cmp></app-new-cmp>

เมื่อ <app-new-cmp></app-new-cmp> เพิ่มแท็กทั้งหมดที่มีอยู่ในไฟล์. html ขององค์ประกอบใหม่ที่สร้างขึ้นจะแสดงบนเบราว์เซอร์พร้อมกับข้อมูลองค์ประกอบหลัก

ให้เราดู new component .html ไฟล์และไฟล์ new-cmp.component.ts ไฟล์.

new-cmp.component.ts

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

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

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

ในคลาสเราได้เพิ่มตัวแปรหนึ่งตัวที่เรียกว่าองค์ประกอบใหม่และค่าคือ“Entered in new component created”.

ตัวแปรข้างต้นถูกผูกไว้ในไฟล์ .new-cmp.component.html ไฟล์ดังนี้ -

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

ตอนนี้เนื่องจากเราได้รวมไฟล์ <app-new-cmp></app-new-cmp> ตัวเลือกในไฟล์ app. component .html ซึ่งเป็น. html ขององค์ประกอบหลักเนื้อหาที่อยู่ในไฟล์. html คอมโพเนนต์ใหม่ (new-cmp.component.html) จะแสดงบนเบราว์เซอร์ดังนี้ -

ในทำนองเดียวกันเราสามารถสร้างส่วนประกอบและเชื่อมโยงสิ่งเดียวกันโดยใช้ตัวเลือกในไฟล์ app.component.html ไฟล์ตามความต้องการของเรา

Module ใน Angular หมายถึงสถานที่ที่คุณสามารถจัดกลุ่มส่วนประกอบคำสั่งท่อและบริการซึ่งเกี่ยวข้องกับแอปพลิเคชัน

ในกรณีที่คุณกำลังพัฒนาเว็บไซต์ส่วนหัวส่วนท้ายด้านซ้ายตรงกลางและด้านขวาจะกลายเป็นส่วนหนึ่งของโมดูล

ในการกำหนดโมดูลเราสามารถใช้ไฟล์ NgModule. เมื่อคุณสร้างโปรเจ็กต์ใหม่โดยใช้คำสั่ง Angular –cli ngmodule จะถูกสร้างขึ้นในไฟล์ app.module.ts ตามค่าเริ่มต้นและมีลักษณะดังนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

ต้องนำเข้า NgModule ดังนี้ -

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

โครงสร้างของ ngmodule ดังแสดงด้านล่าง -

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

เริ่มต้นด้วย @NgModule และมีวัตถุที่มีการประกาศการนำเข้าผู้ให้บริการและ bootstrap

คำประกาศ

เป็นอาร์เรย์ของส่วนประกอบที่สร้างขึ้น หากมีการสร้างส่วนประกอบใหม่ส่วนประกอบนั้นจะถูกนำเข้าก่อนและการอ้างอิงจะรวมอยู่ในการประกาศดังที่แสดงด้านล่าง -

declarations: [
   AppComponent,
   NewCmpComponent
]

นำเข้า

เป็นอาร์เรย์ของโมดูลที่ต้องใช้ในแอปพลิเคชัน นอกจากนี้ยังสามารถใช้โดยคอมโพเนนต์ในอาร์เรย์การประกาศ ตัวอย่างเช่นตอนนี้ใน @NgModule เราเห็นโมดูลเบราว์เซอร์ที่นำเข้า ในกรณีที่ใบสมัครของคุณต้องการแบบฟอร์มคุณสามารถรวมโมดูลได้ดังนี้ -

import { FormsModule } from '@angular/forms';

การนำเข้าในไฟล์ @NgModule จะเป็นดังต่อไปนี้ -

imports: [
   BrowserModule,
   FormsModule
]

ผู้ให้บริการ

ซึ่งจะรวมถึงบริการที่สร้างขึ้น

Bootstrap

ซึ่งรวมถึงส่วนประกอบหลักของแอปสำหรับเริ่มการดำเนินการ

การผูกข้อมูลสามารถใช้ได้จาก AngularJS, Angular 2 และตอนนี้มีให้บริการใน Angular 4 แล้วเช่นกัน เราใช้วงเล็บปีกกาในการผูกข้อมูล - {{}}; กระบวนการนี้เรียกว่าการแก้ไข เราได้เห็นแล้วในตัวอย่างก่อนหน้านี้ของเราว่าเราประกาศค่าให้กับชื่อตัวแปรได้อย่างไรและจะพิมพ์สิ่งเดียวกันในเบราว์เซอร์

ตัวแปรใน app.component.html ไฟล์เรียกว่า {{title}} และค่าของชื่อจะเริ่มต้นในไฟล์ app.component.ts ไฟล์และใน app.component.htmlค่าจะปรากฏขึ้น

ตอนนี้ให้เราสร้างรายการแบบเลื่อนลงของเดือนในเบราว์เซอร์ ในการทำเช่นนั้นเราได้สร้างอาร์เรย์ของเดือนในapp.component.ts ดังต่อไปนี้ -

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", 
            "June", "July", "August", "September",
            "October", "November", "December"];
}

อาร์เรย์ของเดือนที่แสดงด้านบนจะแสดงในเมนูแบบเลื่อนลงในเบราว์เซอร์ สำหรับสิ่งนี้เราจะใช้โค้ดบรรทัดต่อไปนี้ -

<!--The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>

เราได้สร้างแท็กเลือกปกติพร้อมตัวเลือก ในตัวเลือกเราได้ใช้ไฟล์for loop. for loop ใช้เพื่อวนซ้ำอาร์เรย์ของเดือนซึ่งจะสร้างแท็กตัวเลือกที่มีค่าปัจจุบันเป็นเดือน

ไวยากรณ์ for ใน Angular คือ *ngFor = “let I of months” และเพื่อรับค่าของเดือนที่เราแสดงใน {{i}}

วงเล็บปีกกาสองตัวช่วยในการผูกข้อมูล คุณประกาศตัวแปรในไฟล์app.component.ts ไฟล์และไฟล์เดียวกันจะถูกแทนที่โดยใช้วงเล็บปีกกา

ให้เราดูผลลัพธ์ของอาร์เรย์ของเดือนข้างต้นในเบราว์เซอร์

ตัวแปรที่ตั้งค่าใน app.component.ts สามารถผูกกับ app.component.htmlใช้วงเล็บปีกกา ตัวอย่างเช่น,{{}}.

ตอนนี้ให้เราแสดงข้อมูลในเบราว์เซอร์ตามเงื่อนไข ที่นี่เราได้เพิ่มตัวแปรและกำหนดค่าให้เป็นจริง การใช้คำสั่ง if เราสามารถซ่อน / แสดงเนื้อหาที่จะแสดงได้

ตัวอย่าง

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;   //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable">Condition is valid.</span> 
   //over here based on if condition the text condition is valid is displayed. 
   If the value of isavailable is set to false it will not display the text.
</div>

เอาต์พุต

ให้เราลองใช้ตัวอย่างข้างต้นโดยใช้ IF THEN ELSE เงื่อนไข.

ตัวอย่าง

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
}

ในกรณีนี้เราได้สร้างไฟล์ isavailableตัวแปรเป็นเท็จ ในการพิมพ์ไฟล์else เงื่อนไขเราจะต้องสร้างไฟล์ ng-template ดังต่อไปนี้ -

<ng-template #condition1>Condition is invalid</ng-template>

โค้ดแบบเต็มมีลักษณะดังนี้ -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; else condition1">Condition is valid.</span>
   <ng-template #condition1>Condition is invalid</ng-template>
</div>

If ใช้กับเงื่อนไขอื่นและตัวแปรที่ใช้คือ condition1. เช่นเดียวกับที่กำหนดให้เป็นไฟล์id ไปที่ ng-templateและเมื่อตัวแปรที่พร้อมใช้งานถูกตั้งค่าเป็นเท็จข้อความ Condition is invalid จะปรากฏขึ้น

ภาพหน้าจอต่อไปนี้แสดงการแสดงผลในเบราว์เซอร์

ให้เราใช้ไฟล์ if then else เงื่อนไข.

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
}

ตอนนี้เราจะสร้างตัวแปร isavailableตามความเป็นจริง ใน html เงื่อนไขจะถูกเขียนด้วยวิธีต่อไปนี้ -

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

ถ้าตัวแปรเป็นจริงดังนั้น condition1อื่น ๆ condition2. ตอนนี้เทมเพลตสองแบบถูกสร้างขึ้นด้วย id#condition1 และ #condition2.

การแสดงผลในเบราว์เซอร์มีดังนี้ -

ในบทนี้เราจะพูดถึงวิธีการทำงานของ Event Binding ใน Angular 4 เมื่อผู้ใช้โต้ตอบกับแอพพลิเคชั่นในรูปแบบของการเคลื่อนคีย์บอร์ดการคลิกเมาส์หรือการวางเมาส์โอเวอร์จะสร้างเหตุการณ์ เหตุการณ์เหล่านี้จำเป็นต้องได้รับการจัดการเพื่อดำเนินการบางอย่าง นี่คือที่ที่การรวมเหตุการณ์เข้ามาในรูปภาพ

ให้เราพิจารณาตัวอย่างเพื่อทำความเข้าใจเรื่องนี้ให้ดีขึ้น

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click)="myClickFunction($event)">
   Click Me
</button>

ใน app.component.html เราได้กำหนดปุ่มและเพิ่มฟังก์ชั่นโดยใช้เหตุการณ์คลิก

ต่อไปนี้เป็นไวยากรณ์เพื่อกำหนดปุ่มและเพิ่มฟังก์ชันเข้าไป

(click)="myClickFunction($event)"

ฟังก์ชันถูกกำหนดไว้ในไฟล์ .ts ไฟล์: app.component.ts

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

เมื่อคลิกปุ่มตัวควบคุมจะมาที่ฟังก์ชัน myClickFunction และกล่องโต้ตอบจะปรากฏขึ้นซึ่งจะปรากฏขึ้น the Button is clicked ดังที่แสดงในภาพหน้าจอต่อไปนี้ -

ให้เราเพิ่มเหตุการณ์การเปลี่ยนแปลงลงในเมนูแบบเลื่อนลง

โค้ดบรรทัดต่อไปนี้จะช่วยให้คุณเพิ่มเหตุการณ์การเปลี่ยนแปลงลงในเมนูแบบเลื่อนลง -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>

<button (click) = "myClickFunction($event)">Click Me</button>

มีการประกาศฟังก์ชันในรูปแบบ app.component.ts ไฟล์ -

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "Feburary", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

ข้อความคอนโซล“Changed month from the Dropdown” จะแสดงในคอนโซลพร้อมกับเหตุการณ์

ให้เราเพิ่มข้อความแจ้งเตือนใน app.component.ts เมื่อค่าจากดรอปดาวน์มีการเปลี่ยนแปลงดังที่แสดงด้านล่าง -

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
         "May", "June", "July", "August", "September",
         "October", "November", "December"];
   
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser 
      on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

เมื่อค่าในดรอปดาวน์มีการเปลี่ยนแปลงกล่องโต้ตอบจะปรากฏขึ้นและข้อความต่อไปนี้จะปรากฏขึ้น -“Changed month from the Dropdown”.

Angular 4 ใช้ไฟล์ <ng-template> เป็นแท็กแทน <template>ซึ่งใช้ใน Angular2 เหตุผลที่ Angular 4 เปลี่ยนไป<template> ถึง <ng-template> เป็นเพราะมีความขัดแย้งของชื่อระหว่างไฟล์ <template> แท็กและ html <template>แท็กมาตรฐาน จะเลิกใช้งานอย่างสมบูรณ์ในอนาคต นี่คือหนึ่งในการเปลี่ยนแปลงที่สำคัญใน Angular 4

ให้เราใช้เทมเพลตพร้อมกับไฟล์ if else เงื่อนไขและดูผลลัพธ์

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

สำหรับแท็ก Span เราได้เพิ่มไฟล์ if คำสั่งกับ else condition และจะเรียก template condition1, else condition2

เทมเพลตจะถูกเรียกดังต่อไปนี้ -

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

หากเงื่อนไขเป็นจริงเทมเพลต condition1 จะถูกเรียกใช้มิฉะนั้น condition2

app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

ผลลัพธ์ในเบราว์เซอร์มีดังนี้ -

ตัวแปร isavailableเป็นเท็จดังนั้นเทมเพลต condition2 จึงถูกพิมพ์ หากคุณคลิกปุ่มจะมีการเรียกเทมเพลตตามลำดับ หากคุณตรวจสอบเบราว์เซอร์คุณจะเห็นว่าคุณไม่เคยได้รับแท็ก span ในโดเมน ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจสิ่งเดียวกัน

หากคุณตรวจสอบเบราว์เซอร์คุณจะเห็นว่า dom ไม่มีแท็ก span มันมีCondition is invalid from template ในโดม

บรรทัดของโค้ดต่อไปนี้ใน html จะช่วยให้เราได้รับแท็ก span ในโดเมน

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>

<button (click)="myClickFunction($event)">Click Me</button>

หากเราลบเงื่อนไขนั้นออกเราจะได้รับ “Condition is valid”นอกจากนี้ยังมีข้อความในเบราว์เซอร์และแท็ก span ในโดเมน ตัวอย่างเช่นในapp.component.tsเราได้สร้างไฟล์ isavailable ตัวแปรเป็นจริง

Directives ใน Angular คือไฟล์ js คลาสซึ่งประกาศเป็น @directive. เรามี 3 คำสั่งในเชิงมุม คำสั่งดังต่อไปนี้ -

คำสั่งส่วนประกอบ

รูปแบบเหล่านี้เป็นคลาสหลักที่มีรายละเอียดเกี่ยวกับวิธีการประมวลผลส่วนประกอบสร้างอินสแตนซ์และใช้ในรันไทม์

คำสั่งโครงสร้าง

คำสั่งโครงสร้างโดยทั่วไปเกี่ยวข้องกับการจัดการองค์ประกอบ dom คำสั่งโครงสร้างมีเครื่องหมาย * อยู่ข้างหน้าคำสั่ง ตัวอย่างเช่น,*ngIf และ *ngFor.

คำสั่งคุณสมบัติ

คำสั่งแอตทริบิวต์จัดการกับการเปลี่ยนรูปลักษณ์และพฤติกรรมขององค์ประกอบ dom คุณสามารถสร้างคำสั่งของคุณเองดังที่แสดงด้านล่าง

วิธีสร้างคำสั่งที่กำหนดเอง

ในส่วนนี้เราจะพูดถึงคำสั่งที่กำหนดเองที่จะใช้ในส่วนประกอบ เราสร้างคำสั่งที่กำหนดเองและไม่ได้มาตรฐาน

ให้เราดูวิธีสร้างคำสั่งที่กำหนดเอง เราจะสร้างคำสั่งโดยใช้บรรทัดคำสั่ง คำสั่งในการสร้างคำสั่งโดยใช้บรรทัดคำสั่งคือ -

ng g directive nameofthedirective

e.g

ng g directive changeText

นี่คือลักษณะที่ปรากฏในบรรทัดคำสั่ง

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

ไฟล์ข้างต้นกล่าวคือ change-text.directive.spec.ts และ change-text.directive.ts ได้รับการสร้างและ app.module.ts อัปเดตไฟล์แล้ว

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

ChangeTextDirectiveคลาสจะรวมอยู่ในการประกาศในไฟล์ด้านบน นอกจากนี้ยังมีการนำเข้าคลาสจากไฟล์ที่ระบุด้านล่าง

เปลี่ยนข้อความ คำสั่ง

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

ไฟล์ด้านบนมีคำสั่งและยังมีคุณสมบัติตัวเลือก สิ่งที่เรากำหนดในตัวเลือกสิ่งเดียวกันจะต้องตรงกันในมุมมองที่เรากำหนดคำสั่งที่กำหนดเอง

ใน app.component.html ดูให้เราเพิ่มคำสั่งดังต่อไปนี้ -

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

เราจะเขียนการเปลี่ยนแปลงใน change-text.directive.ts ไฟล์ดังนี้ -

เปลี่ยน text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

ในไฟล์ด้านบนมีคลาสที่เรียกว่า ChangeTextDirective และตัวสร้างซึ่งรับองค์ประกอบประเภท ElementRefซึ่งเป็นข้อบังคับ องค์ประกอบมีรายละเอียดทั้งหมดที่Change Text ใช้คำสั่ง

เราได้เพิ่มไฟล์ console.logธาตุ. ผลลัพธ์เดียวกันสามารถเห็นได้ในคอนโซลเบราว์เซอร์ ข้อความขององค์ประกอบยังเปลี่ยนแปลงตามที่แสดงด้านบน

ตอนนี้เบราว์เซอร์จะแสดงสิ่งต่อไปนี้

ในบทนี้เราจะพูดถึงท่อใน Angular 4 คืออะไรก่อนหน้านี้เรียกว่า Pipes ใน Angular1 และเรียกว่าไพพ์ใน Angular 2 และ 4

เดอะ | อักขระใช้ในการแปลงข้อมูล ต่อไปนี้เป็นไวยากรณ์สำหรับสิ่งเดียวกัน

{{ Welcome to Angular 4 | lowercase}}

ใช้จำนวนเต็มสตริงอาร์เรย์และวันที่เป็นอินพุตที่คั่นด้วย | จะถูกแปลงในรูปแบบตามที่ต้องการและแสดงสิ่งเดียวกันในเบราว์เซอร์

ให้เราพิจารณาตัวอย่างเล็กน้อยโดยใช้ท่อ

ที่นี่เราต้องการแสดงข้อความที่กำหนดให้เป็นตัวพิมพ์ใหญ่ สามารถทำได้โดยใช้ท่อดังนี้ -

ใน app.component.ts ไฟล์เราได้กำหนดตัวแปรหัวเรื่อง -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

โค้ดบรรทัดต่อไปนี้จะเข้าสู่ไฟล์ app.component.html ไฟล์.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

เบราว์เซอร์จะปรากฏดังที่แสดงในภาพหน้าจอต่อไปนี้ -

Angular 4 มีท่อในตัว ท่ออยู่ด้านล่าง -

Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

เราได้เห็นท่อตัวพิมพ์เล็กและตัวพิมพ์ใหญ่แล้ว ตอนนี้ให้เราดูว่าท่ออื่น ๆ ทำงานอย่างไร

โค้ดบรรทัดต่อไปนี้จะช่วยให้เรากำหนดตัวแปรที่ต้องการใน app.component.ts ไฟล์ -

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

เราจะใช้ท่อใน app.component.html ไฟล์.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

ภาพหน้าจอต่อไปนี้แสดงเอาต์พุตสำหรับแต่ละท่อ -

จะสร้างท่อแบบกำหนดเองได้อย่างไร?

ในการสร้างไปป์ที่กำหนดเองเราได้สร้างไฟล์ tsไฟล์. ที่นี่เราต้องการสร้างไฟล์sqrtท่อที่กำหนดเอง เราตั้งชื่อไฟล์ให้เหมือนกันและมีลักษณะดังนี้ -

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

ในการสร้างท่อที่กำหนดเองเราต้องนำเข้า Pipe และ Pipe Transform จาก Angular / core ในคำสั่ง @Pipe เราต้องตั้งชื่อให้กับไพพ์ของเราซึ่งจะใช้ในไฟล์. html ของเรา เนื่องจากเรากำลังสร้างท่อ sqrt เราจึงตั้งชื่อว่า sqrt

เมื่อเราดำเนินการต่อไปเราจะต้องสร้างคลาสและชื่อคลาสคือ SqrtPipe. คลาสนี้จะใช้PipeTransform.

วิธีการแปลงที่กำหนดไว้ในคลาสจะใช้อาร์กิวเมนต์เป็นจำนวนและจะส่งกลับตัวเลขหลังจากการหารากที่สอง

เนื่องจากเราได้สร้างไฟล์ใหม่เราจึงต้องเพิ่มไฟล์ app.module.ts. ทำได้ดังนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

เราได้สร้างไฟล์ app.sqrt.tsชั้นเรียน เราต้องนำเข้าเหมือนกันในapp.module.tsและระบุเส้นทางของไฟล์ นอกจากนี้ยังต้องรวมอยู่ในประกาศดังที่แสดงไว้ด้านบน

ตอนนี้ให้เราดูการโทรไปยังท่อ sqrt ในไฟล์ app.component.html ไฟล์.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

ผลลัพธ์มีลักษณะดังนี้ -

การกำหนดเส้นทางโดยทั่วไปหมายถึงการนำทางระหว่างหน้าต่างๆ คุณได้เห็นเว็บไซต์จำนวนมากที่มีลิงก์ที่นำคุณไปยังหน้าใหม่ สามารถทำได้โดยใช้การกำหนดเส้นทาง ที่นี่หน้าที่เราอ้างถึงจะอยู่ในรูปแบบของส่วนประกอบ เราได้เห็นวิธีการสร้างส่วนประกอบแล้ว ตอนนี้ให้เราสร้างส่วนประกอบและดูวิธีใช้การกำหนดเส้นทางกับมัน

ในองค์ประกอบหลักหลัก app.module.tsตอนนี้เราต้องรวมโมดูลเราเตอร์ดังที่แสดงด้านล่าง -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

นำเข้า {RouterModule} จาก "@ angular / router"

ที่นี่ RouterModule นำเข้าจาก angular / router โมดูลนี้รวมอยู่ในการนำเข้าดังที่แสดงด้านล่าง -

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule หมายถึงไฟล์ forRootซึ่งรับอินพุตเป็นอาร์เรย์ซึ่งจะมีวัตถุของเส้นทางและส่วนประกอบ Path คือชื่อของเราเตอร์และส่วนประกอบคือชื่อของคลาสกล่าวคือส่วนประกอบที่สร้างขึ้น

ให้เราดูไฟล์ที่สร้างส่วนประกอบ -

ใหม่-cmp.component.ts

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

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

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

คลาสที่ไฮไลต์ถูกกล่าวถึงในการนำเข้าของโมดูลหลัก

ใหม่-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

ตอนนี้เราต้องการเนื้อหาข้างต้นจากไฟล์ html เพื่อแสดงทุกครั้งที่ต้องการหรือคลิกจากโมดูลหลัก สำหรับสิ่งนี้เราต้องเพิ่มรายละเอียดเราเตอร์ในไฟล์app.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>

<br />
<br/>
<router-outlet></router-outlet>

ในโค้ดด้านบนเราได้สร้างแท็ก anchor link และกำหนด routerLink เป็น “new-cmp”. สิ่งนี้ถูกอ้างถึงในapp.module.ts เป็นเส้นทาง

เมื่อผู้ใช้คลิก new componentหน้าควรแสดงเนื้อหา สำหรับสิ่งนี้เราต้องการแท็กต่อไปนี้ -<router-outlet> </router-outlet>.

แท็กด้านบนช่วยให้มั่นใจได้ว่าเนื้อหาในไฟล์ new-cmp.component.html จะแสดงบนเพจเมื่อผู้ใช้คลิก new component.

ตอนนี้ให้เราดูว่าผลลัพธ์จะแสดงบนเบราว์เซอร์อย่างไร

เมื่อผู้ใช้คลิกองค์ประกอบใหม่คุณจะเห็นสิ่งต่อไปนี้ในเบราว์เซอร์

URL ประกอบด้วย http://localhost:4200/new-cmp. ที่นี่ cmp ใหม่จะต่อท้าย url เดิมซึ่งเป็นเส้นทางที่กำหนดในไฟล์app.module.ts และเราเตอร์ลิงค์ในไฟล์ app.component.html.

เมื่อผู้ใช้คลิกส่วนประกอบใหม่เพจจะไม่รีเฟรชและเนื้อหาจะแสดงต่อผู้ใช้โดยไม่ต้องโหลดซ้ำ เฉพาะส่วนหนึ่งของโค้ดไซต์เท่านั้นที่จะถูกโหลดซ้ำเมื่อคลิก คุณลักษณะนี้ช่วยเมื่อเรามีเนื้อหาจำนวนมากบนหน้าเว็บและจำเป็นต้องโหลดตามการโต้ตอบของผู้ใช้ คุณลักษณะนี้ยังช่วยให้ผู้ใช้ได้รับประสบการณ์ที่ดีเนื่องจากไม่ได้โหลดหน้านี้ซ้ำ

ในบทนี้เราจะพูดถึงบริการใน Angular 4

เราอาจเจอสถานการณ์ที่เราต้องการโค้ดบางอย่างเพื่อใช้งานได้ทุกที่ในเพจ สามารถใช้สำหรับการเชื่อมต่อข้อมูลที่ต้องใช้ร่วมกันระหว่างส่วนประกอบต่างๆเป็นต้นบริการต่างๆช่วยให้เราบรรลุเป้าหมายนั้นได้ ด้วยบริการเราสามารถเข้าถึงวิธีการและคุณสมบัติของส่วนประกอบอื่น ๆ ในโครงการทั้งหมด

ในการสร้างบริการเราจำเป็นต้องใช้ประโยชน์จากบรรทัดคำสั่ง คำสั่งเดียวกันคือ -

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

ไฟล์ถูกสร้างขึ้นในโฟลเดอร์แอพดังต่อไปนี้ -

ต่อไปนี้เป็นไฟล์ที่สร้างขึ้นที่ด้านล่าง - myservice.service.specs.ts และ myservice.service.ts.

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

ที่นี่โมดูล Injectable จะถูกนำเข้าจากไฟล์ @angular/core. ประกอบด้วยไฟล์@Injectable วิธีการและคลาสที่เรียกว่า MyserviceService. เราจะสร้างฟังก์ชันการบริการของเราในคลาสนี้

ก่อนที่จะสร้างบริการใหม่เราจำเป็นต้องรวมบริการที่สร้างไว้ในพาเรนต์หลัก app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

เราได้นำเข้าบริการที่มีชื่อคลาสและใช้คลาสเดียวกันในผู้ให้บริการ ตอนนี้ให้เราเปลี่ยนกลับไปใช้คลาสบริการและสร้างฟังก์ชันบริการ

ในคลาสบริการเราจะสร้างฟังก์ชันซึ่งจะแสดงวันที่ของวันนี้ เราสามารถใช้ฟังก์ชันเดียวกันในองค์ประกอบหลักหลักapp.component.ts และในส่วนประกอบใหม่ new-cmp.component.ts ที่เราสร้างไว้ในบทที่แล้ว

ตอนนี้ให้เราดูว่าฟังก์ชันมีลักษณะอย่างไรในบริการและวิธีการใช้งานในส่วนประกอบ

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

ในไฟล์บริการด้านบนเราได้สร้างฟังก์ชัน showTodayDate. ตอนนี้เราจะส่งคืนวันที่ () ใหม่ที่สร้างขึ้น ให้เราดูว่าเราสามารถเข้าถึงฟังก์ชันนี้ในคลาสส่วนประกอบได้อย่างไร

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

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

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

ngOnInitฟังก์ชันถูกเรียกโดยค่าเริ่มต้นในส่วนประกอบใด ๆ ที่สร้างขึ้น วันที่ดึงมาจากบริการดังที่แสดงด้านบน ในการดึงรายละเอียดเพิ่มเติมของบริการเราต้องรวมบริการไว้ในส่วนประกอบก่อนts ไฟล์.

เราจะแสดงวันที่ใน .html ไฟล์ดังรูปด้านล่าง -

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

ตอนนี้ให้เราดูวิธีใช้บริการในองค์ประกอบใหม่ที่สร้างขึ้น

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

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

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

ในส่วนประกอบใหม่ที่เราสร้างขึ้นเราต้องนำเข้าบริการที่เราต้องการก่อนและเข้าถึงวิธีการและคุณสมบัติของสิ่งเดียวกัน โปรดดูรหัสที่ไฮไลต์ วันนี้จะแสดงใน html ของคอมโพเนนต์ดังนี้ -

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

ตัวเลือกขององค์ประกอบใหม่ถูกใช้ในไฟล์ app.component.htmlไฟล์. เนื้อหาจากไฟล์ html ด้านบนจะแสดงในเบราว์เซอร์ดังที่แสดงด้านล่าง -

หากคุณเปลี่ยนคุณสมบัติของบริการในส่วนประกอบใด ๆ ส่วนประกอบอื่นก็จะเปลี่ยนไปเช่นกัน ตอนนี้ให้เราดูว่ามันทำงานอย่างไร

เราจะกำหนดตัวแปรหนึ่งตัวในบริการและใช้ในพาเรนต์และคอมโพเนนต์ใหม่ เราจะเปลี่ยนคุณสมบัติอีกครั้งในองค์ประกอบหลักและจะดูว่ามีการเปลี่ยนแปลงในองค์ประกอบใหม่หรือไม่

ใน myservice.service.tsเราได้สร้างคุณสมบัติและใช้สิ่งเดียวกันในองค์ประกอบหลักอื่น ๆ และองค์ประกอบใหม่

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

ให้เราใช้ไฟล์ servicepropertyตัวแปรในส่วนประกอบอื่น ๆ ในapp.component.tsเรากำลังเข้าถึงตัวแปรดังนี้ -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created"; // value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

ตอนนี้เราจะดึงตัวแปรและทำงานบน console.log ในบรรทัดถัดไปเราจะเปลี่ยนค่าของตัวแปรเป็น“component created”. เราจะทำเช่นเดียวกันในnew-cmp.component.ts.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

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

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

ในองค์ประกอบข้างต้นเราไม่ได้เปลี่ยนแปลงอะไรนอกจากกำหนดคุณสมบัติให้กับคุณสมบัติของคอมโพเนนต์โดยตรง

ตอนนี้เมื่อคุณดำเนินการในเบราว์เซอร์คุณสมบัติบริการจะเปลี่ยนไปเนื่องจากค่าของมันถูกเปลี่ยนใน app.component.ts และสิ่งเดียวกันนี้จะปรากฏขึ้นสำหรับไฟล์ new-cmp.component.ts.

ตรวจสอบค่าในคอนโซลก่อนที่จะมีการเปลี่ยนแปลง

บริการ Http จะช่วยให้เราดึงข้อมูลภายนอกโพสต์ลงในข้อมูล ฯลฯ เราจำเป็นต้องนำเข้าโมดูล http เพื่อใช้ประโยชน์จากบริการ http ให้เราพิจารณาตัวอย่างเพื่อทำความเข้าใจวิธีการใช้บริการ http

ในการเริ่มใช้บริการ http เราต้องนำเข้าโมดูลใน app.module.ts ดังแสดงด้านล่าง -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

หากคุณเห็นโค้ดที่ไฮไลต์แสดงว่าเราได้นำเข้า HttpModule จาก @ angular / http และยังเพิ่มโค้ดเดียวกันในอาร์เรย์การนำเข้าด้วย

ให้เราใช้บริการ http ในไฟล์ app.component.ts.

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

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

export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

ให้เราเข้าใจโค้ดที่เน้นด้านบน เราจำเป็นต้องนำเข้า http เพื่อใช้บริการซึ่งทำได้ดังนี้ -

import { Http } from '@angular/http';

ในห้องเรียน AppComponentตัวสร้างถูกสร้างขึ้นและตัวแปรส่วนตัว http ประเภท Http ในการดึงข้อมูลเราจำเป็นต้องใช้ไฟล์get API ใช้ได้กับ http ดังต่อไปนี้

this.http.get();

ต้องดึง url เป็นพารามิเตอร์ตามที่แสดงในโค้ด

เราจะใช้ URL ทดสอบ - https://jsonplaceholder.typicode.com/usersเพื่อดึงข้อมูล json การดำเนินการสองอย่างจะดำเนินการบนแผนที่ข้อมูล url ที่ดึงมาและสมัครสมาชิก วิธีแผนที่ช่วยในการแปลงข้อมูลเป็นรูปแบบ json ในการใช้แผนที่เราจำเป็นต้องนำเข้าเช่นเดียวกับที่แสดงด้านล่าง -

import 'rxjs/add/operator/map';

เมื่อแผนที่เสร็จสิ้นการสมัครสมาชิกจะบันทึกผลลัพธ์ในคอนโซลตามที่แสดงในเบราว์เซอร์ -

หากคุณเห็นอ็อบเจ็กต์ json จะแสดงในคอนโซล วัตถุสามารถแสดงในเบราว์เซอร์ได้เช่นกัน

สำหรับวัตถุที่จะแสดงในเบราว์เซอร์ให้อัปเดตรหัสใน app.component.html และ app.component.ts ดังต่อไปนี้ -

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

ใน app.component.tsโดยใช้วิธีสมัครสมาชิกเราจะเรียกว่าวิธีการแสดงข้อมูลและส่งข้อมูลที่ดึงมาเป็นพารามิเตอร์ไป

ในวิธีการแสดงข้อมูลเราจะจัดเก็บข้อมูลใน httpdata ตัวแปร ข้อมูลจะแสดงในเบราว์เซอร์โดยใช้for เหนือตัวแปร httpdata ซึ่งทำในไฟล์ app.component.html ไฟล์.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

วัตถุ json มีดังนี้ -

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

วัตถุมีคุณสมบัติเช่นรหัสชื่อชื่อผู้ใช้อีเมลและที่อยู่ภายในซึ่งมีถนนเมือง ฯลฯ และรายละเอียดอื่น ๆ ที่เกี่ยวข้องกับโทรศัพท์เว็บไซต์และ บริษัท ใช้for เราจะแสดงชื่อและรายละเอียดเมืองในเบราว์เซอร์ดังที่แสดงในไฟล์ app.component.html ไฟล์.

นี่คือการแสดงผลในเบราว์เซอร์ -

ตอนนี้ให้เราเพิ่มพารามิเตอร์การค้นหาซึ่งจะกรองตามข้อมูลเฉพาะ เราจำเป็นต้องดึงข้อมูลตามพารามิเตอร์การค้นหาที่ส่งผ่าน

ต่อไปนี้เป็นการเปลี่ยนแปลงที่ทำใน app.component.html และ app.component.ts ไฟล์ -

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

สำหรับ get apiเราจะเพิ่มพารามิเตอร์การค้นหา id = this.searchparam searchparam เท่ากับ 2 เราต้องการรายละเอียดของid=2 จากไฟล์ json

app.component.html

{{name}}

นี่คือวิธีแสดงเบราว์เซอร์ -

เราได้รวบรวมข้อมูลในเบราว์เซอร์ซึ่งได้รับจาก http สิ่งเดียวกันนี้จะปรากฏในคอนโซลของเบราว์เซอร์ ชื่อจาก json ด้วยid=2 จะปรากฏในเบราว์เซอร์

ในบทนี้เราจะดูวิธีใช้ฟอร์มใน Angular 4 เราจะพูดถึงสองวิธีในการทำงานกับฟอร์ม - เทมเพลตที่ขับเคลื่อนด้วยฟอร์มและฟอร์มที่ขับเคลื่อนด้วยโมเดล

แบบฟอร์มการขับเคลื่อนเทมเพลต

ด้วยเทมเพลตที่ขับเคลื่อนด้วยฟอร์มงานส่วนใหญ่จะทำในเทมเพลต และด้วยรูปแบบที่ขับเคลื่อนด้วยโมเดลงานส่วนใหญ่จะทำในคลาสส่วนประกอบ

ตอนนี้ให้เราพิจารณาการทำงานกับแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต เราจะสร้างแบบฟอร์มการเข้าสู่ระบบอย่างง่ายและเพิ่มรหัสอีเมลรหัสผ่านและส่งปุ่มในแบบฟอร์ม ในการเริ่มต้นเราต้องนำเข้าสู่ FormsModule จาก@angular/core ซึ่งทำใน app.module.ts ดังต่อไปนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

ดังนั้นใน app.module.tsเราได้นำเข้า FormsModule และสิ่งเดียวกันจะถูกเพิ่มเข้าไปในอาร์เรย์การนำเข้าดังที่แสดงในโค้ดที่ไฮไลต์

ให้เราสร้างแบบฟอร์มของเราในไฟล์ app.component.html ไฟล์.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

เราได้สร้างแบบฟอร์มที่เรียบง่ายโดยมีแท็กอินพุตที่มีรหัสอีเมลรหัสผ่านและปุ่มส่ง เราได้กำหนดประเภทชื่อและตัวยึดตำแหน่งให้แล้ว

ในเทมเพลตที่ขับเคลื่อนด้วยฟอร์มเราจำเป็นต้องสร้างตัวควบคุมฟอร์มโมเดลโดยการเพิ่มไฟล์ ngModel คำสั่งและ nameแอตทริบิวต์ ดังนั้นทุกที่ที่เราต้องการให้ Angular เข้าถึงข้อมูลของเราจากแบบฟอร์มให้เพิ่ม ngModel ลงในแท็กดังที่แสดงไว้ด้านบน ตอนนี้ถ้าเราต้องอ่าน emailid และ passwd เราจำเป็นต้องเพิ่ม ngModel ลงไป

หากคุณเห็นเราได้เพิ่ม ngForm ลงในไฟล์ #userlogin. ngFormต้องเพิ่มคำสั่งลงในเทมเพลตฟอร์ที่เราสร้างขึ้น เรายังได้เพิ่มฟังก์ชั่นonClickSubmit และได้รับมอบหมาย userlogin.value ไปเลย

ให้เราสร้างฟังก์ชันในไฟล์ app.component.ts และดึงค่าที่ป้อนในแบบฟอร์ม

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

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

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

ในข้างต้น app.component.tsไฟล์เราได้กำหนดฟังก์ชั่น onClickSubmit เมื่อคุณคลิกที่ปุ่มส่งแบบฟอร์มตัวควบคุมจะมาที่ฟังก์ชันด้านบน

นี่คือวิธีแสดงเบราว์เซอร์ -

แบบฟอร์มมีลักษณะดังภาพด้านล่าง ให้เราป้อนข้อมูลในนั้นและในฟังก์ชัน submit รหัสอีเมลจะถูกป้อนแล้ว

รหัสอีเมลจะปรากฏที่ด้านล่างตามที่แสดงในภาพหน้าจอด้านบน

แบบจำลองการขับเคลื่อน

ในรูปแบบที่ขับเคลื่อนด้วยโมเดลเราจำเป็นต้องนำเข้า ReactiveFormsModule จาก @ angular / รูปแบบและใช้แบบเดียวกันในอาร์เรย์การนำเข้า

มีการเปลี่ยนแปลงที่เข้ามา app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

ใน app.component.tsเราจำเป็นต้องนำเข้าโมดูลสองสามโมดูลสำหรับรูปแบบที่ขับเคลื่อนด้วยโมเดล ตัวอย่างเช่น,import { FormGroup, FormControl } from '@angular/forms'.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

formdata ตัวแปรถูกเตรียมใช้งานเมื่อเริ่มต้นคลาสและสิ่งเดียวกันนี้จะเริ่มต้นด้วย FormGroup ดังที่แสดงด้านบน ตัวแปร emailid และ passwd เริ่มต้นด้วยค่าเริ่มต้นที่จะแสดงในรูปแบบ คุณสามารถเว้นว่างไว้ได้ในกรณีที่คุณต้องการ

นี่คือค่าที่จะเห็นใน UI แบบฟอร์ม

เราได้ใช้ formdata เพื่อเริ่มต้นค่าแบบฟอร์ม เราจำเป็นต้องใช้สิ่งเดียวกันใน UI แบบฟอร์มapp.component.html.

<div>
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type="text" class="fortextbox" name="emailid" placeholder="emailid" 
      formControlName="emailid">
      <br/>
      
      <input type="password" class="fortextbox" name="passwd" 
      placeholder="passwd" formControlName="passwd">
      <br/>
      
      <input type="submit" class="forsubmit" value="Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

ในไฟล์. html เราได้ใช้ formGroup ในวงเล็บเหลี่ยมสำหรับฟอร์ม ตัวอย่างเช่น [formGroup] =” formdata” เมื่อส่งฟังก์ชันจะถูกเรียกใช้onClickSubmit ซึ่ง formdata.value ถูกส่งผ่าน

แท็กอินพุต formControlNameถูกนำมาใช้. ได้รับค่าที่เราใช้ในไฟล์app.component.ts ไฟล์.

เมื่อคลิกส่งตัวควบคุมจะส่งผ่านไปยังฟังก์ชัน onClickSubmitซึ่งกำหนดไว้ในไฟล์ app.component.ts ไฟล์.

เมื่อคลิกเข้าสู่ระบบค่าจะแสดงดังที่แสดงในภาพหน้าจอด้านบน

การตรวจสอบแบบฟอร์ม

ตอนนี้ให้เราหารือเกี่ยวกับการตรวจสอบแบบฟอร์มโดยใช้แบบจำลองที่ขับเคลื่อนด้วยฟอร์ม คุณสามารถใช้การตรวจสอบความถูกต้องของฟอร์มในตัวหรือใช้วิธีการตรวจสอบความถูกต้องแบบกำหนดเอง เราจะใช้ทั้งสองแนวทางในรูปแบบ เราจะดำเนินการต่อด้วยตัวอย่างเดียวกับที่เราสร้างไว้ในส่วนก่อนหน้าของเรา ด้วย Angular 4 เราจำเป็นต้องนำเข้า Validators จาก@angular/forms ดังแสดงด้านล่าง -

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

Angular มีตัวตรวจสอบความถูกต้องในตัวเช่น mandatory field, minlength, maxlengthและ pattern. สิ่งเหล่านี้สามารถเข้าถึงได้โดยใช้โมดูล Validators

คุณสามารถเพิ่มตัวตรวจสอบความถูกต้องหรืออาร์เรย์ของตัวตรวจสอบความถูกต้องที่จำเป็นเพื่อบอก Angular ว่าฟิลด์ใดฟิลด์หนึ่งจำเป็นหรือไม่

ตอนนี้ให้เราลองทำแบบเดียวกันกับช่องป้อนข้อความเช่นรหัสอีเมล สำหรับรหัสอีเมลเราได้เพิ่มพารามิเตอร์การตรวจสอบดังต่อไปนี้ -

Required
การจับคู่รูปแบบ

นี่คือวิธีที่รหัสผ่านการตรวจสอบความถูกต้องใน app.component.ts.

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

ใน Validators.composeคุณสามารถเพิ่มรายการสิ่งที่คุณต้องการตรวจสอบความถูกต้องในช่องป้อนข้อมูล ตอนนี้เราได้เพิ่มไฟล์required และ pattern matching พารามิเตอร์เพื่อรับอีเมลที่ถูกต้องเท่านั้น

ใน app.component.htmlปุ่มส่งจะถูกปิดใช้งานหากอินพุตแบบฟอร์มใด ๆ ไม่ถูกต้อง ทำได้ดังนี้ -

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In">
   </form>
</div>

<p>
   Email entered is : {{emailid}}
</p>

สำหรับปุ่มส่งเราได้เพิ่มปิดใช้งานในวงเล็บเหลี่ยมซึ่งได้รับค่า - !formdata.valid. ดังนั้นหาก formdata.valid ไม่ถูกต้องปุ่มจะยังคงปิดใช้งานและผู้ใช้จะไม่สามารถส่งได้

ให้เราดูวิธีการทำงานในเบราว์เซอร์ -

ในกรณีข้างต้นรหัสอีเมลที่ป้อนไม่ถูกต้องจึงปิดใช้งานปุ่มเข้าสู่ระบบ ให้เราลองป้อนรหัสอีเมลที่ถูกต้องและดูความแตกต่าง

ตอนนี้รหัสอีเมลที่ป้อนถูกต้อง ดังนั้นเราจะเห็นปุ่มเข้าสู่ระบบถูกเปิดใช้งานและผู้ใช้จะสามารถส่งได้ ด้วยวิธีนี้รหัสอีเมลที่ป้อนจะแสดงที่ด้านล่าง

ตอนนี้ให้เราลองตรวจสอบความถูกต้องแบบกำหนดเองด้วยแบบฟอร์มเดียวกัน สำหรับการตรวจสอบความถูกต้องเราสามารถกำหนดฟังก์ชันที่กำหนดเองและเพิ่มรายละเอียดที่ต้องการได้ ตอนนี้เราจะเห็นตัวอย่างเดียวกัน

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

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

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length <'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

ในตัวอย่างข้างต้นเราได้สร้างฟังก์ชัน password validation และใช้ในส่วนก่อนหน้าใน formcontrol - passwd: new FormControl("", this.passwordvalidation).

ในฟังก์ชันที่เราสร้างขึ้นเราจะตรวจสอบว่าความยาวของอักขระที่ป้อนนั้นเหมาะสมหรือไม่ หากอักขระน้อยกว่าห้าอักขระจะกลับมาพร้อมกับรหัสผ่านจริงดังที่แสดงด้านบน -return {"passwd" : true};. หากอักขระมากกว่าห้าอักขระจะถือว่าถูกต้องและการเข้าสู่ระบบจะเปิดใช้งาน

ตอนนี้ให้เราดูว่าสิ่งนี้แสดงในเบราว์เซอร์อย่างไร -

เราป้อนรหัสผ่านเพียงสามตัวอักษรและการเข้าสู่ระบบถูกปิดใช้งาน ในการเปิดใช้งานการเข้าสู่ระบบเราต้องมีอักขระมากกว่าห้าตัว ตอนนี้ให้เราป้อนความยาวของอักขระที่ถูกต้องและตรวจสอบ

การเข้าสู่ระบบถูกเปิดใช้งานเนื่องจากทั้งรหัสอีเมลและรหัสผ่านถูกต้อง อีเมลจะแสดงที่ด้านล่างเมื่อเราเข้าสู่ระบบ

แอนิเมชั่นเพิ่มปฏิสัมพันธ์ระหว่างองค์ประกอบ html แอนิเมชั่นยังสามารถใช้ได้กับ Angular2 ความแตกต่างกับ Angular 4 คือภาพเคลื่อนไหวไม่ได้เป็นส่วนหนึ่งของไฟล์@angular/core ไลบรารี แต่เป็นแพ็กเกจแยกต่างหากที่ต้องนำเข้า app.module.ts.

ในการเริ่มต้นเราต้องนำเข้าไลบรารีดังนี้ -

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

BrowserAnimationsModule จำเป็นต้องเพิ่มในอาร์เรย์นำเข้าใน app.module.ts ดังแสดงด้านล่าง -

app.module.ts

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

ใน app.component.htmlเราได้เพิ่มองค์ประกอบ html ซึ่งจะทำให้เคลื่อนไหวได้

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

สำหรับ div หลักเราได้เพิ่มปุ่มและ div พร้อมรูปภาพ มีเหตุการณ์การคลิกที่เรียกใช้ฟังก์ชัน animate และสำหรับ div นั้น@myanimation คำสั่งถูกเพิ่มและกำหนดค่าเป็นสถานะ

ให้เราดูไฟล์ app.component.ts ที่กำหนดภาพเคลื่อนไหว

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

เราต้องนำเข้าฟังก์ชั่นภาพเคลื่อนไหวที่จะใช้ในไฟล์. ts ดังภาพด้านบน

import { trigger, state, style, transition, animate } from '@angular/animations';

ที่นี่เราได้นำเข้าทริกเกอร์สถานะสไตล์การเปลี่ยนแปลงและภาพเคลื่อนไหวจาก @ angular / animations

ตอนนี้เราจะเพิ่มคุณสมบัติภาพเคลื่อนไหวให้กับมัณฑนากร @Component () -

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Trigger กำหนดจุดเริ่มต้นของภาพเคลื่อนไหว พารามิเตอร์ตัวแรกคือชื่อของภาพเคลื่อนไหวที่กำหนดให้กับแท็ก html ที่ต้องใช้ภาพเคลื่อนไหว พารามิเตอร์ตัวที่สองคือฟังก์ชันที่เรานำเข้า - สถานะการเปลี่ยนแปลง ฯลฯ

stateฟังก์ชันเกี่ยวข้องกับขั้นตอนการเคลื่อนไหวซึ่งองค์ประกอบจะเปลี่ยนไปมาระหว่าง ตอนนี้เราได้กำหนดสองสถานะเล็กและใหญ่ สำหรับรัฐที่เล็กกว่าเราได้กำหนดรูปแบบtransform:translateY(100px) และ transform:translateY(100px).

ฟังก์ชันการเปลี่ยนจะเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบ html อาร์กิวเมนต์แรกใช้สถานะคือเริ่มต้นและสิ้นสุด อาร์กิวเมนต์ที่สองยอมรับฟังก์ชัน animate ฟังก์ชัน animate ช่วยให้คุณกำหนดความยาวความล่าช้าและการค่อยๆเปลี่ยนของการเปลี่ยนแปลง

ตอนนี้ให้เราดูไฟล์. html เพื่อดูว่าฟังก์ชันการเปลี่ยนแปลงทำงานอย่างไร

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

มีการเพิ่มคุณสมบัติสไตล์ใน @componentคำสั่งซึ่งจัดแนว div ไว้ตรงกลาง ให้เราพิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจเช่นเดียวกัน -

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

ในที่นี้จะใช้อักขระพิเศษ [`] เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ html ถ้ามี สำหรับ div เราได้กำหนดชื่อภาพเคลื่อนไหวที่กำหนดไว้ในไฟล์ app.component.ts

เมื่อคลิกปุ่มจะเรียกใช้ฟังก์ชัน animate ซึ่งกำหนดไว้ในไฟล์ app.component.ts ดังนี้ -

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

ตัวแปรสถานะถูกกำหนดและกำหนดให้ค่าเริ่มต้นน้อยลง ฟังก์ชัน animate จะเปลี่ยนสถานะเมื่อคลิก หากรัฐมีขนาดใหญ่ขึ้นก็จะเปลี่ยนเป็นรัฐเล็กลง และถ้าเล็กกว่าก็จะแปลงเป็นขนาดใหญ่

นี่คือผลลัพธ์ในเบราว์เซอร์ (http://localhost:4200/) จะมีลักษณะดังนี้ -

เมื่อคลิกที่ไฟล์ Click Me ตำแหน่งของภาพจะเปลี่ยนไปตามที่แสดงในภาพหน้าจอต่อไปนี้ -

ฟังก์ชันการแปลงถูกนำไปใช้ในไฟล์ yทิศทางซึ่งเปลี่ยนจาก 0 เป็น 100px เมื่อคลิกปุ่ม Click Me ภาพจะถูกเก็บไว้ในไฟล์assets/images โฟลเดอร์

Materialsมีโมดูลในตัวมากมายสำหรับโครงการของคุณ คุณลักษณะต่างๆเช่นการเติมข้อความอัตโนมัติ datepicker ตัวเลื่อนเมนูกริดและแถบเครื่องมือพร้อมใช้งานกับวัสดุใน Angular 4

ในการใช้วัสดุเราจำเป็นต้องนำเข้าบรรจุภัณฑ์ Angular 2 ยังมีคุณสมบัติข้างต้นทั้งหมด แต่มีให้ใช้งานเป็นส่วนหนึ่งของโมดูล @ angular / core Angular 4 มาพร้อมกับโมดูลแยกต่างหาก@angular/materials.. สิ่งนี้ช่วยให้ผู้ใช้นำเข้าวัสดุที่จำเป็น

ในการเริ่มใช้วัสดุคุณต้องติดตั้งสองแพ็คเกจ - วัสดุและ cdk ส่วนประกอบของวัสดุขึ้นอยู่กับโมดูลแอนิเมชั่นสำหรับคุณสมบัติขั้นสูงดังนั้นคุณต้องมีแพ็คเกจแอนิเมชั่นเหมือนกันนั่นคือ @ angular / animations แพ็คเกจได้รับการอัปเดตแล้วในบทที่แล้ว

npm install --save @angular/material @angular/cdk

ให้เราดู package.json @angular/material และ @angular/cdk มีการติดตั้ง

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   
   "private": true,
   
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },
   
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

เราได้เน้นแพ็คเกจที่ติดตั้งเพื่อใช้งานกับวัสดุ

ตอนนี้เราจะนำเข้าโมดูลในโมดูลหลัก - app.module.ts ดังแสดงด้านล่าง

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

ในไฟล์ด้านบนเราได้นำเข้าโมดูลต่อไปนี้จาก @ angular / materials

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

และสิ่งเดียวกันนี้ใช้ในอาร์เรย์การนำเข้าดังที่แสดงด้านล่าง -

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

app.component.ts ดังแสดงด้านล่าง -

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

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

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

ให้เราเพิ่มเนื้อหาใน app.component.html.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

ในไฟล์ด้านบนเราได้เพิ่มเมนูและ SideNav

เมนู

ในการเพิ่มเมนู <md-menu></md-menu>ถูกนำมาใช้. file และ Save As รายการจะถูกเพิ่มลงในปุ่มด้านล่าง md-menu. มีการเพิ่มปุ่มหลักMenu. การอ้างอิงที่เหมือนกันจะได้รับ <md-men> โดยใช้[mdMenuTriggerFor]=”menu” และใช้เมนูกับ # in <md-menu>.

SideNav

ในการเพิ่ม sidenav เราต้องการ <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-sidenav>จะถูกเพิ่มเป็นลูกในคอนเทนเนอร์ มีการเพิ่ม div อื่นซึ่งเรียกใช้ sidenav โดยใช้(click)=”sidenav.open()”. ต่อไปนี้คือการแสดงเมนูและ sidenav ในเบราว์เซอร์ -

เมื่อคลิก opensidenavจะแสดงแถบด้านข้างตามที่แสดงด้านล่าง -

เมื่อคลิกเมนูคุณจะได้รับสองรายการ File และ Save As ดังแสดงด้านล่าง -

ตอนนี้ให้เราเพิ่ม datepicker โดยใช้วัสดุ ในการเพิ่ม datepicker เราต้องนำเข้าโมดูลที่จำเป็นเพื่อแสดง datepicker

ใน app.module.tsเราได้นำเข้าโมดูลต่อไปนี้ตามที่แสดงด้านล่างสำหรับ datepicker

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

ที่นี่เราได้นำเข้าโมดูลเช่น MdDatepickerModule, MdInputModule, และ MdNativeDateModule.

ตอนนี้ app.component.ts ดังแสดงด้านล่าง -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

app.component.html ดังแสดงด้านล่าง -

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

นี่คือวิธีแสดง datepicker ในเบราว์เซอร์ -

Angular CLI ทำให้ง่ายต่อการเริ่มต้นกับโครงการ Angular ใด ๆ Angular CLI มาพร้อมกับคำสั่งที่ช่วยให้เราสร้างและเริ่มโครงการได้เร็วมาก ตอนนี้ให้เราทำตามคำสั่งที่มีเพื่อสร้างโครงการส่วนประกอบและบริการเปลี่ยนพอร์ต ฯลฯ

ในการทำงานกับ Angular CLI เราจำเป็นต้องติดตั้งลงในระบบของเรา ให้เราใช้คำสั่งต่อไปนี้เหมือนกัน -

npm install -g @angular/cli

ในการสร้างโปรเจ็กต์ใหม่เราสามารถรันคำสั่งต่อไปนี้ในบรรทัดคำสั่งและโปรเจ็กต์จะถูกสร้างขึ้น

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serve // จะรวบรวมและคุณสามารถดูผลลัพธ์ของโครงการของคุณในเบราว์เซอร์ -

http://localhost:4200/

4200 เป็นพอร์ตเริ่มต้นที่ใช้เมื่อสร้างโปรเจ็กต์ใหม่ คุณสามารถเปลี่ยนพอร์ตด้วยคำสั่งต่อไปนี้ -

ng serve --host 0.0.0.0 --port 4201

ตารางต่อไปนี้แสดงรายการคำสั่งที่สำคัญบางคำสั่งที่จำเป็นขณะทำงานกับโปรเจ็กต์ Angular 4

ส่วนประกอบ	องค์ประกอบ ng g องค์ประกอบใหม่
คำสั่ง	ng g คำสั่ง new-directive
ท่อ	ท่อ g ท่อใหม่
บริการ	ng g บริการใหม่ - บริการ
โมดูล	ng g โมดูล my-module

เมื่อใดก็ตามที่มีการสร้างโมดูลส่วนประกอบหรือบริการใหม่การอ้างอิงของสิ่งเดียวกันจะได้รับการอัพเดตในโมดูลหลัก app.module.ts.

ในบทนี้เราจะพูดถึงตัวอย่างบางส่วนที่เกี่ยวข้องกับ Angular 4

ในการเริ่มต้นเราได้สร้างตัวอย่างซึ่งแสดงแบบฟอร์มการเข้าสู่ระบบพร้อมอินพุตเป็น username และ password. เมื่อป้อนค่าที่ถูกต้องจะเข้าสู่ภายในและแสดงแบบฟอร์มอื่นซึ่งคุณสามารถป้อนรายละเอียดลูกค้า นอกจากนี้เราได้สร้างองค์ประกอบสี่ส่วน ได้แก่ ส่วนหัวส่วนท้ายผู้ใช้ล็อกอินและหน้าหลัก

ส่วนประกอบถูกสร้างขึ้นโดยใช้คำสั่งต่อไปนี้ -

ส่วนหัวของส่วนประกอบ ng g

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

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 คอมโพเนนต์ 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

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 { }

เราได้นำเข้า RouterModule และ Routes จาก @anuglar/router. ในการนำเข้า 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;
      }
   }
}

ต่อไปนี้เป็นไฟล์. ts สำหรับ app.component.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, and 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 and 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 ทำงานอย่างไร ไฟล์ต่อไปนี้สำหรับคอมโพเนนต์ userlogin ที่สร้างขึ้นคือ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>

ที่นี่เราได้สร้างแบบฟอร์มที่มีตัวควบคุมอินพุตสองตัว Username และ Password. นี่คือแนวทางรูปแบบที่ขับเคลื่อนด้วยโมเดลและมีการอธิบายรายละเอียดเดียวกันในบทที่ 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 และ validation โมดูลจะถูกนำเข้าตามที่แสดงด้านล่าง

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

เราต้องการเราเตอร์เพื่อนำทางไปยังส่วนประกอบอื่นเมื่อผู้ใช้และรหัสผ่านถูกต้อง สำหรับสิ่งนี้เราเตอร์จะถูกนำเข้าตามที่แสดงด้านล่าง -

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

ใน ngOnInitการตรวจสอบความถูกต้องของแบบฟอร์มเสร็จสิ้น เราต้องการให้ชื่อผู้ใช้มีความยาวมากกว่าหกตัวอักษรและจำเป็นต้องกรอกฟิลด์นี้ เงื่อนไขเดียวกันนี้ใช้กับรหัสผ่านด้วย

เมื่อคลิกส่งเราสามารถตรวจสอบได้ว่าเป็นชื่อผู้ใช้หรือไม่ systemadmin และรหัสผ่านคือ admin123. ถ้าใช่กล่องโต้ตอบจะปรากฏขึ้นLogin Successful และเราเตอร์จะนำทางไปยังหน้าหลักของแอปซึ่งเป็นตัวเลือกขององค์ประกอบหน้าหลัก

มีการเพิ่ม css สำหรับแบบฟอร์มใน userlogin.component.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 เป็น array เพื่อให้เราสามารถใช้ใน 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 ที่สองมีตารางซึ่งจะแสดงรายละเอียดที่ป้อน การแสดง userlogin และรายละเอียดของลูกค้ามีดังรูปด้านล่าง นี่คือหน้าที่มีรูปแบบการเข้าสู่ระบบและส่วนหัวและส่วนท้าย