Advanced Angular Programming

I. Overview:

The Advanced Angular training course is designed to provide students with real-life experience using advanced topics of Angular web development. 

The course will begin by discussing advanced topics related to building blocks, components, communication, lifecycle, and the component router. Students will then explore advanced topics in data binding, directives, and pipes. Next, the course will evaluate advanced services and HTTP clients as they relate to Angular. Finally, the course will discuss advanced topics related to forms, testing, and security. Throughout the course, students will work to build out an entire Angular web application.

II. Duration:

40 hours

III. Intended Audience:

Web developers experienced in Javascript wanting to understand more advanced topics for web development using Angular.

IV. Objectives:
  • Interpret the advanced concepts of Angular
  • Utilize the Angular Command-line interface (CLI)
  • Build a web application using Angular
V.    Course outlines:

1. Angular Essentials 

  • Semantic versioning and release schedule
  • Angular CLI
  • Environments config
  • CLI: ng update, ng add and schematics

2. Modules and Build Process 

  • Modules and ngModule
  • Module architecture: Feature modules
  • Module architecture: Shared module
  • Angular builds: AOT vs JIT – What to use for production
  • Build modes and environments
  • Introduction to Webpack
  • Should we use Webpack directly for custom builds?

3. Components 

  • What are components?
  • Template and expressions
  • Passing data to a component with @Input()
  • Practicing with Angular CLI
  • Component architecture best practices

4. Data Bindings 

  • One-way data bindings
  • Expressions
  • Two-way data bindings with ngModel
  • Template syntax
  • Template reference variables

5. Directives 

  • What are directives for?
  • Different kinds of directives
  • ngFor
  • ngIf
  • ngSwitch
  • ngClass and ngStyle
  • How to create a custom directive?
  • Data bindings in directives

6. Pipes 

  • What are pipes for?
  • Pure and Impure pipes
  • How to create our own pipes?

7. Services and Dependency Injection 

  • Purpose of services
  • Dependency injection in Angular
  • Injector Tree
  • Decorators for dependency injection: @Optional(), @Host(), @Self()
  • How to create a service?

8. HTTP Client and Asynchronous Data 

  • How to use the HTTP client?
  • What is a promise?
  • Introduction to RxJS
  • What is an Observable?
  • Writing our own Observable or Promise
  • RxJs operators
  • Examples of RxJs operators: max, merge, filter
  • Async pipe
  • Http Interceptor
  • Websockets in Angular

9. Component Communication and Lifecycle 

  • How do components share data?
  • Strategies for component communication
  • @ViewChild() decorator
  • Introduction to the component lifecycle
  • Lifecycle hooks 
  • Change detection strategies for performance optimization

10.Component Router 

  • What is the component router?
  • Example of the component router in action
  • Child routes and route parameters
  • Guards for authentication and user rights
  • Lazy-loading with feature modules

11. Forms 

  • How to handle forms with Angular?
  • Properties provided by Angular to validate forms
  • Template-driven forms and reactive forms
  • Form validation and submission
  • Custom form validator

12. Advanced Projects and Tools 

  • Progressive web apps
  • Angular Custom Elements
  • Ivy renderer
  • Angular Material
  • Angular Universal or how to pre-compile on the server
  • Schematics
  • Angular Augury: Debugging Angular apps in Google Chrome

13. Testing Angular Applications 

  • How to test Angular applications?
  • Karma and Jasmine
  • End to end tests with Protractor
  • Angular Test Bed
  • Mocking and stubbing with Jasmine and Angular

14. Security in Angular 

  • How to prevent Cross-site Scripting attacks (XSS)
  • Best practices and things to avoid
  • Trusting values with the DOMSanitizer
  • Prevent HTTP attacks
  • Security audits of Angular applications

15. State Management and Redux 

  • What is state management? 
  • Redux: Core concepts and principles 
  • Redux Store 
  • NgRx: Redux for Angular
  • NgRx: Reducer, Store, Actions and Effects

16. Resources and Best Practices 

  • How to include external libraries
  • How to use angular.io (cheatsheet, etc.)
  • Style guide and best practices
  • Official Angular blog
  • Học trực tuyến

  • Học tại Hồ Chí Minh

  • Học tại Hà Nội


Các khóa học khác