Choose your language:

France
Germany
Hong Kong
India
Ireland
Japan
Malaysia
Netherlands
New Zealand
Singapore
Sweden
United Kingdom
United States

Comprehensive Angular Programming

Course Code

IN1593

Duration

5 Days

Participants should have some prior understanding of web development using, HTML, CSS and JavaScript. Experience developing with AngularJS or Angular 2 (the prior versions) is not required.
In this course developers will learn to use Angular Directives and to create Angular 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 challenges of Single Page Applications and how to overcome those challenges using the Angular Router. The course also covers everything you need to know about Typescript – a programming language based on JavaScript that is used to create Angular 4 applications.

In addition to the basics of using the Angular 4 framework, you will also learn advanced topics not covered in our 3 day Introduction to Angular Programming class. This includes specifics about how to consume REST web services and WebSocket data from Angular 4 applications. Advanced use of the Angular Routing module and Angular Animations are covered. You will learn how to develop Angular 4 applications using AngularCLI. Details of how to test and debug Angular 4 applications are covered in addition to best practices for the style and organization of Angular 4 projects. Lab exercises provide essential and practical hands–on experience for each topic.
This course is designed for developers.

Upon completion of this course, participants will be able to:

  • Create single page web applications using the MVC pattern of Angular
  • Understand how write and organize Angular code
  • Program Angular View Components and Services
  • Use Angular output, two–way, event and property bindings
  • Exchange data with network servers using the Angular HTTP Client
  • Consume data from REST web services
  • Consume WebSocket data
  • Work with Angular Pipes to format data
  • Create and work with Angular Forms
  • Angular Component Router
  • Advanced Router Usage
  • Angular Animations
  • Testing and debugging Angular applications
  • AngularCLI
  • Best practices for Angular application style and organization
Chapter 1 – Introducing Angular
What is Angular?
Central Features of the Angular Framework
Why Angular?
Scope and Goal of Angular
Angular vs. AngularJS
But Isn't It "Angular 2"?
Installing and Using Angular
Adding Angular and Dependencies to Your App
Building Blocks of an Angular Application
A Basic Angular Application
Basic App – index.html
Basic–App: Application Module File
Basic–App: Main Bootstrap File
Basic–App: The Component File
Major Changes in Angular 4
Summary

Chapter 2 – Development Setup of Angular
Angular is Modular
Managing Angular 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 Packages
Angular CLI
Angular Development Overview
Angular Development Dependencies
TypeScript Definitions
Testing Tools
Development Servers
Angular Application Dependencies
Module Loaders
SystemJS Module Loader
WebPack Module Bundler
Additional Application Dependencies
Summary

Chapter 3 – Introduction to TypeScript and ES6
Programming Languages for Use with Angular
TypeScript Syntax
Programming Editors
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
var, let and const – Defined
var, let and const – Usage
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
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
Passing Data into Components using @Input()
Passing Data from Child to Parent using @Output()
@Output() Example – Child Component
@Output() Example – Parent Component
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
If–Else Syntax of ngIf
Declare Variables in ngIf
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
Model Driven Forms Overview
Setup for Model Driven Forms
Form Component Setup
Setup Main FormGroup
formControlName
FormControl Object
Getting Form Values
FormBuilder Form Initialization
Validation
Built–In Validators
Custom Validator
Using a Custom Validator
Useful FormGroup and FormControl Properties/Functions
Sub FormGroups – Component Class
Sub FormGroups – HTML Template
Why Use Sub FormGroups
Summary

Chapter 10 – Angular Modules
Why Angular Modules?
Angular Built–in Modules
The Root Module
How to Create a Module
Feature Modules
@NgModule Properties
Using One Module From Another
Importing BrowserModule or CommonModule
Lazy–Loaded Modules
How to Organize Modules?
Relative Paths for Resources
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
Dependency Injection Hierarchy Diagram
Using a Service in a Component: Dedicated Instance
Injection Hierarchy – Dedicated Instance
Using a Service in a Component: Dedicated Instance – Example Code
Using onInit to Initialize Component Data
Using a Shared Service Instance
Injection Hierarchy – Shared 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
REST Web Services and Angular
Understanding REST
REST Example – Create
REST Example – Retrieve
REST Example – Update
REST Example – Delete
REST Example – Client Generated ID
REST Example – JSON
Knowledge of the REST API
Common Angular Tasks for REST Communication
Angular Service Class Using HTTP Client
RequestOptions
URL Path Parameters
Query Parameters
Common HTTP Request Headers
Override Default Request Options
Returning Response Data
DELETE
GET
PUT
POST
Security of REST APIs
Summary

Chapter 14 – Consuming WebSockets Data in Angular
Web Sockets Overview
Web Sockets Use Cases
Web Socket URLs
Web Sockets Servers
Web Socket Client
The socket.io–client library
Using socket.io–client in JavaScript
Setting up socket.io–client in Angular Projects
Using socket.io–client in an Angular service
Angular websocket.service Notes:
The Angular Web Socket Client Sample App
Angular websocket.component.ts
The Full websocket.component.ts code
Implementation Modifications
Summary

Chapter 15 – Pipes and Data Formatting
What are Pipes?
More on Pipes
Formatting Changes in Angular
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
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 – 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
Lazy Loading Modules via Child Routes
Lazy Loading: The child routing module
Lazy Loading: Add routing to the module
Lazy Loading: Update the main routing file
Navigation Guards
Creating Guard Implementations
Using Guards in a Route
Route Animations
Summary

Chapter 19 – Angular Animations
What is Animation?
Animation Configuration
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 Components and Services
Testing Angular Components
Testing Tools
Testing Setup
Important Test Configuration Settings
Typical Testing Process
Jasmine Test Suites
Jasmine Specs (Unit Tests)
Expectations (Assertions)
Matchers
Examples of Using Matchers
Using the not Property
Setup and Teardown in Unit Test Suites
Example of beforeEach and afterEach Functions
Angular TestBed
Typical Test Structure
Example of Basic Angular Test
Basic beforeEach Configuration
Automatically Detecting Component Changes
Testing External Templates
Testing Components With Dependencies
Getting Injected Services
Testing With Dependencies – Test Double
Testing With Dependencies – Spy
Testing With Asynchronous Dependencies
Testing Components With @Input and @Output
Testing Routed Components
Summary

Chapter 21 – Developing Using AngularCLI
What is AngularCLI?
AngularCLI Prerequisites
Installing AngularCLI
Command Help
Creating an App
Running Angular CLI Apps with ng serve
ng serve options
AngularCLI Blueprints
Generating Components
The .angular–cli.json Settings File
Generated Modules
Generated Services
Generated Specs for Unit Testing
An Example Unit Test Spec
Running Unit Tests
End to End Testing
Example End to End Test:
Summary

Chapter 22 – Debugging
Debugging Overview
Basic Debugging Practices
Development (Debug) Mode
Selecting Elements to Inspect
Inspecting Angular Components with ng.probe
Saving ng.probe Component References
Modifying Values using Component References
Using Breakpoints in Angular Code
Breakpoint in TypeScript Code
What is Augury?
Installing Augury
Opening Augury
Augury – Component Tree
Augury – Router Tree.
Augury – NgModules Tab
Common Exceptions
Common Exceptions: 'No such file: package.json'
Common Exceptions: 'Cant bind to ngModel'
Common Exceptions: 'router–outlet not a known element'
Common Exceptions: 'No provider for Router!'
Summary

Chapter 23 – Angular Style Guide
What is the Angular Style Guide?
Style Categories
Single Responsibility
Naming
Coding Conventions
App Structure and Angular Modules
Components
Directives and Services
Summary

Appendix A – Overview of JSON Web Tokens (JWT)
RESTful Web Service API Refresher
JSON Web Tokens
JSON Web Token Architecture
JWT Header
JWT Payload
JWT Example Payload
JWT Example Signature
How JWT Tokens are Used
Adding JWT to HTTP Header
How The Server Makes Use of JWT Tokens
What are “Scopes”?
What About OAuth?
Summary
Lab Exercises

Lab 1. Introduction to Angular
Lab 2. Introduction to TypeScript
Lab 3. Introduction to Components
Lab 4. Create the Subscription Form Component
Lab 5. Understanding Data Binding
Lab 6. One Way Data Binding in a Custom Component
Lab 7. Using Basic Angular Directives
Lab 8. Using Structural Directives
Lab 9. Template Driven Form
Lab 10. Validation of a Template Driven Form
Lab 11. Model Driven Form
Lab 12. Service and Dependency Injection
Lab 13. HTTP Client Development
Lab 14. Angular Communication with REST Services
Lab 15. Consuming Data from Web Sockets
Lab 16. Using Pipes
Lab 17. Basic Single Page Application Using Router
Lab 18. Advanced Routing
Lab 19. Angular Animations
Lab 20. Testing Angular Components
Lab 21. Debugging Angular Applications
Send Us a Message
Choose one