Angular 2 Introduction

Angular 2 was conceived as a complete rewrite in order to fulfill the expectations of modern developers who demand fast performance and responsiveness from their web applications.

Set up your working environment to have all the tools you need to start building Angular 2 components with minimum effort; get up to speed with TypeScript, a powerful typed superset of JavaScript that compiles to plain JavaScript; take full control of how your data is rendered and updated upon data changes; build powerful web applications based on structured component hierarchies that emit and listen to events and data changes throughout the elements tree;
And explore how to consume external APIs and data services and allow data editing by harnessing the power of web forms made with Angular 2.

Audience
This four-day course is designed for the either beginning Angular users or individuals who have been using the language for a while. Beginners with a knowledge of HTML and JavaScript are should have sufficient background for this course. In addition, individuals already using Angular can learn many important aspects of Angular that they missed in their own study.

Prerequisites
Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript. Non-programmers won’t keep up with the programming aspects of the class and should not attend.

Course Outline

1: CREATING OUR VERY FIRST COMPONENT IN ANGULAR 2
A fresh start
Setting up our workspace
Hello, Angular 2!
Enhancing our IDE
Diving deeper into Angular 2 components

2: INTRODUCING TYPESCRIPT
Understanding the case for TypeScript
Types in TypeScript
Functions, lambdas, and execution flow
Classes, interfaces, and class inheritance
Decorators in TypeScript
Organizing our applications with modules
The road ahead

3: IMPLEMENTING PROPERTIES AND EVENTS IN OUR COMPONENTS
A better template syntax
Configuring our template from our component class

4: ENHANCING OUR COMPONENTS WITH PIPES AND DIRECTIVES
Directives in Angular 2
Manipulating template bindings with Pipes
Putting it all together in the Pomodoro task list
Building our own custom pipes
Building our own custom directives
A word about naming conventions for custom directives and pipes

5: BUILDING AN APPLICATION WITH ANGULAR 2 COMPONENTS
Introducing the component tree
Common conventions for scalable applications
How dependency injection works in Angular 2
Introducing the Pomodoro App directory structure
Refactoring our application the Angular 2 way

6: ASYNCHRONOUS DATA SERVICES WITH ANGULAR 2
Strategies for handling asynchronous information
Reactive functional programming in Angular 2
Introducing the HTTP API
A real case study – serving Observable data through HTTP

7: ROUTING IN ANGULAR 2
Adding support for the Angular 2 router
Setting up the router service
Handling route parameters
Defining child routers
The Router lifecycle hooks

8: FORMS AND AUTHENTICATION HANDLING IN ANGULAR 2
Two-way data binding in Angular 2
Tracking control interaction and validating input
Controls, ControlGroups, and the FormBuilder class
A real example – our login component
Mocking a client authentication service
Running the extra mile on access management

9: ANIMATING COMPONENTS WITH ANGULAR 2
Creating animations with plain vanilla CSS
Animating components with the AnimationBuilder
Developing custom animation directives
Looking into the future with ngAnimate 2.0

10: UNIT TESTING IN ANGULAR 2
Why do we need tests?
Parts of a unit test in Angular 2
Setting up our test environment
Angular 2 custom matcher functions
Testing pipes
Testing components
Testing routes
Testing services
Testing directives
The road ahead