เลือกภาษาของคุณ
คอร์ส Angular
มีนักศึกษามากกว่า 2 ล้านคนทั่วโลก

คอร์ส Angular

เชี่ยวชาญ Angular ตั้งแต่พื้นฐานและสร้างแอปพลิเคชันหน้าเดียวที่พร้อมใช้งานจริงได้อย่างมั่นใจ คอร์สนี้ครอบคลุมทุกอย่างตั้งแต่พื้นฐาน TypeScript และสถาปัตยกรรมคอมโพเนนต์ ไปจนถึงการจัดการสถานะ NgRx, SSR และการดีพลอยแบบ CI/CD ไม่ว่าคุณกำลังยกระดับทักษะฟรอนต์เอนด์หรือเปลี่ยนผ่านสู่การพัฒนา Angular ระดับมืออาชีพ นี่คือแผนที่ทางเทคนิคที่สมบูรณ์ที่คุณต้องการ

Dedika สำหรับองค์กร

สิ่งที่คุณจะได้เรียนรู้:

คุณจะได้เรียนรู้วิธีการสแกฟโฟลด์และจัดโครงสร้างแอปพลิเคชัน Angular โดยใช้โมดูล คอมโพเนนต์ และเซอร์วิส คุณจะเชี่ยวชาญฟอร์มแบบขับเคลื่อนด้วยเทมเพลตและแบบรีแอคทีฟ นำการกำหนดเส้นทางที่ซับซ้อนด้วยการ์ดและรีโซลเวอร์ไปใช้ และจัดการสถานะแอปพลิเคชันด้วย NgRx คอร์สนี้ยังครอบคลุมการปรับประสิทธิภาพ การทดสอบหน่วยและแบบครบวงจร และการดีพลอยบิลด์สำหรับการใช้งานจริง หัวข้อขั้นสูงรวมถึง Angular Universal สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ สถาปัตยกรรมไมโครฟรอนต์เอนด์ด้วย Module Federation และการกำหนดค่า Progressive Web App เมื่อจบคอร์ส คุณจะมีทักษะในการสร้าง ทดสอบ และส่งมอบแอปพลิเคชัน Angular ที่ปรับขนาดได้

วิธีการเรียนที่ใช้งานได้จริง คอร์ส Angular

วิธีฝึกฝนของคุณ คอร์ส Angular

สำหรับคุณที่เป็นบริษัทและต้องการฝึกอบรมทีมงาน

ที่ Dedika สำหรับองค์กร คอร์สเรียนมาพร้อมกับแบบฝึกหัดและตัวอย่างที่เกี่ยวข้องกับธุรกิจของคุณเอง และปรับให้เหมาะกับความต้องการของบริษัทคุณโดยเฉพาะ

คลิกที่นี่

เนื้อหาของหลักสูตร

8 บท • 40 บทเรียนระยะเวลาระหว่าง 4 ถึง 360 ชั่วโมง (คุณเป็นผู้ตัดสินใจ)

บทที่ 1ดูรายละเอียด

พื้นฐาน Angular และการตั้งค่าสภาพแวดล้อม

  • บทเรียน 1 • โมดูล Angular และการบูตสแตรปแอปพลิเคชัน

    อธิบาย NgModules, AppModule หลัก และวิธีที่ Angular บูตสแตรปแอปพลิเคชัน มอบบริบทเชิงโครงสร้างที่จำเป็นก่อนเริ่มสร้างคอมโพเนนต์

  • บทเรียน 2 • TypeScript ที่จำเป็นสำหรับ Angular

    แนะนำประเภท, อินเทอร์เฟซ และเดคคอเรเตอร์ของ TypeScript ที่จำเป็นสำหรับการเขียนโค้ด Angular อย่างมั่นใจ เชื่อมโยงความรู้ JavaScript สู่ระบบนิเวศที่ใช้ประเภทของ Angular

  • บทเรียน 3 • แนะนำ Angular Framework

    ครอบคลุมบทบาทของ Angular ในการพัฒนาฟรอนต์เอนด์สมัยใหม่และสถาปัตยกรรมแบบ MVC กำหนดแนวคิดพื้นฐานสำหรับหัวข้ออื่นๆ ทั้งหมดของเฟรมเวิร์ก

  • บทเรียน 4 • การตั้งค่าสภาพแวดล้อมการพัฒนา

    ติดตั้งและกำหนดค่า Node.js, npm และ Angular CLI ทำให้แน่ใจว่าผู้เรียนทุกคนมีพื้นที่ทำงานภายในเครื่องที่สอดคล้องและสามารถทำซ้ำได้

  • บทเรียน 5 • การสแกฟโฟลด์โปรเจ็กต์ Angular แรกของคุณ

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

บทที่ 2ดูรายละเอียด

คอมโพเนนต์, เทมเพลต และการผูกข้อมูล

  • บทเรียน 1 • คำสั่งเชิงโครงสร้างในตัว

    ประยุกต์ใช้ *ngIf, *ngFor และ *ngSwitch เพื่อควบคุมโครงสร้าง DOM แบบไดนามิก สาธิตวิธีการที่คำสั่งขยายความสามารถในการแสดงออกของเทมเพลต

  • บทเรียน 2 • การผูกพร็อพเพอร์ตี้และเหตุการณ์

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

  • บทเรียน 3 • ไวยากรณ์เทมเพลตและนิพจน์

    ครอบคลุมภาษา Expression ของเทมเพลต Angular, การนำทางแบบปลอดภัย และตัวแปรอ้างอิงเทมเพลต เปิดใช้งานการเรนเดอร์เนื้อหาแบบไดนามิกภายในมุมมองของคอมโพเนนต์

  • บทเรียน 4 • Lifecycle Hooks ของคอมโพเนนต์

    สำรวจลำดับ Lifecycle Hook ทั้งหมดตั้งแต่ ngOnInit จนถึง ngOnDestroy สอนว่าเมื่อใดและทำไมจึงควรใช้แต่ละ Hook สำหรับการเริ่มต้นและการล้างข้อมูล

  • บทเรียน 5 • โครงสร้างของ Angular Component

    แยกแยะ @Component เดคคอเรเตอร์, เมทาดาทา พร็อพเพอร์ตี้ และวงจรชีวิตของคอมโพเนนต์ กำหนดหน่วยการสร้างพื้นฐานสำหรับทุกองค์ประกอบ UI ของ Angular

บทที่ 3ดูรายละเอียด

การสื่อสารของคอมโพเนนต์และคำสั่ง

  • บทเรียน 1 • การคิวรี ViewChild และ ContentChild

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

  • บทเรียน 2 • การสื่อสารจากคอมโพเนนต์หลักไปยังรองด้วย @Input

    ใช้ @Input เพื่อส่งข้อมูลลงมาตามต้นไม้คอมโพเนนต์และตรวจสอบความถูกต้องของข้อมูลด้วย Setter กำหนดรูปแบบการไหลของข้อมูลลงด้านล่างหลักใน Angular

  • บทเรียน 3 • การสร้างคำสั่งเชิงโครงสร้างแบบกำหนดเอง

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

  • บทเรียน 4 • การสร้างคำสั่งแอตทริบิวต์แบบกำหนดเอง

    สร้างคำสั่งที่ปรับเปลี่ยนลักษณะหรือพฤติกรรมของอิลิเมนต์โฮสต์โดยไม่เปลี่ยนโครงสร้าง DOM ตอกย้ำรูปแบบคำสั่งที่แนะนำไว้ในบทที่ 2

  • บทเรียน 5 • การสื่อสารจากคอมโพเนนต์รองไปยังหลักด้วย @Output

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

บทที่ 4ดูรายละเอียด

เซอร์วิส, การฉีดการพึ่งพา และ HTTP

  • บทเรียน 1 • การสร้างและให้บริการ Angular Services

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

  • บทเรียน 2 • HTTP Client และการผสานรวม REST API

    กำหนดค่า HttpClientModule และดำเนินการร้องขอ GET, POST, PUT และ DELETE เชื่อมต่อเลเยอร์เซอร์วิสกับแหล่งข้อมูลแบ็กเอนด์จริง

  • บทเรียน 3 • การจัดการข้อผิดพลาดและ HTTP Interceptor

    ใช้งานการจัดการข้อผิดพลาดแบบโกลบอลด้วย catchError และการเปลี่ยนแปลงคำขอ/การตอบสนองด้วย Interceptor สร้างรูปแบบการสื่อสาร HTTP ที่พร้อมสำหรับการใช้งานจริง

  • บทเรียน 4 • การฉีดการพึ่งพาเชิงลึก

    สำรวจลำดับชั้นของ DI, โทเค็นการฉีด และประเภทของ Provider เปิดใช้งานการควบคุมอย่างละเอียดว่าการพึ่งพาถูกแก้ไขอย่างไรทั่วทั้งแอป

  • บทเรียน 5 • แนะนำ RxJS Observables

    แนะนำ Observables, Subjects และโอเปอเรเตอร์หลักที่จำเป็นสำหรับการทำงานกับ API แบบอะซิงโครนัสของ Angular เตรียมผู้เรียนให้พร้อมสำหรับรูปแบบการจัดการ HTTP และเหตุการณ์แบบรีแอกทีฟ

บทที่ 5ดูรายละเอียด

Angular Routing และการนำทาง

  • บทเรียน 1 • Route Guards และการควบคุมการเข้าถึง

    ใช้งาน Guards แบบ CanActivate, CanDeactivate และ CanLoad เพื่อปกป้องเส้นทาง ผสานรวมการยืนยันตัวตนและการอนุญาตเข้าในเลเยอร์การนำทาง

  • บทเรียน 2 • Lazy Loading และ Route Resolvers

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

  • บทเรียน 3 • เส้นทางซ้อนและ Named Outlets

    จัดโครงสร้างเส้นทางลูกภายใต้เส้นทางแม่และใช้ Named Outlets สำหรับมุมมองเสริม รองรับข้อกำหนดเลย์เอาต์ที่ซับซ้อนในแอปพลิเคชันขนาดใหญ่

  • บทเรียน 4 • การตั้งค่า Router และการนำทางพื้นฐาน

    กำหนดค่า RouterModule ด้วยคำจำกัดความของเส้นทางและเพิ่ม router-outlet และ routerLink กำหนดพื้นฐานสำหรับฟีเจอร์การนำทางทั้งหมด

  • บทเรียน 5 • Route Parameters และ Query Strings

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

บทที่ 6ดูรายละเอียด

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

  • บทเรียน 1 • ฟอร์มไดนามิกด้วย FormArray

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

  • บทเรียน 2 • ตัวตรวจสอบและการตรวจสอบแบบกำหนดเอง

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

  • บทเรียน 3 • การส่งฟอร์มและการจัดการสถานะ

    จัดการการส่งฟอร์ม, การรีเซ็ต และสถานะ dirty/touched เพื่อมอบ UX ที่สวยงาม เชื่อมต่อข้อมูลฟอร์มเข้ากับการเรียกใช้เซอร์วิสที่แนะนำในบทที่ 4

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

    ใช้ ngForm, ngModel และตัวตรวจสอบในตัวเพื่อสร้างฟอร์มแบบประกาศในเทมเพลต แนะนำแนวคิดฟอร์มโดยใช้ TypeScript น้อยที่สุด

  • บทเรียน 5 • พื้นฐานของฟอร์มรีแอกทีฟ

    สร้างฟอร์มแบบโปรแกรมด้วย FormControl, FormGroup และ ReactiveFormsModule ให้การควบคุมสถานะฟอร์มและการตรวจสอบที่ชัดเจนและทดสอบได้

บทที่ 7ดูรายละเอียด

การจัดการสถานะและรูปแบบรีแอกทีฟ

  • บทเรียน 1 • NgRx Entity และ DevTools

    ทำให้การจัดการคอลเลกชันง่ายขึ้นด้วย NgRx Entity และตรวจสอบสถานะด้วย Redux DevTools เร่งการพัฒนาและการดีบักฟีเจอร์ที่ใช้ Store อย่างมาก

  • บทเรียน 2 • แนะนำ NgRx Store

    ติดตั้ง NgRx และกำหนด Actions, Reducers และ Store สำหรับฟีเจอร์สไลซ์ กำหนดรูปแบบ Redux ภายในระบบนิเวศของ Angular

  • บทเรียน 3 • การจัดการสถานะแบบใช้เซอร์วิสด้วย BehaviorSubject

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

  • บทเรียน 4 • NgRx Effects สำหรับ Side Effects

    จัดการการดำเนินการแบบอะซิงโครนัสเช่นการเรียก HTTP นอก Reducers โดยใช้ NgRx Effects ทำให้ Reducers บริสุทธิ์และรวมศูนย์ตรรกะ Side Effects

  • บทเรียน 5 • Selectors และการผสานรวมกับคอมโพเนนต์

    สร้าง Memoized Selectors และ Dispatch Actions จากคอมโพเนนต์ผ่านเซอร์วิส Store เชื่อมต่อ NgRx Store เข้ากับเลเยอร์ของคอมโพเนนต์

บทที่ 8ดูรายละเอียด

ประสิทธิภาพ, การทดสอบ และการดีพลอย

  • บทเรียน 1 • กลยุทธ์การดีพลอยและการผสานรวม CI/CD

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

  • บทเรียน 2 • การทดสอบหน่วยคอมโพเนนต์และเซอร์วิส

    เขียนการทดสอบหน่วยด้วย Jasmine และ TestBed สำหรับคอมโพเนนต์, เซอร์วิส และไปป์ ตรวจสอบความถูกต้องของแต่ละหน่วยแบบแยกส่วนก่อนการผสานรวม

  • บทเรียน 3 • การปรับบิลด์ให้เหมาะสมและการกำหนดค่าบิลด์

    กำหนดค่าบิลด์สำหรับการใช้งานจริง, Tree Shaking และ Differential Loading เพื่อขนาดบิลด์ที่เหมาะสมที่สุด เตรียมแอปให้พร้อมสำหรับข้อจำกัดในการดีพลอยจริง

  • บทเรียน 4 • การทดสอบ End-to-End ด้วย Cypress

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

  • บทเรียน 5 • การตรวจจับการเปลี่ยนแปลงและการเพิ่มประสิทธิภาพ

    อธิบายกลยุทธ์ Change Detection แบบ Default และ OnPush ของ Angular และเครื่องมือโพรไฟลิง ลดการเรนเดอร์ซ้ำที่ไม่จำเป็นในต้นไม้คอมโพเนนต์ขนาดใหญ่

การรับรอง

ใบรับรองที่ถูกต้องของคุณสำหรับการสำเร็จการศึกษา

คอร์สนี้เหมาะสำหรับคุณ:

  • นักพัฒนา JavaScript: ที่พร้อมนำเฟรมเวิร์กฟรอนต์เอนด์ระดับองค์กรที่มีโครงสร้างมาใช้

  • นักพัฒนา React หรือ Vue: ที่ต้องการเพิ่มความเชี่ยวชาญ Angular ลงในชุดเครื่องมือระดับมืออาชีพ

  • นักพัฒนาแบ็กเอนด์: ที่ขยายบทบาทสู่การทำงานแบบฟูลสแตกซึ่งต้องใช้ทักษะฟรอนต์เอนด์สมัยใหม่

  • ผู้สำเร็จการศึกษาด้านวิทยาการคอมพิวเตอร์: ที่เชื่อมโยงความรู้ทางวิชาการกับการพัฒนา Angular ตามมาตรฐานอุตสาหกรรม

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

  • ผู้เปลี่ยนสายอาชีพ: ที่สร้างทักษะฟรอนต์เอนด์ที่พร้อมทำงานจากพื้นฐานการเขียนโปรแกรมที่มั่นคง

ความคิดเห็นจากผู้เรียนของเรา

บทเรียนของคุณสมบูรณ์แบบมาก ผมซื้อแพ็คเกจหนึ่งปีและในที่สุดก็มีโอกาสติดตามหัวข้อต่างๆ ที่ผมสนใจได้โดยไม่ต้องเปลี่ยนแพลตฟอร์ม... ขอบคุณสำหรับทุกสิ่งที่คุณทำ ผมได้แนะนำคุณให้กับคนอื่นๆ แล้ว...
Giulio Carlo
Giulio Carloนักเรียนดิจิทัลมาร์เก็ตติ้ง
ฉันชอบที่บทเรียนตรงไปตรงมาและฉันสามารถเปลี่ยนบทและข้ามเนื้อหาที่ไม่จำเป็นได้
Mariana Ferres
Mariana Ferresนักเรียนการถ่ายภาพ
ฉันชอบเนื้อหาและวิธีการนำเสนอและการถอดเสียงวิดีโอ ซึ่งช่วยเร่งกระบวนการเรียนรู้!
Luciana Alvarenga
Luciana Alvarengaนักเรียนการออกแบบเล็บ
แพลตฟอร์มรวดเร็วและใช้งานง่าย ความหลากหลายของเนื้อหาและวิดีโอเสริมช่วยในการเรียนรู้มาก
André Felipe
André Felipeนักเรียนพรอมต์เอ็นจิเนียริ่ง

ทักษะสำคัญแนะนำ

คำถามที่พบบ่อย

Dedika คือใคร?

ใบรับรองใช้ได้ในประเทศไทยหรือไม่?

หลักสูตรฟรีหรือไม่?

ภาระงานของหลักสูตรคืออะไร?

หลักสูตรเป็นอย่างไร?

หลักสูตรทำงานอย่างไร?

ระยะเวลาของหลักสูตรคือเท่าไร?

ค่าใช้จ่ายหรือราคาของหลักสูตรคือเท่าไร?

EAD หรือคอร์สออนไลน์คืออะไร และทำงานอย่างไร?

หลักสูตร PDF