ANGULAR TRAINING OUTLINE
Course: ANGULAR
Duration: 5 Days
Level: I
On our website at:
http://www.verhoef-training.com/courses/ANGULAR.html
Course Summary
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.
Students build an application from scratch and practice everything they learnt during the
Best way to get a lot of experience with Angular in very little time.
Trainer acts as a mentor and answers all questions, provides guidance and covers additional topics upon request.
Usually the preferred part of the training for all students.
Topics Covered In This Course
DAY 1: TYPESCRIPT, NODE JS and NPM
Introduction to TypeScript Using the TSC compiler
- Basic types
- Usefulness of types
- Interfaces, classes and object inheritance
- Getters, setters and static properties
- Constructor syntax
- Generics and advanced types
- Modules:
- Export and import
- ES6 features in TypeScript: Arrow functions, backticks, template expressions, object rest and spread
Introduction to 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
DAYS 2 to 4: ANGULAR
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.
Chapter 1 Introduction to Angular
- What is Angular?
- Why using it?
- What about Angular 1?
- Why TypeScript?
- LAB 0: Setup
- Introduction to Angular CLI
Chapter 2 Building blocks of an Angular application
- Modules and ngModule
- Components, pipes, directives and services main.ts
- 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 1: Angular Builds
Chapter 3: Components
- What are components?
- Example of Angular 2 component
LAB 2: Hello World
- Template and expressions
- Passing data to a component
- Practicing with Angular CLI
LAB 3: Creating components Chapter 4: Data bindings
- Oneway data bindings
- Expressions
- Twoway data bindings with ngModel
- Template syntax
- Template reference variables
LAB 4: Bindings Chapter 5: Directives
- What are directives for?
- Different kinds of directives ngFor
LAB 5: ngFor ngIf
LAB 6: Hiding things
LAB 7: ngSwitch
How to create a custom directive?
LAB 8: Custom directive Chapter 6: Pipes
- What are pipes for?
- Examples of common Angular pipes
LAB 9: Currency pipe
- Pure and Impure pipes
- How to create our own pipes?
LAB 10: Custom Pipe Chapter 7: Services and dependency injection
- Difference between components and services
- Dependency injection in Angular
- Injector Tree
- Decorators for dependency injection: @Optional(), @Host(), @Self()
- How to create a service?
LAB 11: Services Chapter 8: HTTP client and asynchronous data
- How to use the HTTP client?
- What is a promise?
- Introduction to RxJS
- What is an observable?
LAB 12: Observables and Promises
- Writing our own Observable or Promise
LAB 13:Using the HTTP client
LAB 14: Using the async pipe Chapter 9: Component communication and lifecycle
- How do components share data?
LAB 15: Component communication
LAB 16: Using @Output()
- Introduction to the component lifecycle
- Lifecycle hooks
- Change detection strategies Chapter 10: Component router
- What is the component router?
- Example of component router in action
- Child routes and route parameters
LAB 17: Component router
- Guards for authentication and user rights
LAB 18: Authentication
Chapter 11: Forms
- How to handle forms with Angular?
- Template driven forms and reactive forms
- Form validation and submission
LAB 19: Template driven forms
LAB 20: Reactive forms Chapter 12: Advanced projects and tools
- Progressive web apps
- Angular Universal or how to precompile on the server
- Angular Augury: Debugging Angular apps in Google Chrome
LAB 21: Angular Augury Chapter 13: Testing Angular Applications
- How to test Angular applications?
- Karma and Jasmine
- End to end tests with Protractor
LAB 22: Writing Unit tests
- Angular Test Bed
- Mocking and stubbing with Jasmine and Angular LAB 23: Writing Component Tests
Chapter 14: Resources and best practices How to use angular.io (cheatsheet, etc.) Style guide and best practices Official Angular blog DAY 5: FINAL PROJECT
Students build an application from scratch and practice everything they learnt during the Training.
Best way to get a lot of experience with Angular in very little time.
Trainer acts as a mentor and answers all questions, provides guidance and covers additional topics upon request.
Usually the preferred part of the training for all students
What You Can Expect
Students build an application from scratch and practice everything they learnt during the training.
Best way to get a lot of experience with Angular in very little time.
Who Should Take This Course
Web Developers
Recommended Prerequisites
Some HTML or other Web development languages.
Training Style
Lecture and Labs
Related Courses
Code |
Course Title |
Duration |
Level |
|
HTML5 |
Web Application Development Using HTML5 |
4 Days |
II |
Details |
Every student attending a Verhoef Training class will receive
a certificate good for $100 toward their next public class taken
within a year.
You can also buy "Verhoef Vouchers" to get a discounted rate for a
single student in any of our public or web-based classes.
Contact your account manager or our sales office for details.