Comprehensive Angular 2 Programming Training

Expand all

Course Description

Our Comprehensive Angular 2 Programming Training course covers all major topics required to fully use this next generation of the Angular framework. Angular 2 makes the creation of single page applications even easier that before. In this course developers will learn to use Angular 2 Directives and to create Angular 2 Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challanges of Single Page Applications and how to overcome those challanges using the Angular 2 Router. The course also covers everything you need to know about Typescript – a programming language based on JavaScript that is used to create Angular 2 applications.

In addition to the basics of using the Angular 2 framework, you will also learn advanced topics.  This includes specifics about how to consume REST web services and WebSocket data from Angular 2 applications.  Advanced use of the Angular 2 Routing module and Angular 2 Animations are covered.  You will learn how to develop Angular 2 applications using AngularCLI.  Details of how to test and debug Angular 2 applications are covered in addition to best practices for the style and organization of Angular 2 projects.

Lab exercises provide essential and practical hands-on experience for each topic.

 

Objectives

In this training, attendees will learn how to:

•     Create single page web applications using the MVC pattern of Angular 2
•     Understand how write and organize Angular 2 code
•     Program Angular 2 View Components and Services
•     Use Angular 2 output, two-way, event and property bindings
•     Exchange data with network servers using the Angular 2 HTTP Client
•     Consume data from REST web services
•     Consume WebSocket data
•     Work with Angular 2 Pipes to format data
•     Create and work with Angular 2 Forms
•     Angular 2 Component Router
•     Advanced Router Usage
•     Angular Animations
•     Testing and debugging Angular applications
•     AngularCLI
•     Best practices for Angular 2 application style and organization

Course Outline

Chapter 1 – Introducing Angular 2

•     What is Angular 2?
•     Central Features of the Angular Framework
•     Why Angular?
•     Scope and Goal of Angular
•     Angular 2 vs. AngularJS
•     Installing and Using Angular 2
•     Adding Angular 2 and Dependencies to Your App
•     Building Blocks of and Angular 2 Application
•     A Basic Angular 2 Application
•     Basic App – index.html
•     Basic-App: Application Module File
•     Basic-App: Main Bootstrap File
•     Basic-App: The Component File
•     Summary

Chapter 2 – Development Setup of Angular 2

•     Angular 2 is Modular
•     Managing Angular 2 Files and Dependencies
•     What is Node.js?
•     Application of Node.js
•     Installing Node.js and NPM
•     “Hello World!” Node app
•     Node Libraries
•     Node Package Manager (NPM)
•     Package.json
•     Semantic Version Numbering
•     Package Version Numbering Syntax
•     Updating Packages
•     Uninstalling Packages
•     Installing Angular 2 Packages
•     Angular CLI
•     Angular 2 Development Overview
•     Angular 2 Development Dependencies
•     TypeScript Definitions
•     Testing Tools
•     Development Servers
•     Angular 2 Application Dependencies
•     Module Loaders
•     SystemJS Module Loader
•     WebPack Module Bundler
•     Additional Application Dependencies

Chapter 3 – Introduction to TypeScript and ES6

•     Programming Languages for Use with Angular
•     TypeScript Syntax
•     The Type System – Defining Variables
•     The Type System – Defining Arrays
•     The Type System – Classes & Objects
•     Class Constructors
•     Class Constructors – Alternate Form
•     Interfaces
•     Parameter and Return Value Types
•     Working with Modules
•     TypeScript Transpilation
•     Arrow Functions
•     Template Strings
•     Template Strings – Variables and Expressions
•     Template Strings – Multiline
•     Generics – Class
•     Generics – Methods
•     Generics – Restricting Types
•     Generics – Restricting Types: Example
•     Summary

Chapter 4 – Components in Angular 2

•     What is a Component?
•     An Example Component
•     Component Starter
•     Developing a Simple Login Component
•     Login Component: Add HTML
•     The HTML Component Template
•     The templateUrl property
•     Login Component: Add CSS Styling
•     Login Component: Hook Up Input Fields and Button
•     Login Component: Fields & Button in the Component Class
•     Component Decorator Properties
•     Component Lifecycle Hooks
•     Using a Lifecycle Hook: OnInit
•     Summary

Chapter 5 – Data and Event Binding

•     Binding Syntax
•     One-Way Output Binding
•     Binding Displayed Output Values
•     Two-Way Binding of Input Fields
•     Input Binding Examples
•     Binding Events
•     Binding Events Examples
•     Setting Element Properties
•     Setting Properties: Examples
•     Summary

Chapter 6 – Attribute Directives and Property Bindings

•     What are Directives
•     Directive Types
•     Apply Styles by Changing Classes
•     Changing Classes – Example
•     Applying Styles Directly
•     Applying Styles Directly – Example
•     Obsolete Directives and Property Binding
•     Controlling Element Visibility
•     Setting Image Source Dynamically
•     Setting Hyperlink Source Dynamically
•     Summary

Chapter 7 – Structural Directives

•     Structural Directives
•     Adding and Removing Elements Dynamically
•     Looping Using ngFor
•     ngFor – Basic Syntax
•     ngFor – Full Template Syntax
•     Creating Tables with ngFor
•     ngFor Local Variables
•     ngFor Changes in the backing data source
•     Swapping Elements with ngSwitch
•     ngSwitch – Basic Syntax
•     ngSwitch – Full Template Syntax
•     Summary

Chapter 8 – Template Driven Forms

•     Template Driven Forms
•     Importing Forms Module
•     A Basic Angular Form
•     Binding Input Fields
•     Accessing the Form Object
•     Binding the Form Submit Event
•     The Submit Function
•     Basic HTML5 Validation – “required” Attribute
•     HTML5 vs. Angular Validation
•     Angular Validators
•     Angular Validation State
•     Displaying Form Validation State
•     Displaying Field Validation State
•     Displaying Validation State Using Classes
•     Disabling Submit when Form is Invalid
•     Submitting the Form
•     Binding to Object Variables
•     Additional Input Types
•     Checkboxes
•     Select (Drop Down) Fields
•     Rendering Options for Select (Drop Down)
•     Date fields
•     Radio Buttons
•     Summary

Chapter 9 – Model Driven Forms

•     Setup for Forms
•     Form Component Setup
•     Setup Main FormGroup
•     formControlName
•     Setup Sub FormGroups – HTML Template
•     Setup Sub FormGroups – Component Class
•     Why use sub FormGroups
•     FormControl Object
•     Built-In Validators
•     Custom Validator
•     Using a Custom Validator
•     More information

Chapter 10 – Angular 2 Modules

•     Why Angular Modules?
•     Angular Built-in Modules
•     @NgModule
•     The Root Module
•     @NgModule Properties
•     Bootstrapping the Root Module
•     Feature Modules
•     Reusable Component Modules
•     Summary

Chapter 11 – Services and Dependency Injection

•     What is a Service?
•     Creating a Basic Service
•     What is Dependency Injection?
•     What Dependency Injection Looks Like
•     Injecting Services
•     Using a Service in a Component: Dedicated Instance
•     Using a Service in a Component: Dedicated Instance – Example Code
•     Using onInit to Initialize Component Data
•     Using a Shared Service Instance
•     Dependency Injection and @Host
•     Dependency Injection and @Optional
•     Summary

Chapter 12 – HTTP Client

•     The Angular HTTP Client
•     Using The HTTP Client – Overview
•     Importing HttpModule
•     Importing Individual Providers into Services
•     Service Using Http Client
•     Service Imports
•     The Observable object type
•     What does an Observable Object do?
•     Making a Basic HTTP GET Call
•     Using the Service in a Component
•     The PeopleService Client Component
•     Client Component Code Review
•     Importing Observable Methods
•     Enhancing the Service with .map() and .catch()
•     Using .map()
•     Using .catch()
•     Using toPromise()
•     GET Request
•     GET Request with Options
•     POST Request
•     POST Request Example
•     Reading HTTP Response Headers
•     Summary

Chapter 13 – Consuming REST Web Services in Angular 2

•     Query Parameters
•     URL Path Parameters
•     Accepts Header
•     Content-Type Header
•     GET
•     POST
•     PUT
•     DELETE
•     Summary

Chapter 14 – Consuming WebSockets Data in Angular 2

•     WebSockets Overview
•     WebSockets Use Cases
•     Angular Libraries for WebSockets
•     WebSockets From Angular Components
•     Summary

Chapter 15 – Pipes and Data Formatting

•     What are Pipes?
•     More on Pipes
•     Formatting Changes in Angular 2
•     Using a Built-in Pipe
•     Built-In Pipes
•     Using Pipes in HTML
•     Chaining Pipes
•     Using Pipes in JavaScript
•     Some Pipe Examples
•     Decimal Pipe
•     CurrencyPipe
•     Custom Pipes
•     Custom Pipe Example
•     Using Custom Pipes
•     A Filter Pipe
•     A Sort Pipe
•     Pipe Category: Pure and Impure
•     Pure Pipe Example
•     Impure Pipe Example
•     Summary

Chapter 16 – Introduction to Single Page Applications

•     What is a Single Page Application (SPA)
•     SPA Workflow
•     Traditional Web Application Capabilities
•     Single Page Application Advantages
•     SPA and Traditional Web Sites
•     SPA Challanges
•     Implementing SPA’s Using Angular 2
•     Simple SPA Using Visibility Control
•     SPA Using Angular Components
•     SPA with Angular Components – Switching
•     SPA with Angular Components – The Displayed Component
•     Implement SPA Using an Angular Component Router
•     Summary

Chapter 17 – The Angular Component Router

•     Routing and Navigation
•     The Component Router
•     Traditional Browser Navigation
•     Component Router Terminology
•     Setting up the Component Router
•     Local URL Links
•     Browser pushState and <base href>
•     Routes
•     The app.routes.ts File
•     The app.routes.ts File – Example
•     Importing Routing in app.module.ts
•     A Basic App With Routing
•     App Routes
•     AppComponent – Code
•     AppComponent – Router Related Features
•     AppComponent – <router-outlet>
•     AppComponent – precompile array
•     AppComponent – routerLinks
•     Programmatic Navigation
•     Basic Navigation
•     Passing Data During Navigation
•     Creating Routes with Route Parameters
•     Navigating with Route Parameters
•     Using Route Parameter Values
•     Retrieving the Route Parameter Synchronously
•     Retrieving a Route Parameter Asynchronously
•     Query Parameters
•     Query Parameters – Example Component
•     Query Parameters – queryParams
•     Query Parameters – Navigation
•     Retrieving Query Parameters Asynchronously
•     Problems with Manual URL entry and Bookmarking
•     Fixing Manual URL entry and Bookmarking
•     Summary

Chapter 18 – Advanced Routing

•     Routing Overview
•     External Route Configuration File
•     Dedicated Router Module
•     routerLinkActive binding
•     Wildcard Route Path
•     redirectTo
•     Default Route
•     Child Routes
•     Defining Child Routes
•     <router-outlet> for Child Routes
•     routerLink Prefixes
•     Invoking Child Routes
•     Navigation Guards
•     Creating Guard Implementations
•     Using Guards in a Route
•     Route Animations
•     Summary

Chapter 19 – Angular Animations

•     What is Animation?
•     Animation Techniques
•     Animation Concepts
•     CSS Property Animation
•     Animation Property Settings
•     CSS Transforms
•     Starting and Stopping Animation
•     Animation Events
•     Browser Support
•     Angular Animations
•     Animation Imports
•     Named Animation States
•     Transitions
•     Special States: void, *
•     The animate() function
•     Triggers
•     Assigning Animations to Elements using Trigger
•     Invoking Transitions
•     Assigning Animation to Routes
•     External Animation Definitions
•     Summary

Chapter 20 – Testing Angular 2 Components and Services

•     Why Test Angular Components?
•     Jasmine
•     Karma
•     Protractor
•     ngMock
•     Angular TestBed
•     Testing Services
•     Testing Components
•     Summary

Chapter 21 – Developing Using AngularCLI

•     What is AngularCLI?
•     Installing AngularCLI
•     Creating Angular Apps
•     Running Angular Apps
•     Generating Code
•     The WebPack Module Loader
•     Summary

Chapter 22 – Debugging

•     What is Augury?
•     Installing Augury
•     Opening Augury
•     Augury Demo App
•     Component Tree
•     Router Tree
•     debug Examples
•     Summary

Chapter 23 – Angular 2 Style Guide

•     What is the Angular 2 Style Guide?
•     Where To Find It
•     Style Categories
•     Single Responsibility
•     Naming
•     Coding Conventions
•     Lifecycle Hook Interfaces
•     Summary

Learning Path

• There are a number of options, please Contact Us for further information.

Ways to Attend

• Attend a public course, if there is one available. Please check our Schedule, or Register Your Interest in joining a course in your area.
• Private onsite Team training also available, please Contact Us to discuss. We can customise this course to suit your business requirements.