RobustX / Chương trình học / Chuyên đề / Phát triển phần mềm / Phát Triển Ứng Dụng Với Angular

PHÁT TRIỂN ỨNG DỤNG VỚI ANGULAR

Trong thế giới phát triển frontend, Angular không chỉ là một lựa chọn, mà là một nền tảng (platform) toàn diện được Google xây dựng và bảo trợ, hướng đến việc giải quyết các bài toán phức tạp ở quy mô doanh nghiệp. Khác với các thư viện chỉ cung cấp một phần của giải pháp, Angular mang đến một framework có cấu trúc chặt chẽ và đầy đủ công cụ, giúp các đội nhóm xây dựng những ứng dụng lớn một cách nhất quán, dễ bảo trì và có khả năng mở rộng cao.

Chương trình sẽ đưa bạn đi sâu vào hệ sinh thái Angular, bắt đầu với TypeScript – ngôn ngữ nền tảng giúp bạn viết code an toàn và có cấu trúc hơn. Bạn sẽ làm chủ kiến trúc Component, học cách binding dữ liệu một cách hiệu quả, và đặc biệt là nắm vững Dependency Injection (DI) – một trong những tính năng mạnh mẽ nhất của Angular giúp tạo ra mã nguồn sạch sẽ, module hóa và dễ dàng kiểm thử. Bạn cũng sẽ học cách quản lý các luồng dữ liệu bất đồng bộ phức tạp bằng tư duy lập trình phản ứng với RxJS.

Thời lượng: 42h

Hình thức đào tạo:

    • Đào tạo trực tiếp tại lớp học
    • Đào tạo trực tuyến
    • Đào tạo hybrid (trực tuyến kết hợp trực tiếp)
    • Đào tạo tại văn phòng khách hàng

KẾT QUẢ ĐẠT ĐƯỢC:

  1. LÀM CHỦ TYPESCRIPT TRONG MÔI TRƯỜNG ANGULAR
    Sử dụng thành thạo các tính năng của TypeScript để viết mã Angular rõ ràng, an toàn và dễ dàng mở rộng.
  2. THÀNH THẠO KIẾN TRÚC COMPONENT VÀ DATA BINDING
    Hiểu sâu và vận dụng kiến trúc component, vòng đời và các cơ chế data binding để xây dựng giao diện động.
  3. TỔ CHỨC CODE VỚI SERVICE VÀ DEPENDENCY INJECTION
    Nắm vững nguyên tắc tách logic nghiệp vụ ra khỏi component bằng cách sử dụng Service và Dependency Injection (DI).
  4. XÂY DỰNG ỨNG DỤNG SPA PHỨC TẠP VỚI ANGULAR ROUTER
    Có khả năng thiết lập, quản lý và bảo vệ các luồng điều hướng, bao gồm cả lazy loading để tối ưu hiệu năng.
  5. QUẢN LÝ DỮ LIỆU BẤT ĐỒNG BỘ VỚI RXJS VÀ HTTPCLIENT
    Sử dụng HttpClient để tương tác với REST API và làm chủ tư duy lập trình phản ứng (Reactive Programming) với RxJS.

Đối tượng tham gia

Sinh viên

Muốn học một framework có cấu trúc mạnh mẽ, phù hợp cho các dự án quy mô doanh nghiệp.

Lập trình viên

Muốn mở rộng kỹ năng sang Angular để đáp ứng các nhu cầu đa dạng của thị trường việc làm.

Người muốn học web

Muốn trở thành Full-stack trong các môi trường doanh nghiệp, nơi mà Angular đang rất phổ biến.

Kỹ sư công nghệ

Cần nắm vững Angular để đưa ra quyết định công nghệ và quản lý đội nhóm một cách hiệu quả.

Nội dung khóa học

 1. Giới thiệu Angular và TypeScript
    • Tổng quan về Angular:
      • Tìm hiểu Angular là gì và so sánh triết lý “framework” toàn diện của Angular với “thư viện” của React.
    • Cài đặt môi trường:
      • Hướng dẫn sử dụng công cụ Angular CLI để tạo, chạy, và build một dự án mới.
    • Ôn tập TypeScript:
      • Tập trung vào các khái niệm cốt lõi được sử dụng trong Angular như kiểu dữ liệu, class, interface, và decorator.
 2. Component và Template
    • Kiến trúc Component:
      • Nắm vững cấu trúc của một Component trong Angular bao gồm TypeScript Class, HTML Template, và CSS Styles.
    • Data Binding:
      • Thực hành các kỹ thuật binding một chiều (Interpolation, Property Binding), binding sự kiện (Event Binding), và binding hai chiều ([(ngModel)]).
    • Vòng đời Component:
      • Tìm hiểu về các giai đoạn trong vòng đời của Component và cách sử dụng các Lifecycle Hooks như ngOnInit.
 3. Directives và Pipes
    • Directives: Các chỉ thị để thao tác với DOM.
      • Structural Directives: *ngIf, *ngFor, ngSwitch.
      • Attribute Directives: ngClass, ngStyle.
    • Pipes: Biến đổi và định dạng dữ liệu ngay trong template. Sử dụng các pipe có sẵn (DatePipe, CurrencyPipe) và tạo pipe tùy chỉnh.
 4. Service và Dependency Injection (DI)
    • Nguyên tắc thiết kế:
      • Hiểu rõ nguyên tắc Single Responsibility và tại sao cần tách biệt logic nghiệp vụ ra khỏi component.
    • Tạo Service:
      • Thực hành tạo các Service để quản lý logic nghiệp vụ hoặc các trạng thái có thể dùng chung.
    • Cơ chế Dependency Injection:
      • Tìm hiểu sâu về cơ chế DI của Angular, vai trò của Injector, Provider và cách Angular “tiêm” các dependency.
 5. Routing trong Angular
    • Thiết lập Router:
      • Học cách thiết lập Angular Router để xây dựng các ứng dụng một trang (SPA) mượt mà.
    • Cấu hình Route:
      • Hướng dẫn cách cấu hình các Route, sử dụng routerLink để điều hướng và truyền dữ liệu qua route.
    • Route Guards:
      • Tìm hiểu cách sử dụng Route Guards (CanActivate) để bảo vệ các route yêu cầu xác thực người dùng.
    • Lazy Loading:
      • Áp dụng kỹ thuật Lazy Loading Modules để tối ưu hóa thời gian tải ban đầu của ứng dụng.
 6. HTTP và Observable (RxJS)
    • Tương tác với API:
      • Học cách sử dụng HttpClientModule để tương tác với các REST API thông qua các phương thức GET, POST, PUT, DELETE.
    • Lập trình Phản ứng (RxJS):
      • Giới thiệu về tư duy Lập trình Phản ứng và khái niệm Observable của RxJS.
    • Các toán tử RxJS:
      • Thực hành với các toán tử RxJS thông dụng như map, filter, switchMap, catchError để xử lý các luồng dữ liệu bất đồng bộ.
 7. Angular Forms
    • Template-Driven Forms:
      • Hướng dẫn cách xây dựng các form đơn giản một cách nhanh chóng bằng cách sử dụng ngModel.
    • Reactive Forms:
      • Làm chủ phương pháp mạnh mẽ và linh hoạt hơn để xây dựng các form phức tạp bằng FormGroup và FormControl.
    • Xác thực dữ liệu (Validation):
      • Tìm hiểu cách triển khai các quy tắc xác thực dữ liệu trong cả hai loại form.
 8. Đồ án cuối khóa
    • Xây dựng Ứng dụng Angular
      • Mục tiêu: Tổng hợp toàn bộ kiến thức để xây dựng một ứng dụng SPA hoàn chỉnh, có kiến trúc rõ ràng và đầy đủ các chức năng CRUD (Create, Read, Update, Delete).
      • Quy trình thực hiện:
        • Lập kế hoạch: Lựa chọn đề tài (ví dụ: ứng dụng quản lý dự án, trang web bán hàng nhỏ, diễn đàn) và thiết kế kiến trúc các module, component, service.
        • Dựng khung ứng dụng: Tạo các module, thiết lập hệ thống routing và các layout chính.
        • Xây dựng các Feature: Phát triển từng tính năng, bao gồm các component, form, và logic nghiệp vụ trong service.
        • Tích hợp API: Sử dụng HttpClient và RxJS để kết nối ứng dụng với một REST API, thực hiện đầy đủ các thao tác CRUD.
        • Hoàn thiện: Tích hợp một thư viện UI như Angular Material để giao diện chuyên nghiệp hơn, xử lý lỗi và build ứng dụng cho môi trường production.
        • Xây dựng Ứng dụng Angular
      • Yêu cầu đầu ra: Một ứng dụng SPA hoạt động, mã nguồn được quản lý chuyên nghiệp trên GitHub theo các best practice của Angular, và file README.md mô tả dự án.

LỊCH KHAI GIẢNG

(Đang cập nhật)

Đăng ký khóa học

Bài viết liên quan