Angular 4 Training

ANGULAR 4 TRAINING OBJECTIVES

All students will learn to:

 Understand how Angular is different than traditional web development

frameworks

 Code using new ES6 and TypeScript language features

 Develop an application from scratch using Angular 4

 Explore Angular coding and architecture best practices

 Understand and use Angular Forms, Observables, Dependency Injection,

and Routing

 Retrieve, update, and delete data using Angular’s Http service

 Unit test all the parts of an Angular application including Modules,

Components, Services, and Pipes

 Upgrade an existing application from AngularJS to Angular 4 over time by

running both frameworks in the same project

 Create, build, and deploy an Angular (Angular 4) application using the

Angular CLI

 Develop dynamic Model-driven forms that are easier to unit test

ANGULAR 4 TRAINING PREREQUISITES

All attendees must have substantial prior experience developing with JavaScript. If
attendees will not have prior JavaScript experience, we would be delighted to
precede this class with a one- or two-day intensive JavaScript

SOFTWARE NEEDED FOR EACH PC:

 Google Chrome

 Other modern browsers as desired

  VS Code editor

ANGULAR 4 TRAINING OUTLINE

 Introduction

 Why Angular 4?

o User Experience similar to a Desktop Application

o Productivity and Tooling

o Performance

o Community

o Full-featured Framework

o Platform for Targeting Native Mobile not just Web Browsers

 Understanding Angular Versions

o AngularJS (Angular 1.x)

o Angular

 Angular 2

 Angular 4

 Understanding Angular 4

o Drop-in replacement for Angular 2

 Angular 4 Features

o View Engine generates smaller code

o Enhanced *ngIf syntax

o Animation code now in own packages

o TypeScript 2.1

o Improved compiler speed

 o Angular Universal

 TypeScript and ECMAScript 6 (ES6) Fundamentals

o Classes

o ES Modules

o Arrow Functions

o Template Literals

o Scoping using Let and Const Keywords

o Spread Syntax and Rest Parameters

o Destructuring

o Decorators (JavaScript Aspect-Oriented Programming)

 Angular 4 Basics

o Components

o Templates

 Inline Templates

 Multi-line Templates using ES6 Template Literals

 External with Component-relative Paths

o Modules

o Models

 Template Syntax

o HTML in templates

o Interpolation

o Binding syntax

o Property binding
 o Event binding

o Two-way data binding

o Attribute, class, and style bindings

o Built-in Directives

 Built-in attribute directives: NgClass, NgStyle, NgModel

 Built-in structural directives: NgIf (includes enhanced *ngIf

syntax in Angular 4), NgFor

o Template Input Variables

o The NgSwitch Directives

o Template Reference Variables

o Input and output properties

o Template Expression Operators

o Pipe ( | )

 Components

o Implementing the Component Lifecycle Hook OnInit

o Component Communication

 Input properties

 Output properties: Custom Events using EventEmitters

 Services and Dependency Injection

o Angular’s Dependency Injection System

o Registering

o Injecting

o Using a services to access data

 o Using a service to encapsulate business logic

o Using a service to configure your application

o Using a service for logging

 Template-driven Forms

o NgSubmit Directive

o FormsModule

o NgForm, NgModel

 Validation

o Displaying validation messages

o Styling validation messages

 Communicating with the Server using the Http Service

o Deciding between Promises or Observables (RxJS)

o Making Http GET Requests

o Making Http POST and PUT Requests

o Issuing a Http DELETE Request

 Router

o Importing the RouterModule and Routes

o Configuring Routes

o Displaying Components using a RouterOutlet

o Navigating with RouterLink

o Accessing parameters

o Organizing your code into Modules

 Testing
 o Tools: Jasmine, Karma

o Jasmine Syntax: describe, it, beforeEach, afterEach, matchers

o Setup and your First Test

 Model-driven Forms (Reactive Forms)

o ReactiveFormsModule

o AbstractControl, FormControl, FormGroup, and FormArray

o FormBuilder

o Validators

 Displaying Validation Messages

 Styling Validation Messages

 Attribute Directives

o Creating a custom Attribute Directive using ElementRef, Render

 Pipes

o Built-in Pipes: Using, Passing Parameters, Chaining

o Creating a custom Pipe using PipeTransform

o Understanding Pure and Impure Pipes

 Creating, Building, and Deploying an Angular Application

o Manually

o Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and

Tree-Shaking (removing unused library code)

 Redux

o Redux Basics

o Debugging and Time Traveling with Redux DevTools