Duration

5 days

Overview

Accelebrate’s AngularJS training teaches developers how to use AngularJS to facilitate development of single-page web applications that use the Model-View-Controller (MVC) design pattern.

Angular 2 is the next iteration of the AngularJS framework. It promises better performance. It uses TypeScript programming language for type safe programming. Overall you should see better productivity and manageability of a large project using Angular 2.

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 primer.

Objectives

Students will:

Understand the design of single-page applications and how AngularJS facilitates their development
Properly separate the model, view, and controller layers of your application and implement them using AngularJS 2
Master AngularJS 2 expressions, filters, and scopes
Build Angular forms
Elegantly implement Ajax in your AngularJS 2applications
Write AngularJS2 directives
Unit test and end-to-end test your AngularJS 2 applications

Outline

1 - Introduction to 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 - index.html - 2/2
Basic-App: Main Application File
Basic-App: The Component File - 1/2
Basic-App: The Component File - 2/2

2 - 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

3 - 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
Login Component
Component Decorator Properties
Component Lifecycle Hooks
Using a Lifecycle Hook: OnInit

4 - 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

5 - 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

6 - 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

7 - Template Driven Forms

Template Driven Forms
Note on Deprecated Forms APIs
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 Validation
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

8 - Service 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 onInit to Initialize Component Data
Using a Shared Service Instance
Dependency Injection

9 - HTTP Client

The Angular HTTP Client
Using The HTTP Client - Overview
Setting up the Root Component
Service Using Http Client
Importing Individual HTTP Providers into Services
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 Component
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
Reading HTTP Response Headers

10 - 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

11 - Introduction to Single Page Application

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

12 - 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
Routes
The app.routes.ts File
The app.routes.ts File - Example
Bootstrapping Routing in Main.ts
A Basic App With Routing
App Routes
AppComponent - Code
AppComponent - Router Related Features
AppComponent -
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

13 - Introduction to Node.JS

What is Node.js?
Application of Node.js
Installing Node.js and NPM
"Hello, Node World!"
How it Works
Built on JavaScript – benefits
Traditional Server-Side I/O Model
Disadvantages of the traditional Approach
Event-Driven, Non-Blocking I/O
Concurrency
Using Node Package Manager (NPM)
Express

14 - Module and Dependency Management

Nature of a Node.js Project
Introduction to Modules
A Simple Module
Using the Module
Directory Based Modules
Example Directory Based Module
Using the Module
Making a Module Executable
Core Modules
Loading Module from node_modules Folders
Dependency Management Using NPM
Installing a Package
About Global Installation
Setting Up Dependency
Package Version Numbering Syntax
Updating Packages
Uninstalling Packages
Alternate Dependency Management

15 - Build and Dependency Management

Introduction

Bower Package Manager
Managing Packages Using Bower
Using Bower Packages
Describing Dependency
Grunt Build Manager
Installing Grunt Components
Writing a Grunt Build Script
Running Grunt
Running JSHint Task
Compiling Less Files
Compressing CSS Files
Gulp Build Manager
Gulp vs. Grunt
Installing Gulp Components
Writing a Build Script
Running Gulp
Compiling Less Files

Programme scope, delivery arrangements and suitability are confirmed during enquiry.