
คอร์ส Angular
เชี่ยวชาญ Angular ตั้งแต่พื้นฐานและสร้างแอปพลิเคชันหน้าเดียวที่พร้อมใช้งานจริงได้อย่างมั่นใจ คอร์สนี้ครอบคลุมทุกอย่างตั้งแต่พื้นฐาน TypeScript และสถาปัตยกรรมคอมโพเนนต์ ไปจนถึงการจัดการสถานะ NgRx, SSR และการดีพลอยแบบ CI/CD ไม่ว่าคุณกำลังยกระดับทักษะฟรอนต์เอนด์หรือเปลี่ยนผ่านสู่การพัฒนา Angular ระดับมืออาชีพ นี่คือแผนที่ทางเทคนิคที่สมบูรณ์ที่คุณต้องการ
สิ่งที่คุณจะได้เรียนรู้:
คุณจะได้เรียนรู้วิธีการสแกฟโฟลด์และจัดโครงสร้างแอปพลิเคชัน Angular โดยใช้โมดูล คอมโพเนนต์ และเซอร์วิส คุณจะเชี่ยวชาญฟอร์มแบบขับเคลื่อนด้วยเทมเพลตและแบบรีแอคทีฟ นำการกำหนดเส้นทางที่ซับซ้อนด้วยการ์ดและรีโซลเวอร์ไปใช้ และจัดการสถานะแอปพลิเคชันด้วย NgRx คอร์สนี้ยังครอบคลุมการปรับประสิทธิภาพ การทดสอบหน่วยและแบบครบวงจร และการดีพลอยบิลด์สำหรับการใช้งานจริง หัวข้อขั้นสูงรวมถึง Angular Universal สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ สถาปัตยกรรมไมโครฟรอนต์เอนด์ด้วย Module Federation และการกำหนดค่า Progressive Web App เมื่อจบคอร์ส คุณจะมีทักษะในการสร้าง ทดสอบ และส่งมอบแอปพลิเคชัน Angular ที่ปรับขนาดได้
วิธีการเรียนที่ใช้งานได้จริง คอร์ส Angular
วิธีฝึกฝนของคุณ คอร์ส Angular
สำหรับคุณที่เป็นบริษัทและต้องการฝึกอบรมทีมงาน
ที่ Dedika สำหรับองค์กร คอร์สเรียนมาพร้อมกับแบบฝึกหัดและตัวอย่างที่เกี่ยวข้องกับธุรกิจของคุณเอง และปรับให้เหมาะกับความต้องการของบริษัทคุณโดยเฉพาะ
เนื้อหาของหลักสูตร
8 บท • 40 บทเรียนระยะเวลาระหว่าง 4 ถึง 360 ชั่วโมง (คุณเป็นผู้ตัดสินใจ)
บทที่ 1ซ่อนซ่อนรายละเอียดดูรายละเอียดพื้นฐาน Angular และการตั้งค่าสภาพแวดล้อม
พื้นฐาน 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
เซอร์วิส, การฉีดการพึ่งพา และ 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 และการนำทาง
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: แบบขับเคลื่อนด้วยเทมเพลตและรีแอกทีฟ
ฟอร์ม 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 ตามมาตรฐานอุตสาหกรรม
นักพัฒนาเว็บฟรีแลนซ์: ที่มุ่งหวังคุณสมบัติสำหรับโปรเจกต์ลูกค้าที่ใหญ่และซับซ้อนยิ่งขึ้น
ผู้เปลี่ยนสายอาชีพ: ที่สร้างทักษะฟรอนต์เอนด์ที่พร้อมทำงานจากพื้นฐานการเขียนโปรแกรมที่มั่นคง
ความคิดเห็นจากผู้เรียนของเรา
บทเรียนของคุณสมบูรณ์แบบมาก ผมซื้อแพ็คเกจหนึ่งปีและในที่สุดก็มีโอกาสติดตามหัวข้อต่างๆ ที่ผมสนใจได้โดยไม่ต้องเปลี่ยนแพลตฟอร์ม... ขอบคุณสำหรับทุกสิ่งที่คุณทำ ผมได้แนะนำคุณให้กับคนอื่นๆ แล้ว...

ฉันชอบที่บทเรียนตรงไปตรงมาและฉันสามารถเปลี่ยนบทและข้ามเนื้อหาที่ไม่จำเป็นได้

ฉันชอบเนื้อหาและวิธีการนำเสนอและการถอดเสียงวิดีโอ ซึ่งช่วยเร่งกระบวนการเรียนรู้!

แพลตฟอร์มรวดเร็วและใช้งานง่าย ความหลากหลายของเนื้อหาและวิดีโอเสริมช่วยในการเรียนรู้มาก

ทักษะสำคัญแนะนำ
คำถามที่พบบ่อย
Dedika คือใคร?
ใบรับรองใช้ได้ในประเทศไทยหรือไม่?
หลักสูตรฟรีหรือไม่?
ภาระงานของหลักสูตรคืออะไร?
หลักสูตรเป็นอย่างไร?
หลักสูตรทำงานอย่างไร?
ระยะเวลาของหลักสูตรคือเท่าไร?
ค่าใช้จ่ายหรือราคาของหลักสูตรคือเท่าไร?
EAD หรือคอร์สออนไลน์คืออะไร และทำงานอย่างไร?
หลักสูตร PDF




















