Angular7 - คู่มือฉบับย่อ

Angular 7เป็นเจ้าของโดย Google และรุ่นเสถียรได้ทำในวันที่ 18 ^THตุลาคม 2018 นี้เป็นรุ่นล่าสุดของเชิงมุม

ด้านล่างนี้คือรายชื่อรุ่น Angular ที่เปิดตัวจนถึงตอนนี้ -

เวอร์ชัน	วันที่วางจำหน่าย
JS เชิงมุม	ตุลาคม 2553
เชิงมุม 2.0	ก.ย. 2559
เชิงมุม 4.0	มีนาคม 2560
เชิงมุม 5.0	พฤศจิกายน 2560
เชิงมุม 6.0	พฤษภาคม 2561
เชิงมุม 7.0	ตุลาคม 2018

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

เวอร์ชัน	วันที่วางจำหน่าย
เชิงมุม 8.0	มีนาคม / เมษายน 2562
เชิงมุม 9.0	กันยายน / ตุลาคม 2562

Google มีแผนที่จะปล่อย Angular เวอร์ชันหลักทุกๆ 6 เดือน เวอร์ชันที่วางจำหน่ายจนถึงปัจจุบันสามารถใช้งานร่วมกันได้ย้อนหลังและสามารถอัปเดตเป็นเวอร์ชันใหม่ได้อย่างง่ายดาย

ให้เราพูดคุยเกี่ยวกับคุณสมบัติใหม่ที่เพิ่มเข้ามาใน Angular 7

อัปเดตเชิงมุมเป็น V7

Angular 7 เป็นรุ่นหลักที่มีการอัปเดตในกรอบแกนเชิงมุม Angular CLI วัสดุเชิงมุม ในกรณีที่คุณใช้ Angular 5 หรือ 6 และต้องการอัปเดตเป็น Angular 7 ด้านล่างนี้คือคำสั่งที่จะอัปเดตแอปของคุณเป็น Angular เวอร์ชันล่าสุด -

ng update @angular/cli @angular/core

CLI เชิงมุม

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

ประสิทธิภาพการใช้งาน

ใน Angular 7 มีการเพิ่มงบประมาณบันเดิลใน angular.json ดังที่แสดงด้านล่าง -

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

วัสดุเชิงมุมและ CDK

เวอร์ชันของ Angular Material / CDK ได้รับการอัปเดตใน Angular 7 นอกจากนี้ยังมีคุณสมบัติ 2 อย่างที่เพิ่มเข้ามาใน CDK - virtual scrolling, and drag and drop.

การเลื่อนเสมือน

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

ลากแล้ววาง

คุณสามารถลากและวางองค์ประกอบจากรายการและวางไว้ที่ใดก็ได้ที่ต้องการภายในรายการ คุณลักษณะใหม่นี้ราบรื่นและรวดเร็วมาก

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

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

โหนด

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

โหนดต้องมากกว่า 8.x หรือ 10.x และ npm จะต้องมากกว่า 5.6 หรือ 6.4

C:\>node 
–v v10.15.1

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

โฮมเพจของ nodejs มีดังนี้ -

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

C:\>npm 
–v 6.4.1

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

ประเภท npm install –g @angular/cliในพรอมต์คำสั่งของคุณเพื่อติดตั้ง angular cli บนระบบของคุณ จะใช้เวลาสักครู่ในการติดตั้งและเมื่อเสร็จแล้วคุณสามารถตรวจสอบเวอร์ชันโดยใช้คำสั่งด้านล่าง -

ng version

จะแสดงรายละเอียดเวอร์ชันของแพ็คเกจเชิงมุม - cli รวมทั้งเวอร์ชันอื่น ๆ ตามที่แสดงด้านล่าง -

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

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

ในบทนี้เราจะพูดถึงการตั้งค่าโครงการในเชิงมุม 7

ในการเริ่มต้นการตั้งค่าโปรเจ็กต์ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง nodejs แล้ว You can check the version of node in the command line using the command, node –vดังที่แสดงด้านล่าง -

หากคุณไม่ได้รับเวอร์ชันให้ติดตั้ง nodejs จากเว็บไซต์อย่างเป็นทางการ -https://nodejs.org/en/.

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

ดังนั้นเราจึงมีโหนดเวอร์ชัน 10 และ npm เวอร์ชัน 6.4.1

ในการติดตั้ง Angular 7 ให้ไปที่ไซต์ https://cli.angular.io เพื่อติดตั้ง Angular CLI

คุณจะเห็นคำสั่งต่อไปนี้บนหน้าเว็บ -

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

คำสั่งข้างต้นช่วยในการตั้งค่าโครงการใน Angular 7

เราจะสร้างโฟลเดอร์ชื่อ projectA7 และติดตั้ง angular/cli ดังแสดงด้านล่าง -

เมื่อติดตั้งเสร็จแล้วให้ตรวจสอบรายละเอียดของแพ็คเกจที่ติดตั้งโดยใช้คำสั่ง ng version ดังที่แสดงด้านล่าง -

ให้เวอร์ชันสำหรับ Angular CLI เวอร์ชัน typescript และแพ็คเกจอื่น ๆ สำหรับ Angular 7

เสร็จสิ้นการติดตั้ง Angular 7 ตอนนี้เราจะเริ่มต้นด้วยการตั้งค่าโครงการ

ในการสร้างโครงการใน Angular 7 เราจะใช้คำสั่งต่อไปนี้ -

ng new projectname

คุณสามารถใช้projectnameที่คุณเลือก ตอนนี้ให้เรารันคำสั่งดังกล่าวในบรรทัดคำสั่ง

ที่นี่เราใช้projectname เป็น angular7 เมื่อคุณเรียกใช้คำสั่งมันจะถามคุณเกี่ยวกับการกำหนดเส้นทางดังที่แสดงด้านล่าง -

พิมพ์ y เพื่อเพิ่มเส้นทางในการตั้งค่าโปรเจ็กต์ของคุณ

คำถามต่อไปเกี่ยวกับสไตล์ชีต -

ตัวเลือกที่มี ได้แก่ CSS, Sass, Less และ Stylus ในภาพหน้าจอด้านบนลูกศรอยู่บน CSS หากต้องการเปลี่ยนคุณสามารถใช้ปุ่มลูกศรเพื่อเลือกปุ่มที่จำเป็นสำหรับการตั้งค่าโครงการของคุณ ในปัจจุบันเราจะพูดถึง CSS สำหรับการตั้งค่าโครงการของเรา

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

เปลี่ยนไดเร็กทอรีในบรรทัดคำสั่งโดยใช้บรรทัดโค้ดที่กำหนด -

cd angular7-app

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

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

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

ต่อไปนี้เป็นบรรณาธิการ -

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

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

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

ng serve

The ng serve command builds the application and starts the web server.

คุณจะเห็นด้านล่างเมื่อคำสั่งเริ่มดำเนินการ -

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

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

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

“Welcome to Angular 7!”

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

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

ng serve --host 0.0.0.0 –port 4205

angular7-app / โฟลเดอร์มีดังต่อไปนี้ folder structure-

• e2e/- โฟลเดอร์ทดสอบ end to end e2e ส่วนใหญ่ใช้สำหรับการทดสอบการรวมและช่วยให้แน่ใจว่าแอปพลิเคชันทำงานได้ดี

• node_modules/- แพ็คเกจ npm ที่ติดตั้งคือ node_modules คุณสามารถเปิดโฟลเดอร์และดูแพ็คเกจที่มี

• src/ - โฟลเดอร์นี้เป็นที่ที่เราจะทำงานในโปรเจ็กต์โดยใช้ Angular 7 ภายใน src / คุณจะสร้างแอพ / โฟลเดอร์ระหว่างการตั้งค่าโปรเจ็กต์และเก็บไฟล์ที่จำเป็นทั้งหมดที่จำเป็นสำหรับโปรเจ็กต์

angular7-app / โฟลเดอร์มีดังต่อไปนี้ file structure -

• angular.json - โดยทั่วไปจะมีชื่อโครงการเวอร์ชันของ cli และอื่น ๆ

• .editorconfig - นี่คือไฟล์กำหนดค่าสำหรับโปรแกรมแก้ไข

• .gitignore - ไฟล์. gitignore ควรถูกผูกมัดในที่เก็บเพื่อแชร์กฎการละเว้นกับผู้ใช้รายอื่นที่โคลนที่เก็บ

• package.json - ไฟล์ package.json บอกว่าจะติดตั้งไลบรารีใดลงใน node_modules เมื่อคุณรันการติดตั้ง npm

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

"@angular/animations": "~7.2.0", 
"@angular/common": "~7.2.0", 
"@angular/compiler": "~7.2.0", 
"@angular/core": "~7.2.0", 
"@angular/forms": "~7.2.0", 
"@angular/platform-browser": "~7.2.0", 
"@angular/platform-browser-dynamic": "~7.2.0", 
"@angular/router": "~7.2.0", 
"core-js": "^2.5.4", 
"rxjs": "~6.3.3", 
"tslib": "^1.9.0", 
"zone.js": "~0.8.26"

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

• tsconfig.json - โดยพื้นฐานแล้วจะมีตัวเลือกคอมไพเลอร์ที่จำเป็นในระหว่างการคอมไพล์

• tslint.json - นี่คือไฟล์กำหนดค่าที่มีกฎที่ต้องพิจารณาขณะคอมไพล์

src/ โฟลเดอร์คือโฟลเดอร์หลักซึ่งภายในมีโครงสร้างไฟล์ที่แตกต่างกัน

แอป

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

app.module.ts

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

ชื่อนั้นอธิบายการใช้งานของไลบรารี โดยจะนำเข้าและบันทึกลงในตัวแปรเช่นการประกาศการนำเข้าผู้ให้บริการและบูตสแตรป

เราสามารถเห็น app-routing.moduleยังเพิ่ม เนื่องจากเราได้เลือกเส้นทางเมื่อเริ่มการติดตั้ง โมดูลถูกเพิ่มโดย @ angular / cli

ต่อไปนี้เป็นโครงสร้างของไฟล์ -

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

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

@NgModule นำเข้าจาก @ angular / core และมีวัตถุที่มีคุณสมบัติดังต่อไปนี้ -

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

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

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 style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1> 
   <img width = "300" alt = "Angular Logo" 
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7> 
</div> 

<h2>Here are some links to help you start:</h2> 
<ul> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = https://angular.io/cli">CLI Documentation</>
      </h2> 
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://blog.angular.io/">Angular blog</a>
      </h2> 
   </li> 
</ul> 
<router-outlet></router-outlet>

นี่คือโค้ด 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 = 'Angular 7';
}

app-Routing.module.ts

ไฟล์นี้จะจัดการกับการกำหนดเส้นทางที่จำเป็นสำหรับโครงการของคุณ มันเชื่อมต่อกับโมดูลหลักเช่น app.module.ts

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

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

const routes: Routes = [];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

สินทรัพย์

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

สิ่งแวดล้อม

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

• environment.prod.ts
• environment.ts

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

โครงสร้างไฟล์เพิ่มเติมของangular7-app / folder มีดังต่อไปนี้ -

favicon.ico

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

index.html

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

<html lang = "en"> 
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</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>

ร่างกายได้ <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).catch(err => console.error(err));

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

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

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

bootstrap: [AppComponent]

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

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

polyfill.ts

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

styles.css

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

test.ts

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

tsconfig.app.json

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

tsconfig.spec.json

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

การพิมพ์ d.ts

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

โครงสร้างไฟล์สุดท้ายจะเป็นดังนี้ -

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

โครงสร้างไฟล์มีส่วนประกอบของแอพและประกอบด้วยไฟล์ต่อไปนี้ -

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

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

• app-routing.module.ts

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

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

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

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

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

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

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

ng g component new-cmp

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

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

ตอนนี้ถ้าเราไปตรวจสอบโครงสร้างไฟล์เราจะได้โฟลเดอร์ใหม่ 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 { AppRoutingModule } from './app-routing.module'; 
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,
      AppRoutingModule 
   ], 
   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', // selector to be used inside .html file. 
   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 ซึ่งมีตัวสร้างและวิธีการที่เรียกว่า ngOnInit () ngOnInit ถูกเรียกโดยค่าเริ่มต้นเมื่อเรียกใช้คลาส

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

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

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</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).catch(err => console.error(err));

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

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

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

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   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 7'; 
}

แกนเชิงมุมถูกนำเข้าและเรียกว่าส่วนประกอบและใช้ใน 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 ไฟล์สไตล์ว่างเปล่าเนื่องจากเราไม่จำเป็นต้องมีสไตล์ใด ๆ ในปัจจุบัน แต่เมื่อเราเรียกใช้โปรเจ็กต์เราไม่เห็นสิ่งที่เกี่ยวข้องกับส่วนประกอบใหม่ที่แสดงในเบราว์เซอร์

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

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

<p>
   new-cmp works!
<p>

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

ตัวเลือก 'app-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() { } 
}

ตัวเลือกกล่าวคือ 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-cmp7></app-new-cmp>

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

ให้เราเพิ่มรายละเอียดเพิ่มเติมให้กับส่วนประกอบใหม่ที่สร้างขึ้นและดูการแสดงผลในเบราว์เซอร์

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

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

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

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

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

p { 
   color: blue; 
   font-size: 25px; 
}

ดังนั้นเราจึงได้เพิ่มสีฟ้าและขนาดตัวอักษรเป็น 25px สำหรับแท็ก p

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

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

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

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

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

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

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

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

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

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

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

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

คำประกาศ

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

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

นำเข้า

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

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

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

imports: [ 
   BrowserModule, 
   FormsModule 
]

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

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

Bootstrap

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

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

ตัวแปรใน app.component.html เรียกว่าไฟล์ {{title}} และค่าของ 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 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
}

อาร์เรย์ของเดือนที่แสดงด้านบนจะแสดงในเมนูแบบเลื่อนลงในเบราว์เซอร์

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

ไวยากรณ์สำหรับใน Angular มีดังนี้ -

*ngFor = “let I of months”

และเพื่อรับค่าของเดือนที่เราแสดงใน -

{{i}}

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

ต่อไปนี้เป็นผลลัพธ์ของอาร์เรย์ของเดือนข้างต้นในเบราว์เซอร์ -

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

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

ตัวอย่าง

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

@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true
}

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">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 7';
   
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May","June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true
}

ในกรณีนี้เราได้สร้างไฟล์ 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>

ถ้าใช้กับเงื่อนไขอื่นและตัวแปรที่ใช้คือ 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 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to 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 7 เมื่อผู้ใช้โต้ตอบกับแอพพลิเคชั่นในรูปแบบของการเคลื่อนไหวของแป้นพิมพ์การคลิกเมาส์หรือวางเมาส์เหนือจะทำให้เกิดเหตุการณ์ขึ้น เหตุการณ์เหล่านี้จำเป็นต้องได้รับการจัดการเพื่อดำเนินการบางอย่าง นี่คือที่ที่การรวมเหตุการณ์เข้ามาในรูปภาพ

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

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)"

ฟังก์ชันถูกกำหนดไว้ใน: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 7';
   
   // declared array of months.
   months = ["January", "February", "March", "April", "May","June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = true; //variable is set to 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 และกล่องโต้ตอบจะปรากฏขึ้นซึ่งจะแสดงไฟล์ Button is clicked ดังที่แสดงในภาพหน้าจอต่อไปนี้ -

เพิ่มสไตล์สำหรับปุ่มใน add.component.css -

button {
   background-color: #2B3BCF;
   border: none;
   color: white;
   padding: 10px 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
}

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

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

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)"> <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> <br/> <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 7';
   
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = true; //variable is set to 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) {
      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 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to 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 7 ใช้ <ng-template> เป็นแท็กแทน <template> ซึ่งใช้ใน Angular2 <ng-template> ถูกใช้งานตั้งแต่รุ่น Angular 4 และรุ่นก่อนหน้าเช่น Angular 2 ใช้ <template> เพื่อวัตถุประสงค์เดียวกัน เหตุผลที่เริ่มใช้ <ng-template> แทน <template> ตั้งแต่ Angular 4 เป็นต้นไปเนื่องจากมีความขัดแย้งของชื่อระหว่างแท็ก <template> และแท็กมาตรฐาน html <template> จะเลิกใช้งานอย่างสมบูรณ์ในอนาคต นี่เป็นการเปลี่ยนแปลงที่สำคัญอย่างหนึ่งที่เกิดขึ้นในเวอร์ชัน Angular 4

ตอนนี้ให้เราใช้เทมเพลตพร้อมกับ if else condition และดูผลลัพธ์

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 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   isavailable = false; // variable is set to 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"); 
   } 
}

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

ตัวแปร isavailableเป็นเท็จดังนั้นเทมเพลต 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 7'; 
   
   // declared array of months. 
   months = ["January", "Feburary", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true  
   myClickFunction(event) { 
      this.isavailable = !this.isavailable; 
      // variable is toggled onclick of the button 
   } 
   changemonths(event) {
      alert("Changed month from the Dropdown"); 
   }
}

isavailable ตัวแปรจะถูกสลับเมื่อคลิกปุ่มดังที่แสดงด้านล่าง -

myClickFunction(event) { 
   this.isavailable = !this.isavailable; 
}

เมื่อคุณคลิกที่ปุ่มตามค่าของไฟล์ isavailable ตัวแปรแม่แบบที่เกี่ยวข้องจะปรากฏขึ้น -

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

แม้ว่าใน app.component.html เราได้เพิ่มแท็กช่วงและ <ng-template> สำหรับเงื่อนไขดังแสดงด้านล่าง -

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

เราไม่เห็นแท็ก span และ <ng-template> ในโครงสร้าง dom เมื่อเราตรวจสอบสิ่งเดียวกันในเบราว์เซอร์

โค้ดบรรทัดต่อไปนี้ใน 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>

หากเราลบไฟล์ thenเงื่อนไขเราได้รับข้อความ "เงื่อนไขถูกต้อง" ในเบราว์เซอร์และแท็ก 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:\projectA7\angular7-app>ng g directive changeText 
CREATE src/app/change-text.directive.spec.ts (241 bytes) 
CREATE src/app/change-text.directive.ts (149 bytes) 
UPDATE src/app/app.module.ts (565 bytes)

ไฟล์ข้างต้นเช่น 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 { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

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

change-text.directive

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

@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

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

ในมุมมอง 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 style = "text-align:center"> 
   <span changeText >Welcome to {{title}}.</span> 
</div>

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

change-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 ผลลัพธ์เดียวกันสามารถเห็นได้ในคอนโซลเบราว์เซอร์ ข้อความขององค์ประกอบยังเปลี่ยนแปลงตามที่แสดงด้านบน

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

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

ในบทนี้เราจะพูดถึง Pipes ใน Angular 7 Pipes เดิมเรียกว่าตัวกรองใน Angular1 และเรียกว่าไพพ์ตั้งแต่ Angular2 เป็นต้นไป

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

{{ Welcome to Angular 7 | 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 7 Project!'; 
}

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

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

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

ต่อไปนี้เป็นท่อในตัวที่มีมุม -

• 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 7 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 { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule
   ], 
   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 ดังที่แสดงด้านล่าง -

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule ถูกเพิ่มตามที่แสดงด้านบนและรวมอยู่ในอาร์เรย์การนำเข้า

รายละเอียดไฟล์ของ app-routing.module ได้รับด้านล่าง -

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

const routes: Routes = [];
@NgModule({ 
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

ที่นี่เราต้องทราบว่าไฟล์นี้สร้างขึ้นโดยค่าเริ่มต้นเมื่อมีการเพิ่มเส้นทางระหว่างการตั้งค่าโครงการ หากไม่ได้เพิ่มจะต้องเพิ่มไฟล์ด้านบนด้วยตนเอง

ดังนั้นในไฟล์ด้านบนเราได้นำเข้า Routes และ RouterModule จาก @ angular / router

มี const routesกำหนดซึ่งเป็นประเภทเส้นทาง เป็นอาร์เรย์ที่เก็บเส้นทางทั้งหมดที่เราต้องการในโครงการของเรา

เส้นทาง const ถูกกำหนดให้กับ RouterModule ดังที่แสดงใน @NgModule ในการแสดงรายละเอียดการกำหนดเส้นทางให้กับผู้ใช้เราจำเป็นต้องเพิ่ม <router-outlet> คำสั่งที่เราต้องการให้แสดงมุมมอง

เพิ่มสิ่งเดียวกันนี้ใน app.component.html ดังที่แสดงด้านล่าง

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

ตอนนี้ให้เราสร้าง 2 ส่วนประกอบที่เรียกว่า as Home และ Contact Us และนำทางระหว่างพวกเขาโดยใช้การกำหนดเส้นทาง

บ้านส่วนประกอบ

ก่อนอื่นเราจะพูดคุยเกี่ยวกับบ้าน ต่อไปนี้เป็นไวยากรณ์สำหรับ Component Home -

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

ส่วนประกอบติดต่อเรา

ต่อไปนี้เป็นไวยากรณ์สำหรับ Component Contact Us -

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

เราสร้างส่วนประกอบที่บ้านเสร็จแล้วและติดต่อเรา ด้านล่างนี้เป็นรายละเอียดของส่วนประกอบใน app.module.ts -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

ตอนนี้ให้เราเพิ่มรายละเอียดเส้นทางใน app-routing.module.ts ดังรูปด้านล่าง -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

อาร์เรย์เส้นทางมีรายละเอียดองค์ประกอบที่มีเส้นทางและส่วนประกอบ นำเข้าส่วนประกอบที่ต้องการตามที่แสดงด้านบน

ที่นี่เราต้องสังเกตว่าส่วนประกอบที่เราต้องการสำหรับการกำหนดเส้นทางถูกนำเข้าใน app.module.ts และใน app-Routing.module.ts ให้เรานำเข้าในที่เดียวเช่นใน app-Routing.module.ts

ดังนั้นเราจะสร้างอาร์เรย์ขององค์ประกอบที่จะใช้สำหรับการกำหนดเส้นทางและจะส่งออกอาร์เรย์ใน app-Routing.module.ts และนำเข้าอีกครั้งใน app.module.ts ดังนั้นเราจึงมีส่วนประกอบทั้งหมดที่จะใช้สำหรับการกำหนดเส้นทางใน app-Routing.module.ts

นี่คือวิธีที่เราได้ทำ app-routing.module.ts -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

อาร์เรย์ของส่วนประกอบเช่น RoutingComponent ถูกนำเข้าใน app.module.ts ดังนี้ -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
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, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

ตอนนี้เราได้กำหนดเส้นทางเสร็จแล้ว เราจำเป็นต้องแสดงสิ่งเดียวกันให้กับผู้ใช้ดังนั้นให้เราเพิ่มปุ่มสองปุ่ม Home และ Contact Us ใน app.component.html และเมื่อคลิกที่ปุ่มต่างๆมันจะแสดงมุมมองส่วนประกอบภายใน <router-outlet> คำสั่ง ได้เพิ่มใน add.component.html

ปุ่มสร้างภายใน app.component.html และกำหนดเส้นทางไปยังเส้นทางที่สร้างขึ้น

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

ใน. html เราได้เพิ่มลิงก์จุดยึดหน้าแรกและติดต่อเราและใช้ routerLink เพื่อกำหนดเส้นทางไปยังเส้นทางที่เราสร้างไว้ใน app-routeing.module.ts

ตอนนี้ให้เราทดสอบสิ่งเดียวกันในเบราว์เซอร์ -

นี่คือวิธีที่เราได้รับในเบราว์เซอร์ ให้เราเพิ่มสไตล์เพื่อให้ลิงก์ดูดี

เราได้เพิ่ม css ต่อไปนี้ใน app.component.css -

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

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

คลิกที่ลิงค์ Home เพื่อดูรายละเอียดส่วนประกอบของบ้านตามที่แสดงด้านล่าง -

คลิกที่ติดต่อเราเพื่อดูรายละเอียดส่วนประกอบตามที่ระบุด้านล่าง -

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

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

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

ng g service myservice

C:\projectA7\angular7-app>ng g service myservice 
CREATE src/app/myservice.service.spec.ts (348 bytes) 
CREATE src/app/myservice.service.ts (138 bytes)

ไฟล์ที่สร้างในโฟลเดอร์แอพมีดังนี้ -

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

myservice.service.ts

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root' 
}) 
export class MyserviceService {
   constructor() { }
}

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

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

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

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

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

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

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
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 7 Project!'; 
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

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

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

app.component.html

{{todaydate}} 
<app-new-cmp></app-new-cmp>

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

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 { 
   newcomponent = "Entered in new component created"; 
   todaydate; 
   constructor(private myservice: MyserviceService) { }
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

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

new-cmp.component.html

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

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

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

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

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

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
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 7 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 ในบรรทัดถัดไปเราจะเปลี่ยนค่าของตัวแปรเป็น "สร้างองค์ประกอบ" เราจะทำเช่นเดียวกันใน 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

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

นี่คือไฟล์ app.component.html และ new-cmp.component.html -

app.component.html

<h3>{{todaydate}}>/h3> 
<h3> Service Property : {{componentproperty}} </h3> 
<app-new-cmp></app-new-cmp>

new-cmp.component.html

<h3>{{newcomponent}} </h3> 
<h3> Service Property : {{newcomponentproperty}} </h3> 
<h3> Today's Date : {{todaydate}} </h3>

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

เราจะดึงข้อมูลจากเซิร์ฟเวอร์โดยใช้โมดูล httpclient ที่ประกาศไว้ข้างต้น เราจะทำสิ่งนั้นภายในบริการที่เราสร้างไว้ในบทที่แล้วและใช้ข้อมูลภายในส่วนประกอบที่เราต้องการ

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

มีวิธีการเพิ่มที่เรียกว่า getData ที่ส่งคืนข้อมูลที่ดึงมาสำหรับ url ที่กำหนด

เมธอด getData ถูกเรียกจาก 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 7 Project!';
   public persondata = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.persondata = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.persondata);
      });
   }
}

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

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

ให้เราใช้ข้อมูลใน app.component.html ดังนี้ -

<h3>Users Data</h3>
<ul>
   <li *ngFor="let item of persondata; let i = index"<
      {{item.name}}
   </li>
</ul>

Output

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

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

npm install -g @angular/cli

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

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

ng serve // will compile and you can see the output of your project in the browser −

http://localhost:4200/

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

ng serve --host 0.0.0.0 --port 4201

คำสั่งสำหรับ Angular Update

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

ng update @angular/cli @angular/core

มันจะอัปเดต core framework เป็นเวอร์ชันล่าสุดนั่นคือ Angular 7 และ angular-cli คุณสามารถใช้คำสั่งด้านบนโดยมีตัวเลือกต่อไปนี้ -

รายการคำสั่งที่สำคัญเชิงมุม

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

ซีเนียร์ No	คำสั่งและคำอธิบาย
1	Component องค์ประกอบ ng g องค์ประกอบใหม่
2	Directive ng g คำสั่ง new-directive
3	Pipe ท่อ g ท่อใหม่
4	Service ng g บริการใหม่ - บริการ
5	Module ng g โมดูล my-module
6	Test การทดสอบ ng
7	Build ng build --configuration = production // สำหรับสภาพแวดล้อมการผลิต ng build --configuration = staging // สำหรับระบุสภาพแวดล้อม

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

ในบทนี้เราจะมาดูกันว่ารูปแบบต่างๆถูกใช้อย่างไรใน Angular 7 เราจะพูดถึงสองวิธีในการทำงานกับฟอร์ม -

• แบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต
• แบบฟอร์มขับเคลื่อน

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

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

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

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop'; 
import { FormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      FormsModule 
   ], 
   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 7 Project!'; 
   constructor(private myservice: MyserviceService) { } 
   ngOnInit() { } 
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid); 
   }
}

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

css สำหรับแบบฟอร์มล็อกอินถูกเพิ่มเข้ามา app.component.css -

input[type = text], input[type = password] { 
   width: 40%; 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
} 
input[type = submit] { 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
}

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

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

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

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

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

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      ReactiveFormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

ใน app.component.tsเราจำเป็นต้องนำเข้าโมดูลสองสามโมดูลสำหรับรูปแบบที่ขับเคลื่อนด้วยโมเดล ตัวอย่างเช่น,import { FormGroup, FormControl } จาก '@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 7 Project!'; 
   emailid; 
   formdata;
   constructor(private myservice: MyserviceService) { }  
   ngOnInit() { 
      this.formdata = new FormGroup({ 
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234") 
      }); 
   } 
   onClickSubmit(data) {this.emailid = data.emailid;}
}

ข้อมูลรูปแบบตัวแปรจะเริ่มต้นเมื่อเริ่มต้นคลาสและจะเริ่มต้นด้วย 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 7 เราจำเป็นต้องนำเข้า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 7 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;}
}

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

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

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

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

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

นี่เป็นหนึ่งในคุณสมบัติใหม่ที่เพิ่มเข้ามาใน Angular 7 ที่เรียกว่า Virtual Scrolling คุณสมบัตินี้ถูกเพิ่มลงใน CDK (Component Development Kit) การเลื่อนเสมือนจะแสดงองค์ประกอบ Dom ที่มองเห็นได้ให้กับผู้ใช้เมื่อผู้ใช้เลื่อนรายการถัดไปจะปรากฏขึ้น สิ่งนี้ให้ประสบการณ์ที่เร็วขึ้นเนื่องจากรายการทั้งหมดไม่ได้โหลดในคราวเดียวและโหลดเฉพาะตามการมองเห็นบนหน้าจอ

ทำไมเราต้องใช้ Virtual Scrolling Module?

พิจารณาว่าคุณมี UI ที่มีรายการใหญ่ที่การโหลดข้อมูลทั้งหมดเข้าด้วยกันอาจมีปัญหาด้านประสิทธิภาพ คุณลักษณะใหม่ของ Angular 7 Virtual Scrolling ดูแลการโหลดองค์ประกอบที่ผู้ใช้มองเห็นได้ เมื่อผู้ใช้เลื่อนรายการถัดไปขององค์ประกอบ dom ที่ผู้ใช้มองเห็นจะปรากฏขึ้น สิ่งนี้ให้ประสบการณ์ที่เร็วขึ้นและการเลื่อนยังราบรื่นมาก

ให้เราเพิ่มการพึ่งพาให้กับโครงการของเรา -

npm install @angular/cdk –save

เราเสร็จสิ้นการติดตั้งการอ้างอิงสำหรับโมดูลการเลื่อนเสมือน

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

ก่อนอื่นเราจะเพิ่มโมดูลการเลื่อนเสมือนภายใน app.module.ts ดังต่อไปนี้ -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

เราจะดึงข้อมูลจาก url https://jsonplaceholder.typicode.com/photosซึ่งมีข้อมูลประมาณ 5,000 ภาพ เราจะได้รับข้อมูลจากมันและแสดงต่อผู้ใช้โดยใช้โมดูลการเลื่อนเสมือน

รายละเอียดใน url https://jsonplaceholder.typicode.com/photos มีดังนี้ -

เป็นข้อมูล json ที่มี URL รูปภาพและ URL ขนาดย่อ เราจะแสดง URL ของภาพขนาดย่อให้กับผู้ใช้

ต่อไปนี้เป็นบริการที่จะดึงข้อมูล -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

เราจะเรียกใช้บริการจาก 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 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

ตอนนี้ตัวแปร albumdetails มีข้อมูลทั้งหมดจาก api และจำนวนทั้งหมดคือ 5,000

เมื่อเรามีข้อมูลพร้อมที่จะแสดงแล้วให้เราทำงานภายใน app.component.html เพื่อแสดงข้อมูล

เราต้องเพิ่มแท็ก <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>เพื่อทำงานกับโมดูลเลื่อนเสมือน ต้องเพิ่มแท็กในไฟล์. html ที่เราต้องการให้แสดงข้อมูล

นี่คือการทำงานของ <cdk-virtual-scroll-viewport> ใน app.component.html

<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

เรากำลังแสดง ID และ URL ภาพขนาดย่อให้กับผู้ใช้บนหน้าจอ เราใช้ * ngFor เป็นส่วนใหญ่ แต่อยู่ข้างใน<cdk-virtual-scroll-viewport>เราต้องใช้ * cdkVirtualFor เพื่อวนข้อมูล

เรากำลังวนรอบตัวแปร albumdetails ซึ่งมีอยู่ใน app.component.html มีขนาดที่กำหนดให้กับแท็กเสมือน [itemSize] = "20" ซึ่งจะแสดงจำนวนรายการตามความสูงของโมดูลเลื่อนเสมือน

css ที่เกี่ยวข้องกับโมดูลการเลื่อนเสมือนมีดังนี้ -

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

ความสูงที่กำหนดให้กับการเลื่อนเสมือนคือ 500px ภาพที่พอดีกับความสูงนั้นจะแสดงให้ผู้ใช้เห็น เราได้ทำการเพิ่มโค้ดที่จำเป็นเพื่อให้สามารถดูโมดูลการเลื่อนเสมือนของเราได้

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

เราจะเห็นภาพ 4 ภาพแรกแสดงให้ผู้ใช้เห็น เราได้ระบุความสูงไว้ที่ 500px มีการเลื่อนตารางปรากฏขึ้นเมื่อผู้ใช้เลื่อนภาพที่เหมาะสมกับความสูงนั้นจะแสดงดังภาพด้านล่าง -

รูปภาพที่ต้องการจะถูกโหลดเมื่อผู้ใช้เลื่อน คุณสมบัตินี้มีประโยชน์มากในแง่ของประสิทธิภาพ ในตอนแรกมันไม่ได้โหลดภาพทั้งหมด 5,000 ภาพ แต่เมื่อผู้ใช้เลื่อนไปมาจะมีการเรียกและแสดง URL แทน

คุณลักษณะการลากและวางใหม่ที่เพิ่มเข้ามาใน Angular 7 CDK ช่วยในการลากและวางองค์ประกอบจากรายการ เราจะเข้าใจการทำงานของโมดูล Drag and Drop ด้วยความช่วยเหลือของตัวอย่าง คุณสมบัติถูกเพิ่มลงใน cdk เราต้องดาวน์โหลดการพึ่งพาก่อนตามที่แสดงด้านล่าง -

npm install @angular/cdk --save

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

DragDropModule ถูกนำเข้าจาก '@angular/cdk/drag-drop' และโมดูลจะถูกเพิ่มในการนำเข้าอาร์เรย์ดังที่แสดงด้านบน

เราจะใช้รายละเอียดจาก api (http://jsonplaceholder.typicode.com/users)เพื่อแสดงบนหน้าจอ เรามีบริการที่จะดึงข้อมูลจาก api ดังที่แสดงด้านล่าง -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

เมื่อเสร็จแล้วเรียกใช้บริการภายใน 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 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.personaldetails);
      });
   }
}

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

<h3>Angular 7 - Drag and Drop Module</h3>
<div>
   <div *ngFor="let item of personaldetails; let i = index" class="divlayout”>
      {{item.name}}
   </div >
</div>

เราได้เพิ่ม class =” divlayout” และรายละเอียดของคลาสอยู่ใน app.component.css

.divlayout{
   width: 40%;
   background-color: #ccc;
   margin-bottom: 5px;
   padding: 10px 10px;
   border: 3px solid #73AD21;
}

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

มันจะไม่ลากและวางอะไรเราต้องเพิ่มคุณสมบัติ dragdrop cdk ใน app.component.html ดังที่แสดงด้านล่าง -

<h3>Angular 7 - Drag and Drop Module</h3>
<div cdkDropList
   #personList = "cdkDropList"
   [cdkDropListData] = "personaldetails"
   [cdkDropListConnectedTo] = "[userlist]"
   class = "example-list"
   (cdkDropListDropped) = "onDrop($event)" >
   
   <div *ngFor = "let item of personaldetails; 
      let i = index" class = "divlayout" cdkDrag>
      {{item.name}}
   </div >
</div&t;

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

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

ก่อนอื่นเราต้องนำเข้าโมดูล dragdrap cdk ดังที่แสดงด้านล่าง -

import {CdkDragDrop, moveItemInArray, transferArrayItem} 
from '@angular/cdk/drag-drop';

นี่คือรหัสเต็มใน app.component.ts -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), 
         k=>data[k]);
         console.log(this.personaldetails);
      });
   }
   onDrop(event: CdkDragDrop<string[]>) {
      if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data, 
            event.previousIndex, event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,
         event.container.data,
         event.previousIndex,
         event.currentIndex);
      }
   }
}

ฟังก์ชัน onDrop จะดูแลการวางรายการที่ลากในตำแหน่งที่ต้องการ

ใช้ประโยชน์จากไฟล์ moveItemInArray และ transferArrayItem เราได้นำเข้าจากโมดูล cdk dragdrop

ตอนนี้ให้เราดูการสาธิตอีกครั้งในเบราว์เซอร์ -

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

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

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

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   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 { FormGroup, FormControl, Validators} from '@angular/forms';
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 ที่ต้องใช้ภาพเคลื่อนไหว พารามิเตอร์ที่สองคือฟังก์ชันที่เรานำเข้า - สถานะการเปลี่ยนแปลง ฯลฯ

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

ฟังก์ชันการเปลี่ยนจะเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบ html อาร์กิวเมนต์แรกใช้สถานะเริ่มต้นและสิ้นสุดอาร์กิวเมนต์ที่สองยอมรับฟังก์ชันแอนิเมท ฟังก์ชัน 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 เมื่อเราคลิกปุ่มคลิกฉัน ภาพจะถูกเก็บไว้ในไฟล์assets/images โฟลเดอร์

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

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

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

ต่อไปนี้เป็นคำสั่งเพื่อเพิ่มวัสดุในโครงการของคุณ -

npm install --save @angular/material

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

{ 
   "name": "angular7-app", 
   "version": "0.0.0", 
   "scripts": { 
      "ng": "ng", 
      "start": "ng serve",
      "build": "ng build", 
      "test": "ng test", 
      "lint": "ng lint", 
      "e2e": "ng e2e" 
   }, 
   "private": true, 
   "dependencies": { 
      "@angular/animations": "~7.2.0", 
      "@angular/cdk": "^7.3.4", 
      "@angular/common": "~7.2.0", 
      "@angular/compiler": "~7.2.0", 
      "@angular/core": "~7.2.0", 
      "@angular/forms": "~7.2.0", 
      "@angular/material": "^7.3.4", 
      "@angular/platform-browser": "~7.2.0", 
      "@angular/platform-browser-dynamic": "~7.2.0", 
      "@angular/router": "~7.2.0", 
      "core-js": "^2.5.4", 
      "rxjs": "~6.3.3", 
      "tslib": "^1.9.0", 
      "zone.js": "~0.8.26" 
   }, 
   "devDependencies": { 
      "@angular-devkit/build-angular": "~0.13.0", 
      "@angular/cli": "~7.3.2", 
      "@angular/compiler-cli": "~7.2.0", 
      "@angular/language-service": "~7.2.0", 
      "@types/node": "~8.9.4", 
      "@types/jasmine": "~2.8.8", 
      "@types/jasminewd2": "~2.0.3", 
      "codelyzer": "~4.5.0", 
      "jasmine-core": "~2.99.1", 
      "jasmine-spec-reporter": "~4.2.1", 
      "karma": "~3.1.1", 
      "karma-chrome-launcher": "~2.2.0", 
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": "~5.4.0", 
      "ts-node": "~7.0.0", 
      "tslint": "~5.11.0", 
      "typescript": "~3.2.2"
   } 
}

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      MatSidenavModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

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

imports: [
   BrowserModule,
   AppRoutingModule,
   HttpClientModule,
   ScrollDispatchModule,
   DragDropModule,
   ReactiveFormsModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   MatSidenavModule
],

app.component.ts ดังภาพด้านล่าง -

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

ให้เราเพิ่มการสนับสนุน material-css ใน styles.css.

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

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

เมนู

ในการเพิ่มเมนู <mat-menu></mat-menu>ถูกนำมาใช้. file และ Save Asรายการจะถูกเพิ่มลงในปุ่มใต้เมนูเสื่อ มีการเพิ่มปุ่มหลักMenu. การอ้างอิงของสิ่งเดียวกันจะได้รับ<mat-menu> โดยใช้ [matMenuTriggerFor]="menu" และใช้เมนูกับ # in<mat-menu>.

app.component.html

<button mat-button [matMenuTriggerFor] = "menu">Menu</button> 
<mat-menu #menu = "matMenu"> 
   <button mat-menu-item> File </button> 
   <button mat-menu-item> Save As </button>
</mat-menu>

ภาพด้านล่างจะปรากฏในเบราว์เซอร์ -

เมื่อคลิกที่เมนูจะแสดงรายการที่อยู่ข้างใน -

SideNav

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

app.component.html

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

app.component.css

.example-container { 
   width: 500px;  
   height: 300px; 
   border: 1px solid rgba(0, 0, 0, 0.5); 
}
.example-sidenav { 
   padding: 20px; 
   width: 150px; 
   font-size: 20px;
   border: 1px solid rgba(0, 0, 0, 0.5); 
   background-color: #ccc; 
   color:white; 
}

ต่อไปนี้คือการแสดงเมนูและ sidenav ในเบราว์เซอร์ -

แผงต่อไปนี้จะเปิดขึ้นทางด้านซ้ายหากเราคลิกที่ Open Sidenav -

เลือกวันที่

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

ที่นี่เราได้นำเข้าโมดูลเช่น MatDatepickerModule, MatInputModule และ MatNativeDateModule

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

import { Component } from '@angular/core'; 
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', s
   tyleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   constructor() {} 
}

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

<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date"> 
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

เพิ่ม css ส่วนกลางใน style.css -

/* You can add global styles to this file, and also 
import other style files */ 
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body { 
   font-family: Roboto, Arial, sans-serif; 
   margin: 10; 
}
.basic-container { 
   padding: 30px; 
}
.version-info { 
   font-size: 8pt; 
   float: right;
}

datepicker จะแสดงในเบราว์เซอร์ดังที่แสดงด้านล่าง -

ในบทนี้จะกล่าวถึงหัวข้อต่อไปนี้ -

• เพื่อทดสอบโครงการ Angular 7
• เพื่อสร้างโครงการ Angular 7

การทดสอบโครงการ Angular 7

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

สำหรับการเปลี่ยนแปลงใด ๆ ที่เพิ่มเข้าไปในคอมโพเนนต์บริการคำสั่งหรือไฟล์อื่น ๆ ที่สร้างขึ้นคุณสามารถรวมกรณีทดสอบของคุณไว้ในไฟล์ .spec.ts ตามลำดับ ดังนั้นการทดสอบหน่วยส่วนใหญ่สามารถครอบคลุมได้ตั้งแต่เริ่มต้น

ในการรันกรณีทดสอบคำสั่งที่ใช้มีดังนี้ −

ng test

ด้านล่างนี้คือไฟล์ app.component.spec.ts สำหรับ app.component.ts -

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('angular7-app');
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   })
});

app.component.ts

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

ตอนนี้ให้เรารันคำสั่งเพื่อดูกรณีทดสอบที่กำลังทำงานอยู่

สถานะกรณีทดสอบจะแสดงในบรรทัดคำสั่งดังที่แสดงด้านบนและจะเปิดขึ้นในเบราว์เซอร์ดังที่แสดงด้านล่าง -

ในกรณีที่เกิดความผิดพลาดจะแสดงรายละเอียดดังนี้ -

ในการทำเช่นนั้นให้เราเปลี่ยน app.component.spec.ts ดังนี้ -

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Angular 7'); // change the 
      title from angular7-app to Angular 7
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   });
});

ในไฟล์ด้านบนกรณีทดสอบจะตรวจสอบชื่อเรื่อง Angular 7. แต่ใน app.component.ts เรามีชื่อเรื่องangular7-app ดังแสดงด้านล่าง -

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

ที่นี่กรณีทดสอบจะล้มเหลวและด้านล่างนี้เป็นรายละเอียดที่แสดงในบรรทัดคำสั่งและเบราว์เซอร์

ในบรรทัดคำสั่ง

หน้าจอต่อไปนี้จะแสดงในบรรทัดคำสั่ง -

ในเบราว์เซอร์

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

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

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

การสร้างโครงการ Angular 7

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

การกำหนดค่าสำหรับการสร้างเช่นการผลิตการจัดเตรียมการพัฒนาการทดสอบจำเป็นต้องกำหนดไว้ในไฟล์ src/environments.

ในปัจจุบันเรามีสภาพแวดล้อมต่อไปนี้ที่กำหนดไว้ใน src / environment -

คุณสามารถเพิ่มไฟล์ตามบิลด์ของคุณไปยัง src / environment ได้เช่น environment.staging.ts, enviornment.testing.ts เป็นต้น

ในปัจจุบันเราจะพยายามสร้างเพื่อสิ่งแวดล้อมในการผลิต ไฟล์environment.ts มีการตั้งค่าสภาพแวดล้อมเริ่มต้นและรายละเอียดของไฟล์ดังนี้ -

export const environment = {
   production: false
};

ในการสร้างไฟล์สำหรับการผลิตเราจำเป็นต้องสร้างไฟล์ production: true ใน environment.ts ดังนี้ -

export const environment = {
   production: true
};

ไฟล์สภาพแวดล้อมดีฟอลต์จะต้องถูกอิมพอร์ตภายในคอมโพเนนต์ดังนี้ -

app.component.ts

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

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

การเปลี่ยนสภาพแวดล้อมจากค่าดีฟอลต์เป็นการใช้งานจริงซึ่งเรากำลังพยายามทำนั้นถูกกำหนดไว้ใน angular.json fileReplacements ส่วนดังนี้ -

"production": {
   "fileReplacements": [
      {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
      }
   ],
}

เมื่อคำสั่งสำหรับการสร้างทำงานไฟล์จะถูกแทนที่เป็น src/environments/environment.prod.ts. สามารถเพิ่มการกำหนดค่าเพิ่มเติมเช่นการจัดเตรียมหรือการทดสอบได้ที่นี่ดังแสดงในตัวอย่างด้านล่าง -

"configurations": {
   "production": { ... },
   "staging": {
      "fileReplacements": [
         {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.staging.ts"
         }
      ]
   }
}

ดังนั้นคำสั่งในการรันบิลด์จึงเป็นดังนี้ -

ng build --configuration = production // for production environmnet
ng build --configuration = staging // for stating enviroment

ตอนนี้ให้เรารันคำสั่ง build สำหรับการผลิตคำสั่งจะสร้างโฟลเดอร์ dist ภายในโปรเจ็กต์ของเราซึ่งจะมีไฟล์สุดท้ายหลังจากสร้าง

ไฟล์สุดท้ายถูกสร้างขึ้นภายใน dist / โฟลเดอร์ซึ่งสามารถโฮสต์บนเซิร์ฟเวอร์ที่ใช้งานจริงในตอนท้ายของคุณ