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