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

• ngSwitch

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

• Async pipe

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

• Lazyloading

Chapter 11: Forms

• How to handle forms with Angular?
• Template driven forms and reactive forms
• Form validation and submission

LAB 19: Template driven forms

• Custom form validator

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