Comprehensive Angular 7 Programming
CLASS DATE(s):
Request a Class

COURSE LENGTH: 5 Days

COURSE COST: $2495

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course
print

COURSE OVERVIEW

The Comprehensive Angular 7 Programming Training course covers all the essential topics found in the introductory course as well as additional topics typically encountered while developing real-world applications. The course is designed to get students up and running with basic Angular development and provide the knowledge needed for more challenging tasks.

The Angular JavaScript framework supports the creation of single-page browser applications as well as responsive web sites and hybrid mobile applications. This course covers all the basics including: Typescript, components, directives, services, pipes, form development, HttpClient and observables. In addition it covers advanced usage of HttpClient, observables and routing. Added to that are topics on consuming WebSockets data, Testing and Debugging of Angular applications.

AUDIENCE AND PREREQUISITES

Web development experience using HTML, CSS and JavaScript is required to get the most out of this Angular course. Knowledge of the browser DOM is also useful. Prior Angular experience, with AngularJS or the current version of Angular, is not required.

  

*Course Cost listed does not include the cost of courseware. Course is subject to a minimum enrollment to run. Course may run virtually as a Virtual Instructor-Led (VILT) class if the minimum enrollment is not met. For more information, please contact 207-775-0244 or email: learn@vtec.org

COURSE TOPICS:


OBJECTIVES - In this training, attendees will learn how to:
Develop single page Angular applications using Typescript
Set up a complete Angular development environment
Create Components, Directives, Services, Pipes, Forms and Custom Validators
Handle advanced network data retrieval tasks using Observables
Consume data from REST web services using the Angular HTTP Client
Handle push-data connections using the WebSockets protocol
Work with Angular Pipes to format data
Use advanced Angular Component Router features
Test and debug Angular applications using built in tools
Work with Angular CLI

1. Introducing Angular
What is Angular?, Central Features of the Angular Framework
Why Angular? Building Blocks of an Angular Application
Basic Architecture of an Angular Application
Installing and Using Angular
A Basic Angular Application
Anatomy of a Basic Application
The Main Component File
The Application Module File
The index.html File
The Bootstrap File
Running the Application
Building the Application

2. Development Setup of Angular
Angular Development Lifecycle, Angular is Modular
What is Node.js?, Installing Node.js and NPM
Node Package Manager (NPM), Package Descriptor File - package.json
Semantic Version Numbering, Package Version Numbering Syntax
Updating Packages, Uninstalling Packages
Installing Angular Packages, Angular CLI
Creating a New Project, Angular
Development, Dependencies, TypeScript Typings
Testing Tools, Development Web Server
Configuring the Web Server
The Build System
Configuring the Build

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, Type in Functions
Type Inference, The Type System Classes & Objects
Class Constructors, Class Constructors Alternate Form
Interfaces, Working with ES6 Modules
Visibility Control, var, let and const - defined
var, let and const - usage, Arrow Functions, Arrow Function Compact Syntax
Arrow Function and Caller Context, Template Strings,
Template Strings Variables and Expressions, Multiline
Generics - Class, Methods, Restricting Types, estricting Types: Example, TypeScript Transpilation

4. Components in Angular
What is a Component?, An Example Component
The Component Class, Adding a Component to Its Module, Creating a Component Using Angular CLI
Developing a Simple Login Component, Component Template
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, Hierarchy
The Application Root Component, Using a Regular Component
The Build System, Component Lifecycle Hooks
Using a Lifecycle Hook:
OnInit

5. Data and Event Binding
Binding Syntax, One-Way Output Binding
Binding Displayed Output Values, Setting Component Properties
More About Setting Properties, Setting DOM Element Properties
Event Binding, Binding Events Examples
Firing Event from a Component
@Output() Example - Child Component, - Parent Component
Two-Way Binding of Input Fields
Input Binding Examples
Two Way Binding in a Component
Use Two Way Binding
Breaking Down ngModel

6. Attribute Directives
What are Attribute Directives, Apply Styles by Changing CSS Classes
Changing Classes Example, Applying Styles Directly
Applying Styles Directly - Example
Controlling Element Visibility
Setting Image Source Dynamically
Setting Hyperlink Source Dynamically
Writing a Custom Attribute Directive
Using a Custom Attribute Directive
Supplying Input to a Directive
Handling Event from a Custom Directive

7. Structural Directives
Structural Directives
Adding and Removing Elements Dynamically
If-Else Syntax of ngIf
Looping Using ngFor
ngFor - Basic Example
Creating Tables with ngFor
ngFor Local Variables
Manipulating the Collection
Example - Deleting an Item
Swapping Elements with ngSwitch
ngSwitch - Basic Syntax

8. Template Driven Forms
Template Driven Forms, Importing Forms Module, A Basic Angular Form
Binding Input Fields, Accessing the NgForm Directive Binding the Form Submit Event
The Submit Function, Basic HTML5 Validation - "required" Attribute, HTML5 vs. Angular Validation
Angular Validators, The NgModel Directive,
Controlling when validation is applied, 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 & Code
Additional Input Types, Checkboxes
Select (Drop Down) Fields, Rendering Options for Select (Drop Down),
Date fields, Radio Buttons

9. Reactive Forms
Reactive Forms Overview
The Building Blocks
Import ReactiveFormsModule
Construct a Form, Design the Template
FormControl Constructor, Getting Form Values
Setting Form Values
The Synchronous Nature, Subscribing to Input Changes
Validation, Built-In Validators
Showing Validation Error, Custom Validator
Using a Custom Validator
Sub FormGroups - Component Class
Sub FormGroups - HTML Template, Why Use Sub FormGroups

10. Angular Modules
Why Angular Modules? But, We Already Had ES6 Module
Angular Built-in Modules, The Root Module
Feature Modules, Create Feature Module Using CLI
The Module Class, @NgModule Properties
Using One Module From Another
Importing BrowserModule or CommonModule
Lazy-Loaded Modules
How to Organize Modules?
Third Party Modules

11. Services and Dependency Injection
What is a Service? Creating a Basic Service
What is Dependency Injection?
What Dependency Injection Looks Like
Injectors, Injector Hierarchy
Register a Service with a Module Injector
Registering a Service with the Root Injector
Registering a Service with a Component's Injector
Where to Register a Service?
Dependency Injection in Other Artifacts
Providing an Alternate Implementation
Dependency Injection and @Host
Dependency Injection and @Optional

12. HTTP Client
The Angular HTTP Client
Using The HTTP Client - Overview
Importing HttpClientModule
Simple Example, Service Using HttpClient
ES6 Import Statements
Making a GET Request
What does an Observable Object do?
Using the Service in a Component
The PeopleService Client Component
Error Handling, Making a POST Request
Making a PUT Request
Making a DELETE Request

13. Pipes and Data Formatting
What are Pipes?, Built-In Pipes
Using Pipes in HTML Template
Chaining Pipes, Using Pipes in Code
Internationalized Pipes (i18n), Loading Locale Data
Decimal Pipe, Currency Pipe
Custom Pipes
Custom Pipe Example
Using Custom Pipes
Using a Pipe with ng, A Filter Pipe, A Sort Pipe
Pipe Category: Pure and Impure
Pure Pipe Example
Impure Pipe Example

14. Introduction to Single Page Applications
What is a Single Page Application (SPA)
Traditional Web Application
SPA Workflow
Single Page Application Advantages
HTML5 History API
SPA Challenges
Implementing SPA's Using Angular

15. The Angular Component Router
The Component Router, View Navigation
The Angular Router API
Creating a Router Enabled Application
Hosting the Routed Component, Navigation Using Links and Buttons
Programmatic Navigation, Passing Route Parameters
Navigating with Route Parameters, Obtaining the Route Parameter Values
Retrieving the Route Parameter Synchronously
Retrieving a Route Parameter Asynchronously
Query Parameters, Supplying Query Parameters
Retrieving Query Parameters Asynchronously,
Problems with Manual URL entry and Bookmarking

16. Advanced HTTP Client
Request Options, Returning an HttpResponse Object
Setting Request Headers, Creating New Observables
Creating a Simple Observable
The Observable.create() Method
Observable Operators, More About map
Piping Operators, The flatMap() Operator
The tap() Operator
The zip() Operator, Caching HTTP Response
Making Sequential HTTP Calls
Making Parallel Calls, Customizing Error Object with catchError()
Error in Pipeline
Error Recovery

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

18. Advanced Routing
Routing Overview, Routing Enabled Project
Routing Enabled Feature Module, Using the Feature Module
Lazy Loading the Feature Module, Creating Links for the Feature Module Components
More About Lazy Loading, routerLinkActive binding
Default Route, Wildcard Route Path
redirectTo, Child Routes
Defining Child Routes
for Child Routes
Links for Child Routes, Navigation Guards
Creating Guard Implementations
Using Guards in a Route
Route Animations

19. Introduction to Testing Angular Applications
Unit Testing Angular Artifacts, Testing Tools
Testing Setup, Typical Testing Steps, Test Results
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 Test Module
Example Angular Test Module, Testing a Service
Injecting a Service Instance, Test a Synchronous Method
Test an Asynchronous Method, Using Mock HTTP Client
Supplying Canned Response, Testing a Component, Component Test Module
Creating a Component Instance, The ComponentFixture Class
Basic Component Tests, The DebugElement Class, Simulating User Interaction

20. Debugging
Overview of Angular Debugging, Viewing TypeScript Code in Debugger
Using the debugger Keyword, Inspecting Components, Saving ng.probe Component References
Modifying Values using Component References, Debug Logging
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!'

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. Custom Attribute Directive
Lab 10. Template Driven Form
Lab 11. Validation of a Template Driven Form
Lab 12. Reactive Forms

.
Lab 13. Service and Dependency Injection
Lab 14. HTTP Client Development
Lab 15. Using Pipes
Lab 16. Basic Single Page Application Using Router
Lab 17. Angular Communication with REST Services
Lab 18. HTTP Error Handling and Recovery
Lab 19. Using Angular Bootstrap
Lab 20. Consuming Data from Web Sockets
Lab 21. Lazy Module Loading
Lab 22. Advanced Routing
Lab 23. Introduction to Unit Testing
Lab 24. Debugging Angular Applications