Note: For additional questions and clarification, you may reach Bill Ramirez at firstname.lastname@example.org or on his following contact details: Office- (510) 804-3600 & Cell- (415) 200-6969
During these 3 days, 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.
Node.JS and NPM
- What is Node JS?
- Example of server code with Node
- What is NPM?
- Npm install, npm update and other useful commands
- Semantic versioning and package.json
- Interfaces, classes and object inheritance
- Usefulness of types
- Getters, setters and static properties
- Constructor syntax
- Generics and advanced types
- Modules: Export and import
- ES6-ES7 features: Arrow functions, backticks, template expressions, object rest and spread
Building blocks of an Angular application
- Modules and ngModule
- Components, pipes, directives and services
- Importance of using angular CLI to keep project structure updated
- Angular builds: AOT vs JIT - What to use for production
- Build modes and environments
LAB: Angular Builds
- Template and expressions
- Passing data to a component with @Input()
- Practicing with Angular CLI
LAB: Creating components
- One-way data bindings
- Two-way data bindings with ngModel
- Template syntax
- Template reference variables
- What are directives for?
- Different kinds of directives
- LAB: ngFor
LAB: Hiding things
- ngClass and ngStyle
- How to create a custom directive?
LAB: Custom directive
- What are pipes for?
- Examples of common Angular pipes
LAB: Currency pipe
- Pure and Impure pipes
- How to create our own pipes?
LAB: Custom Pipe
Services and dependency injection
- Difference between components and services
- Dependency injection in Angular
- Injector Tree
- How to create a service?
Reactive Programming with RxJs Observables
- Introduction to RxJS and Reactive Programming
- What is an observable?
- RxJs operators
- Examples of RxJs operators: max, merge, filter
- How to use the HTTP client?
- Http Interceptor
LAB: Using the HTTP client
LAB: Using the async pipe
Component communication and lifecycle
- How do components share data?
LAB: Component communication
LAB: Using @Output()
- Introduction to the component lifecycle
- Lifecycle hooks
- Change detection strategies
- What is the component router?
- Example of the component router in action
- Child routes and route parameters
LAB: Component router
- Guards for authentication and user rights
- LAB: Authentication
- How to handle forms with Angular?
- Template-driven forms and reactive forms
- Form validation and submission
LAB: Template-driven forms - Form validation
Advanced projects and tools
- Progressive web apps
- Angular Console
- Custom Elements
- Angular Material and CDK
- CLI Schematics
- Angular Universal or how to pre-compile on the server
- Angular Augury: Debugging Angular apps in Google Chrome
Testing Angular Applications
- How to test Angular applications?
- Karma and Jasmine
LAB: Writing Unit tests
- Angular Test Bed
- Mocking and stubbing with Jasmine and Angular
LAB: Writing Component Tests
Resources and best practices
- How to use angular.io (cheatsheet, etc.)
- Style guide and best practices
- Official Angular blog