Note: For additional questions and clarification on Angular Advanced Course, you may reach Bill Ramirez at email@example.com or on his following contact details: Office- (510) 804-3600 & Cell- (415) 200-6969
Angular Advanced Course Overview
All lab exercises are designed to make attendees build an entire web application step by step so that they can practice and understand how these Angular concepts come into play in an actual real-life project.
- Full understanding and practical use of Angular.
Angular Advanced Agenda Topics
- Semantic versioning and release schedule
- Angular CLI
- Environments config
- CLI: ng update, ng add and schematics
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
LAB: Angular Builds
- Introduction to Webpack
- Should we use Webpack directly for custom builds?
- Template and expressions
- Passing data to a component with @Input()
- Practicing with Angular CLI
LAB: Creating components
- Component architecture best practices
- Advanced component features
- Different kinds of directives
- How to create a custom directive?
- Data bindings in directives
LAB: Custom directive
- Pure and Impure pipes
- How to create our own pipes?
LAB: Custom Pipe
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?
LAB: Service creation
HTTP client and asynchronous patterns with RxJs
- How to use the HTTP client?
- What is a promise?
- Introduction to RxJS
- What is an observable?
LAB: Observables and Promises
- Writing our own Observable or Promise
- RxJs operators
- Examples of RxJs operators: max, merge, filter
LAB: Using the HTTP client
LAB: Using the async pipe
- Http Interceptor
- Websockets in Angular
Component communication and lifecycle
- How do components share data?
- Strategies for component communication
- @ViewChild() decorator
LAB: Component communication
LAB: Using @Output()
- Introduction to the component lifecycle
- Lifecycle hooks
- Change detection strategies for performance optimization
End-to-end Testing of Angular Applications
- How to test Angular applications?
- End to end tests with Protractor
- End to end tests with Cypress
LAB: Writing end-to-end tests
- Mocking and stubbing with Cypress and Data Mocks
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
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
LAB: Using NgRx store and actions
Advanced exercises on RxJs and component architecture
- How to think in terms of reactive programming
- Examples of several combinations of RxJs operators
Resources and best practices
- How to include external libraries
- How to use angular.io (cheatsheet, etc.)
- Style guide and best practices
- Official Angular blog