Angular 4 and TypeScript Single Page Application (SPA) Development

Empower your JavaScript development skills by mastering Angular 4 and TypeScript to build powerful Single Page Applications, designed specifically for forward-thinking developers aiming to excel in modern web frameworks.

Course Thumbnail

Essential Skills Gained

Checkmark

Understand the fundamentals of Single Page Applications and their benefits.

Checkmark

Implement core Angular features such as components, modules, and routing.

Checkmark

Use TypeScript and ES2015 to enhance your application development process.

Checkmark

Create and manage data-driven applications using services, observables, and directives.

Format

  • Instructor-led
  • 4 days with lectures and hands-on labs.

Audience

  • JavaScript Developers
  • Frontend Developers
  • Web Application Developers
  • Software Engineers

Description

“Learn by doing!” – that’s the goal of the Angular Application Development course. The 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 covers Angular 2 and higher. It doesn’t not cover the AngularJS 1.x version of the framework.

Calendar icon

Upcoming Course Dates

No upcoming dates. Please check back later.

Course Outline

Download PDF

Introduction to Angular

  1. The Big Picture

  2. Key Framework Features

  3. Framework Architecture

  4. Angular Hello World

  5. Angular CLI

TypeScript JumpStart

  1. Introduction to TypeScript

  2. Types, Keywords and Hierarchy

  3. Classes, Properties and Functions

  4. Interface Constraints

  5. Namespaces and Modules

  6. Compiling TypeScript

The Angular JumpStart Application

  1. Application Overview

  2. Application 2 JumpStart in Action

  3. Application Structure

Components and Modules

  1. Components Overview

  2. Component Lifecycle

  3. ES2016 Modules

  4. Exploring systemjs.config.js

  5. Angular Modules

Template Expressions and Pipes

  1. Templates Syntax Overview

  2. Interpolation and Expressions

  3. Working with Pipes

Component Properties and Data Binding

  1. Property and Event Binding

  2. Input and Output Properties

  3. Angular Directives

  4. Two-way Binding

  5. Change Detection

Services, Providers and Http

  1. Services Overview

  2. Injectors and Providers

  3. @Injectable Decorator

  4. Promises and Observables

  5. Calling RESTful Services with Http

Routing

  1. Routing Overview

  2. Routing Steps

  3. The Router Service

  4. Route Parameters

  5. Creating Child Routes

Route Guards and Lazy Loading

  1. Introduction to Route Guards

  2. Creating and Using Route Guards

  3. Lazy Loading

Forms

  1. Forms Overview

  2. Template-Driven Forms

  3. Reactive Forms

  4. Managing Form Control Styles

Custom Directives and Components (Bonus)

  1. Directives Overview (Attribute vs. Structural)

  2. Building a Custom Sorting Directive

  3. Building a Custom FilterTextbox Component

  4. Building a Custom Mapping Component

webpack Fundamentals (Bonus)

  1. webpack Overview

  2. webpack Building Blocks

  3. Ahead of Time Compilation in Angular

Your Team has Unique Training Needs.

Your team deserves training as unique as they are.

Let us tailor the course to your needs at no extra cost.