O'Reilly logo
live online training icon Live Online training

Developing Angular 2 web apps with TypeScript

Yakov Fain

Angular 2 is not a library, but a framework that has everything you need to develop and deploy web applications. It introduces several concepts that may not be familiar for a web developer working with other frontend frameworks. This online training course will help you in understanding the following challenging topics, including:

  • How to write the code in one language (TypeScript), compile it into another (JavaScript), deploy the app in JavaScript, and debug the original TypeScript code in the browser.   
  • Why using the principles of reactive programming are important and how to work with observable streams.
  • How to turn multiple source code files that represent your application components into a small number of optimized JavaScript files for deployment.

Participants of this 12-hour (four sessions) online training course will gain practical skills while exploring the best practices and principles of developing Angular 2 web applications with TypeScript. The course includes multiple sample applications illustrating solutions for real-world challenges. This is a hands-on workshop where participants will work on multiple exercises using provided instructions under the guidance of the instructor.

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

Participants will understand…

  • How to jump-start a new Angular project
  • How to arrange the client-side navigation in Single Page Applications (SPAs)
  • How to communicate with servers using HTTP and WebSocket protocols

Participants will be able to…

  • Write code in TypeScript with the Angular 2 framework and deploy it in any modern web browser
  • Unit test the router, services, and components
  • Automate the building and deployment processes using tools provided with Angular CLI

This training course is for you because...

  1. You are a JavaScript developer and you need to be able to start working on a real world Angular 2 project
  2. You are a developer with experience in any object-oriented language (e.g. Java or C#) and you’re making the switch to web development with Angular
  3. You are a technical project manager and need to evaluate the feasibility of using Angular 2 in your new web project
  4. You need to conduct technical interviews to hire Angular 2 developers for your new project

Prerequisites

  1. To gain the most from this class attendees should understand the syntax of JavaScript and HTML.
  2. Familiarity with any object-oriented language is helpful.
  3. No prior experience of working with the AngularJS framework is required.

Participants enrolled in this course need to have the following software installed on their computers:

Recommended Preparation:

Angular 2 Development with TypeScript

Learning Path: On the Road to Angular 2

About your instructor

  • Yakov Fain is the co-author of the Amazon bestseller Angular 2 Development with TypeScript, as well as a number of other technical books on programming. Yakov works as a software architect at the IT consultancy Farata Systems and develops software products for the insurance industry. A Java Champion, he has taught multiple classes and workshops on web and Java-related technologies, presented at international conferences, and published more than a thousand blog posts (see https://yakovfain.com).

Schedule

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

Unit 1. First steps with Angular 2  Duration: 2.5hr

  • Introduction to Angular 2 architecture
  • Brief introduction to TypeScript
  • Using type definition files
  • Generating your first project  with Angular CLI
  • Intro to Angular modules
  • Templates and bindings

Unit 2. Client-side navigation with component router  Duration: 1.5 hr

  • Intro to client-side navigation with component router
  • Child routes, multiple router outlets, lazy loading

Unit 3. Dependency injection Duration: 1hr

  • Dependency injection
  • Providers and injectors
  • Injectors hierarchy
  • Injecting with factory functions

Unit 4. Inter-component communications. Duration: 1.5hr

  • Inter-component communications via binding and events
  • Using a parent component as a mediator
  • Using an injectable service as a mediator
  • Projection of HTML fragments
  • Component life cycle

Unit 5. Working with Forms API. Duration: 1.5hr

  • Basic forms with ngModel
  • Template-driven forms
  • Model-driven forms
  • Form validation

Unit 6. Observable streams in Angular. Duration: 2hr

  • Introduction to reactive programming with RxJS
  • Events as observables
  • HTTP requests as observables
  • Observables in the router

Unit 7. Communicating with a web server . Duration: 2 hr

  • Creating a simple HTTP server with the Node.js and Express frameworks
  • Working with Angular HTTP object
  • Code review of a sample Online Auction that communicates with Node server
  • Bundling an Online Auction and deploying it on the Node.js server