ANG315: Angular & TypeScript Single Page Application(SPA)Development

Become an EPIC Affiliate

To view the class schedule you need to become an Affiliate

  • Largest “Guaranteed To Run” public technical training schedules available
  • Easy to become an Affiliate – no charge or fee
Become an EPIC Affiliate

already an Affiliate?  Login

About this Course

“Learn by doing!” – that’s the goal of the Angular Application Development course. This course starts with an introduction to Single Page Applications (SPA) and the benefits that SPAs can provide to both developers and end users. It then jumps into an overview of key Angular  features and ES2015/TypeScript. Students will learn what benefits ES2015 and TypeScript offer and get hands-on experience using them throughout the class. From there students learn about different aspects of the Angular framework such as components, modules, templates, data binding syntax, directives, data services, calling RESTful services, observables, decorators, routing and more. Best practices and techniques for structuring code are discussed as well as techniques for using the documentation and Angular Github source code repository to find answers to questions.

Note: This course is always updated to the latest version of Angular, and covers Angular 2 and higher. It does not cover the AngularJS 1.x version of the framework.

Audience Profile

This course is designed for JavaScript developers looking to build Single Page Applications using the latest version of the Angular framework and the TypeScript language.

At Course Completion

Single Page Application Features
TypeScript Fundamentals
Working with ES2015 modules (import/export)
Key features of Angular
Using NgModule to organize applications
Data binding syntax
The Role of components
Input and Output properties
Understand the component life-cycle
Using directives in templates
Creating injectable services
Understand the difference between Observables and Promises
Using Http and Observables to interact with RESTful services
Working with pipes
Build and use custom pipes
Understand how routing works and how to use child routes
Build and use custom directives
Working with template-Driven and reactive forms


1. Introduction to Angular

The Big Picture
Key Framework Features
Framework Architecture
Angular Hello World
Angular CLI
2. TypeScript JumpStart

Introduction to TypeScript
Types, Keywords and Hierarchy
Classes, Properties and Functions
Interface Constraints
Namespaces and Modules
Compiling TypeScript
3. The Angular JumpStart Application

Application Overview
Application 2 JumpStart in Action
Application Structure
4. Components and Modules

Components Overview
Component Lifecycle
ES2016 Modules
Exploring systemjs.config.js
Angular Modules
5. Template Expressions and Pipes

Templates Syntax Overview
Interpolation and Expressions
Working with Pipes
6. Component Properties and Data Binding

Property and Event Binding
Input and Output Properties
Angular Directives
Two-way Binding
Change Detection
7. Services, Providers and Http

Services Overview
Injectors and Providers
@Injectable Decorator
Promises and Observables
Calling RESTful Services with Http
8. Routing

Routing Overview
Routing Steps
The Router Service
Route Parameters
Creating Child Routes
9. Route Guards and Lazy Loading

Introduction to Route Guards
Creating and Using Route Guards
Lazy Loading
10. Forms

Forms Overview
Template-Driven Forms
Reactive Forms
Managing Form Control Styles
11. Custom Directives and Components (Bonus)

Directives Overview (Attribute vs. Structural)
Building a Custom Sorting Directive
Building a Custom FilterTextbox Component
Building a Custom Mapping Component
12. webpack Fundamentals (Bonus)

webpack Overview
webpack Building Blocks
Ahead of Time Compilation in Angular


Attendees must have prior experience working with JavaScript, HTML and CSS to take this class. A minimum of 6-months of hands-on JavaScript experience is recommended to get the most out of the course. TypeScript experience is recommended but not required since an introductory chapter is provided in the course.

20480: Programming in HTML5 and JavaScript and CSS3

JS300: Mastering JavaScript (with ECMAScript2 and TypeScript)