O'Reilly logo
live online training icon Live Online training

Modern Web Development with TypeScript and Angular

Leverage the power of TypeScript for building Angular applications

Alain Chautard

JavaScript is the main language behind every single web page in the world. It is the language that enables all of the dynamic aspects of the web, such as real time updates, notifications, as well as more advanced features in the browser. TypeScript, a superset of JavaScript, enables great tooling and better structuring of large JavaScript applications.

What used to be a simple scripting language has evolved into a full-fledged language that supports Object oriented capabilities as well as powerful APIs to manipulate arrays, manage asynchronous tasks, and much more.

In this training, we will cover the next big thing in modern web development: Typescript, which brings types, decorators and many more features on top of what JavaScript already does. You’ll learn how to leverage the exciting features of TypeScript, while working on Angular projects to build scalable, data-intensive web applications.

What you'll learn-and how you can apply it

  • What is Typescript and how to use it
  • Explore TypeScript variables and object oriented features along with Generics and advanced types
  • Get introduced to the modern web development framework – Angular and learn typical architecture of an Angular application
  • Create Components with Angular and understand how to interconnect them
  • See how to connect Angular front-end with backend

This training course is for you because...

  • You're are a software developer interested in front-end web development.
  • You want to understand how modern frameworks function and interrelated technologies.

Prerequisites

  • Basic understanding of JavaScript
  • Some HTML knowledge

Materials, downloads, or Supplemental Content needed in advance:

Recommended Preparation:

About your instructor

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Section 1: Introduction to Typescript (30 min)

  • What is Typescript?
  • Advantages of using Typescript
  • Basic types
  • Generating types from JSON data
  • Usefulness of types and IDE integration
  • Enums and Tuples

Lab 1: Dev environment set-up + creating an enum (15 min)

  • Using the TSC compiler
  • Iterating through an enum

Break

Section 2: Typescript variables and object oriented features (30 min)

  • Variable declarations
  • Interfaces
  • Classes
  • Constructor syntax shortcut
  • Inheritance in Typescript
  • Abstract classes

Lab 2: Interfaces in Typescript (15 min)

  • Create an interface and have our Typescript code us it

Lab 3: Classes and inheritance in Typescript (15 min)

  • Have an object oriented hierarchy of object
  • Understand how inheritance works in Typescript

Break

Section 3: Generics and advanced types in Typescript (30 min)

  • Generics syntax
  • Union types
  • Typeof operator
  • Instanceof operator
  • Guards and assertions

Lab 4: Generics in Typescript (15 min)

  • Create an interface and have our Typescript code us it

Break

Section 4: Modules in Typescript + ES6 features in Typescript (30 min)

  • What is a module?
  • Export syntax
  • Import syntax
  • ES6 template strings
  • ES6 arrow functions

Lab 5: Modules in Typescript (15 min)

  • Split our code in different files and use modules to import / export that code

Lab 6: Strings and destructuring (15 min)

  • Use string features as well as object destructuring in our code

DAY 2

Section 5: Introduction to Angular (50 min)

  • Typical architecture of an Angular application
  • Using Angular CLI to scaffold our app
  • Building Blocks – Components, Services, Pipes, Directives

Lab 6: Creating components with Angular CLI (20 min)

  • Create two different components with Angular CLI to build the user interface for our store

Lab 7: Using directives in Angular (25 min)

  • Use ngFor to render a list of products in our store
  • Use ngIf to add a conditional "sale" sticker to our products

Break

Section 6: Integrating it all: How to connect Angular to the backend? (25 min)

  • Introduction to Angular services
  • Dependency injection
  • Introduction to RxJS observables
  • Using the Http Client to retrieve server data

Lab 8: Connecting our Angular front-end with a back-end (20 min)

  • We improve our application by connecting the front-end and the back-end, effectively rendering server data on the client side in the browser.

Break

Section 7: Using the component router to emulate multiple pages (25 min)

  • Introduction to the component router
  • Lazy loading
  • Child routes
  • Guards for authentication

Lab 9: Implementation of the component router in our store (20 min)

  • We finalize our application by using multiple screens, implementing user log in and the entire authentication feature.