Course 490:
Building Single Page Applications with Angular

(4 days)


Course Description

This course shows how to use Angular to build fast, modern, scalable single page web applications (SPAs). It covers the principles of SPA development, and then takes the students through the process of building an Angular application. The course introduces TypeScript, the standard language of Angular development, and covers all the key elements of Angular: modules, components, pipes, services, and directives. The students will build a complete application, creating and validating forms, using routing and animations, and creating custom components, pipes, and directives. They will use both module-based and standalone components, communicate with web services using the Angular HTTP service, and leverage Promises and Observables. By the end of the class, students will have walked through the process of building a Single Page Application (SPA) with Angular and be ready to apply that knowledge to applications they need to build at work.

Learning Objectives

  • Creating Angular components
  • Binding data and events
  • Creating and validating Angular forms
  • Adding routes to Angular applications
  • Unit Testing Angular components
  • Combining REST and observables
  • Building Angular directives

Who Should Attend

This course is designed for JavaScript developers who are looking to build Single Page Applications using Angular.


Attendees must be comfortable working with JavaScript and HTML to take this class. A minimum of 6 months of hands-on JavaScript experience is recommended to get the most out of the course.

Course Outline

Chapter 1: Introducing Angular

  • What Are Single Page Applications?
  • Angular vs. AngularJS
  • One Framework, All Platforms
  • Introducing Typescript

Chapter 2: Angular Components

  • Creating Components
  • Displaying Data with One-Way Data Binding
  • Binding Methods and Events
  • Updating Data with Two-Way Data Binding
  • Enumerating Data with *ngFor
  • Creating Angular Modules

Chapter 3: Testing Angular

  • Principles of Unit Testing
  • Testing Angular Using the Karma Framework

Chapter 4: Routing

  • Introducing the Routing Module
  • Adding Routes
  • Passing Parameters
  • Programmatic Navigation

Chapter 5: Angular Forms

  • Template vs. Model-Driven Forms
  • Validation in Template-Driven Forms
  • Creating Functional Reactive Forms
  • Validation in Model-Driven Forms
  • Styling Forms to Reflect Control State

Chapter 6: Pipes and Services

  • Transforming Data with Pipes
  • Creating Custom Pipes
  • Creating Reusable Services
  • Using Services From Components

Chapter 7: Observables and REST

  • Introduction to Observables
  • Using the Angular HTTP Service
  • Making Calls to Web Services
  • Returning Observables and Promises
  • Filtering and Debouncing for Performance

Chapter 8: Directives

  • Creating Custom Directives
  • Attribute Directives
  • Structural Directives and Templates

Chapter 9: Standalone Components

  • Creating Standalone Components
  • Bootstrapping a Standalone Application
  • Configuring Standalone Applications for Dependency Injection

Chapter 10: Animations

  • Animating State Transitions
  • Defining Triggers
  • Controlling Animation Timing
  • Keyframe Animations

Chapter 11: Completing the Application

  • Deploying to Production

Please Contact Your ROI Representative to Discuss Course Tailoring!