คู่มือผู้ใช้การเขียนโปรแกรม LUMIFY WORK Angular 12

LUMIFY WORK การเขียนโปรแกรมเชิงมุม 12

ทำไมต้องเรียนหลักสูตรนี้

หลักสูตรการเขียนโปรแกรม Angular 12 ที่ครอบคลุมนี้เป็นการผสมผสานระหว่างการเรียนรู้เชิงทฤษฎีและห้องปฏิบัติการเชิงปฏิบัติ ซึ่งรวมถึงการแนะนำ Angular ตามด้วย TypeScript ส่วนประกอบ คำสั่ง บริการ ไคลเอ็นต์ HTTP การทดสอบ และการดีบัก
หลักสูตรนี้เต็มไปด้วยข้อมูลที่เป็นประโยชน์และนำไปปฏิบัติได้จริง ซึ่งคุณสามารถนำไปใช้กับงานของคุณได้ทันที เรียนรู้พื้นฐานของการพัฒนา Angular 12 ขั้นพื้นฐาน เช่น แอปพลิเคชันเบราว์เซอร์หน้าเดียวแบบตอบสนอง webไซต์และแอปพลิเคชันมือถือแบบไฮบริด
บันทึก: เรายังสามารถส่งการฝึกอบรมเกี่ยวกับ Angular เวอร์ชันอื่นๆ ได้อีกด้วย กรุณาติดต่อเราเพื่อสอบถามข้อมูลหรือลงทะเบียนแสดงความสนใจ

คุณจะได้เรียนรู้อะไร
เมื่อสำเร็จหลักสูตรนี้แล้วคุณจะสามารถ:

• พัฒนาแอปพลิเคชันเชิงมุมหน้าเดียวโดยใช้ Typescript
• ตั้งค่าสภาพแวดล้อมการพัฒนาเชิงมุมที่สมบูรณ์
• สร้างส่วนประกอบ คำสั่ง บริการ ไปป์ แบบฟอร์ม และเครื่องตรวจสอบแบบกำหนดเอง
• จัดการงานการดึงข้อมูลเครือข่ายขั้นสูงโดยใช้ Observables ใช้ข้อมูลจาก REST web บริการที่ใช้ไคลเอ็นต์ Angular HT TP จัดการการเชื่อมต่อข้อมูลแบบพุชโดยใช้ Webโปรโตคอลซ็อกเก็ต
• ทำงานร่วมกับ Angular Pipes เพื่อจัดรูปแบบข้อมูล
• ใช้คุณสมบัติเราเตอร์ส่วนประกอบเชิงมุมขั้นสูง
• ทดสอบและดีบักแอปพลิเคชันเชิงมุมโดยใช้เครื่องมือในตัว

วิชาเรียน

บทที่ 1 การแนะนำเชิงมุม

• Angular คืออะไร?
• คุณสมบัติหลักของกรณีการใช้งานที่เหมาะสมของ Angular Framework
• การสร้างบล็อกของแอปพลิเคชันเชิงมุม สถาปัตยกรรมพื้นฐานของแอปพลิเคชันเชิงมุมการติดตั้งและการใช้งานเชิงมุม
• กายวิภาคของแอปพลิเคชันเชิงมุมที่รันแอปพลิเคชัน
• การสร้างและการปรับใช้แอปพลิเคชันเชิงมุมสำหรับแอพมือถือแบบเนทีฟ
• สรุป

บทที่ 2 ความรู้เบื้องต้นเกี่ยวกับ TypeScript

• ภาษาการเขียนโปรแกรมสำหรับใช้กับไวยากรณ์ Angular TypeScript
• บรรณาธิการโปรแกรม
• ระบบประเภท – การกำหนดตัวแปร
• ระบบประเภท - การกำหนดอาร์เรย์
• ประเภทดั้งเดิมพื้นฐาน
• พิมพ์ฟังก์ชั่น
• ประเภทการอนุมาน
• การกำหนดคลาส
• วิธีการเรียนคลาส
• การควบคุมการมองเห็น
• ตัวสร้างคลาส
• ตัวสร้างคลาส – แบบฟอร์มสำรองฟิลด์ที่ไม่ได้เตรียมใช้งาน
• อินเทอร์เฟซ
• การทำงานกับโมดูล ES6
• var กับ ให้
• ฟังก์ชั่นลูกศร
• สตริงเทมเพลตไวยากรณ์แบบกระชับฟังก์ชันลูกศร
• ข้อมูลทั่วไปในชั้นเรียน
• ข้อมูลทั่วไปในฟังก์ชั่น
• สรุป

บทที่ 3 ส่วนประกอบ

• ส่วนประกอบคืออะไร?
• อดีตกาลampเลอคอมโพเนนต์
• การสร้างส่วนประกอบโดยใช้ Angular CLI
• คลาสส่วนประกอบ
• มัณฑนากร @Component
• การลงทะเบียนส่วนประกอบเข้ากับเทมเพลตส่วนประกอบของโมดูล
• Exampเลอ: เทมเพลต HelloComponent
• Example: คลาส HelloComponent โดยใช้ส่วนประกอบ
• เรียกใช้แอปพลิเคชัน
• ลำดับชั้นของคอมโพเนนต์
• ส่วนประกอบรูทของแอปพลิเคชัน
• บูทสแตรป File
• Hooks วงจรชีวิตของส่วนประกอบ เช่นampตะขอวงจรชีวิต
• สไตล์ CSS
• สรุป

บทที่ 4 เทมเพลตส่วนประกอบ

• เทมเพลต
• ตำแหน่งเทมเพลต
• ไวยากรณ์หนวด {{ }}
• การตั้งค่าคุณสมบัติองค์ประกอบ DOM
• การตั้งค่าข้อความเนื้อหาองค์ประกอบ
• การผูกเหตุการณ์
• ตัวจัดการเหตุการณ์นิพจน์
• ป้องกันการจัดการเริ่มต้น
• คำสั่งคุณสมบัติ
• ใช้สไตล์โดยการเปลี่ยนคลาส CSS
• Exampเลอ: ngClass
• การใช้สไตล์โดยตรง
• คำสั่งโครงสร้าง
• ดำเนินการเทมเพลตตามเงื่อนไข
• Exampเลอ: ngIf
• การวนซ้ำโดยใช้ ngFor
• ngสำหรับตัวแปรท้องถิ่น
• การจัดการคอลเลกชัน เช่นample – การลบรายการ
• การติดตามรายการด้วย ngFor การสลับองค์ประกอบด้วยองค์ประกอบการจัดกลุ่ม ngSwitch
• สรุปตัวแปรอ้างอิงเทมเพลต

บทที่ 5 การสื่อสารระหว่างองค์ประกอบ

• พื้นฐานการสื่อสาร
• สถาปัตยกรรมการไหลของข้อมูล
• การเตรียมเด็กเพื่อรับข้อมูล
• ส่งข้อมูลจากผู้ปกครอง
• ข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าคุณสมบัติ
• การยิงเหตุการณ์จากส่วนประกอบ
• @Output() เช่นample – องค์ประกอบลูก @Output() เช่นample – องค์ประกอบหลัก
• การผูกสองทางแบบเต็ม
• การตั้งค่าการเชื่อมโยงข้อมูลแบบสองทางในพาเรนต์
• สรุป

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

• แบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต
• การนำเข้าโมดูลแบบฟอร์ม
• แนวทางพื้นฐาน
• การตั้งค่าแบบฟอร์ม
• รับข้อมูลผู้ใช้
• ละเว้นแอตทริบิวต์ ngForm
• เริ่มต้นแบบฟอร์ม
• การผูกข้อมูลแบบสองทาง
• การตรวจสอบแบบฟอร์ม
• เครื่องมือตรวจสอบเชิงมุม
• การแสดงสถานะการตรวจสอบโดยใช้คลาสประเภทอินพุตเพิ่มเติม
• ช่องกาเครื่องหมาย
• เลือกฟิลด์ (ดรอปดาวน์)
• ตัวเลือกการแสดงผลสำหรับฟิลด์วันที่เลือก (ดรอปดาวน์)
• ปุ่มตัวเลือก
• สรุป

บทที่ 7 แบบฟอร์มปฏิกิริยา

• แบบฟอร์มปฏิกิริยาสิ้นสุดลงview
• บล็อกอาคาร
• นำเข้า ReactiveFormsModule
• สร้างแบบฟอร์ม
• ออกแบบเทมเพลต
• รับค่าอินพุต
• การเริ่มต้นช่องป้อนข้อมูล
• การตั้งค่าแบบฟอร์ม
• การสมัครรับการเปลี่ยนแปลงอินพุต
• การตรวจสอบความถูกต้อง
• เครื่องมือตรวจสอบในตัว
• แสดงข้อผิดพลาดในการตรวจสอบ
• เครื่องมือตรวจสอบแบบกำหนดเอง
• การใช้เครื่องมือตรวจสอบแบบกำหนดเอง
• การจัดหาการกำหนดค่าให้กับ Custom Validator
• FormArray – เพิ่มอินพุตแบบไดนามิก
• FormArray – คลาสส่วนประกอบ
• FormArray – เทมเพลต
• FormArray – ค่า
• Sub FormGroups – คลาสส่วนประกอบ
• Sub FormGroups – เทมเพลต HTML
• เหตุใดจึงต้องใช้ Sub FormGroups
• สรุป

บทที่ 8 บริการและการพึ่งพาการฉีด

• บริการคืออะไร?
• การสร้างบริการขั้นพื้นฐาน
• ชั้นบริการ
• Dependency Injection คืออะไร
• การฉีดอินสแตนซ์บริการ
• หัวฉีด
• ลำดับชั้นของหัวฉีด
• การลงทะเบียนบริการกับ Root Injector
• การลงทะเบียนบริการกับหัวฉีดของส่วนประกอบ
• ลงทะเบียนบริการด้วย Feature Module Injector
• ลงทะเบียนบริการได้ที่ไหน?
• การฉีดการพึ่งพาในสิ่งประดิษฐ์อื่น ๆ ให้การเสริมการพึ่งพาการใช้งานสำรองและ @Host
• การพึ่งพาการฉีดและ @Optional
• สรุป

บทที่ 9 ไคลเอ็นต์ HTTP

• ไคลเอ็นต์ HT TP เชิงมุม
• การใช้ไคลเอนต์ HT TP – โอเวอร์view
• การนำเข้า HttpClientModule
• บริการโดยใช้ HttpClient
• ทำการร้องขอ GET
• วัตถุที่สังเกตได้ทำหน้าที่อะไร?
• การใช้บริการในส่วนประกอบ
• การจัดการข้อผิดพลาดคอมโพเนนต์ไคลเอ็นต์ PeopleService
• การปรับแต่งออบเจ็กต์ข้อผิดพลาด
• ทำการร้องขอ POST
• ทำการร้องขอ PUT
• ทำการร้องขอการลบ

บทที่ 10 ไปป์และการจัดรูปแบบข้อมูล

• ท่อคืออะไร?
• ท่อบิวท์อิน
• การใช้ไปป์ในเทมเพลต HTML Chaining Pipes
• ไปป์สากล (i18n) กำลังโหลดข้อมูลสถานที่
• ท่อวันที่
• เบอร์ท่อ
• ท่อสกุลเงิน
• สร้างไปป์แบบกำหนดเอง
• ท่อสั่งทำพิเศษ เช่นample
• การใช้ไปป์แบบกำหนดเอง
• การใช้ไปป์กับ ngFor
• ท่อกรอง
• หมวดหมู่ท่อ: บริสุทธิ์และไม่บริสุทธิ์
• สรุป
• ท่อเพียวเช่นample
• ท่อไม่บริสุทธิ์ เช่นample
• สรุป

บทที่ 11 ความรู้เบื้องต้นเกี่ยวกับแอปพลิเคชันหน้าเดียว

• Single Page Application (SPA) แบบดั้งเดิมคืออะไร Web แอปพลิเคชัน
• ขั้นตอนการทำงานของสปา
• แอปพลิเคชันหน้าเดียว Advantagเป็น API ประวัติ HTML5
• ความท้าทายของสปา
• การนำ SPA ไปใช้โดยใช้การสรุปเชิงมุม

บทที่ 12 เราเตอร์ส่วนประกอบเชิงมุม

• เราเตอร์ส่วนประกอบ
• View การนำทาง
• API เราเตอร์เชิงมุม
• การสร้างแอปพลิเคชันที่เปิดใช้งานเราเตอร์
• การโฮสต์ส่วนประกอบที่กำหนดเส้นทาง
• การนำทางโดยใช้ลิงก์และปุ่ม
• การนำทางตามโปรแกรม
• การส่งผ่านพารามิเตอร์เส้นทาง
• การนำทางด้วยพารามิเตอร์เส้นทาง
• การรับค่าพารามิเตอร์เส้นทาง
• การดึงข้อมูลพารามิเตอร์เส้นทางแบบซิงโครนัส
• การดึงพารามิเตอร์เส้นทางแบบอะซิงโครนัส
• พารามิเตอร์การค้นหา
• จัดหาพารามิเตอร์แบบสอบถาม
• การดึงพารามิเตอร์แบบสอบถามแบบอะซิงโครนัส
• ปัญหาเกี่ยวกับคู่มือ URL รายการและการบุ๊กมาร์ก
• สรุป

บทที่ 13 ไคลเอนต์ HTTP ขั้นสูง

• ขอตัวเลือก
• การส่งคืนวัตถุ HttpResponse
• การตั้งค่าส่วนหัวคำขอ
• การสร้างสิ่งที่สังเกตได้ใหม่
• การสร้างสิ่งที่สังเกตได้ง่าย
• ตัวดำเนินการที่สังเกตได้ของวิธีการสร้างที่สังเกตได้
• ผู้ประกอบการแผนที่และตัวกรอง
• ตัวดำเนินการ flatMap()
• ตัวดำเนินการ tap()
• ตัวรวม zip()
• การแคชการตอบสนอง HT TP
• การโทร HT TP ตามลำดับ
• การโทรแบบขนาน
• การปรับแต่งวัตถุข้อผิดพลาดด้วย catchError()
• ข้อผิดพลาดในไปป์ไลน์
• การกู้คืนข้อผิดพลาด
• สรุป

บทที่ 14 โมดูลเชิงมุม

• ทำไมต้องโมดูลเชิงมุม?
• กายวิภาคของคลาสโมดูล
• คุณสมบัติ @NgModule
• โมดูลคุณสมบัติ
• Exampโครงสร้างโมดูล
• สร้างโมดูลโดเมน
• สร้างคู่โมดูลกำหนดเส้นทาง/กำหนดเส้นทาง
• สร้างโมดูลบริการ
• การสร้างโมดูลทั่วไป

บทที่ 15 การกำหนดเส้นทางขั้นสูง

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

บทที่ 16 หน่วยการทดสอบแอปพลิเคชันเชิงมุม

• หน่วยทดสอบสิ่งประดิษฐ์เชิงมุม
• เครื่องมือทดสอบ
• ขั้นตอนการทดสอบทั่วไป
• ผลการทดสอบ
• จัสมิน เทสต์ สวีท
• ข้อมูลจำเพาะของจัสมิน (การทดสอบหน่วย)
• ความคาดหวัง (การยืนยัน)
• จับคู่
• Exampของการใช้ Matchers
• การใช้คุณสมบัติไม่ใช่
• ติดตั้งและรื้อถอนในชุดทดสอบหน่วย
• Exampของ beforeEach และ afterEach Functions
• โมดูลทดสอบเชิงมุม
• Exampโมดูลทดสอบเชิงมุม
• การทดสอบบริการ
• การฉีดอินสแตนซ์บริการ
• ทดสอบวิธีการซิงโครนัส
• ทดสอบวิธีการแบบอะซิงโครนัส
• ใช้ไคลเอนต์จำลอง HT TP
• จัดหาคำตอบสำเร็จรูป
• การทดสอบส่วนประกอบ
• โมดูลทดสอบส่วนประกอบ
• การสร้างอินสแตนซ์ส่วนประกอบ
• คลาส ComponentFixture
• การทดสอบส่วนประกอบพื้นฐาน
• คลาส DebugElement
• การจำลองการโต้ตอบของผู้ใช้
• สรุป

บทที่ 17 การดีบัก

• เกินview ของการดีบักเชิงมุม
• Viewการใช้โค้ด TypeScript ใน Debugger
• การใช้คำสำคัญดีบักเกอร์
• การบันทึกการดีบัก
• Angular DevTools คืออะไร?
• การใช้ Angular DevTools
• Angular DevTools – โครงสร้างส่วนประกอบ
• Angular DevTools – การดำเนินการตรวจจับการเปลี่ยนแปลง
• การจับข้อผิดพลาดทางไวยากรณ์
• สรุป

แบบฝึกหัดในห้องปฏิบัติการ

• แล็บ 1 ความรู้เบื้องต้นเกี่ยวกับเชิงมุม
• แล็บ 2 ความรู้เบื้องต้นเกี่ยวกับ TypeScript
• ห้องปฏิบัติการ 3 ความรู้เบื้องต้นเกี่ยวกับส่วนประกอบ
• แล็บ 4. เทมเพลตส่วนประกอบ
• แล็บ 5. สร้างส่วนประกอบแกลเลอรีรูปภาพ
• แล็บ 6 แบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต
• แล็บ 7 สร้างแบบฟอร์มแก้ไข
• แล็บ 8 แบบฟอร์มปฏิกิริยา
• ห้องปฏิบัติการ 9. พัฒนาบริการ
• แล็บ 10 พัฒนาไคลเอ็นต์ HT TP
• แล็บ 11. ใช้ท่อ
• แล็บ 12. แอปพลิเคชันหน้าเดียวพื้นฐานโดยใช้เราเตอร์ แล็บ 13. สร้างแอปพลิเคชันหน้าเดียว (SPA)
• แล็บ 14 ไคลเอ็นต์ HT TP ขั้นสูง
• แล็บ 15. การใช้ Angular Bootstrap
• แล็บ 16 กำลังโหลดโมดูล Lazy
• แล็บ 17 การกำหนดเส้นทางขั้นสูง
• แล็บ 18 การทดสอบหน่วย
• แล็บ 19 การดีบักแอปพลิเคชันเชิงมุม

หลักสูตรนี้เหมาะสำหรับใคร?
หลักสูตรนี้มุ่งเป้าไปที่ทุกคนที่ต้องการเรียนรู้พื้นฐานของการพัฒนา Angular 12 และนำไปใช้กับการสร้างสรรค์ web แอปพลิเคชันได้ทันที นอกจากนี้เรายังสามารถจัดส่งและปรับแต่งหลักสูตรการฝึกอบรมนี้สำหรับกลุ่มขนาดใหญ่ ซึ่งช่วยประหยัดเวลา เงิน และทรัพยากรขององค์กรของคุณ

ข้อกำหนดเบื้องต้น
Web จำเป็นต้องมีประสบการณ์การพัฒนาโดยใช้ HTML, CSS และ JavaScript เพื่อให้ได้รับประโยชน์สูงสุดจากหลักสูตร Angular นี้ ความรู้เกี่ยวกับเบราว์เซอร์ DOM ก็มีประโยชน์เช่นกัน ไม่จำเป็นต้องมีประสบการณ์ Angular มาก่อนกับ AngularJS หรือ Angular เวอร์ชันใดๆ
https://www.lumifywork.com/en-au/courses/angular-12-programming/