O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building Web Apps with Angular and TypeScript

Video Description

Angular and TypeScript have become key tools for enterprise web developers. Angular's web dev platform works for teams with mixed skill levels and doesn't need additional libraries and tools to develop a complete app. TypeScript is a superset of JavaScript that makes developers more productive. Why? Because writing code in traditional JavaScript allows for errors to sneak into deployed code, while TypeScript's static typing catches those errors during development. This course gets you started with web app development using Angular and TypeScript. You’ll learn the basics of the Angular framework and its tooling for developing single page web apps; you'll generate a new project using Angular CLI and work with modules, components, dependency injection, routing, reactive programming, and inter-component communication; and then learn how to make HTTP requests to a web server. You'll finish up by doing a code review of a frontend sample online auction. The course works best if you've completed the O'Reilly videos "TypeScript Essentials" and "RxJS Essentials." Requirements include basic experience with JavaScript and understanding of an object-oriented programming language. Please have a current version of Node.js, the Chrome browser, and Visual Studio Code loaded on your computer before you start the class.

  • Understand how Angular projects are structured
  • Survey TypeScript basics (e.g., classes, interfaces, generics, type definition files, etc.)
  • Learn how to create reusable components and services
  • Practice arranging client-side navigation using the router
  • Discover how to inject services into components
  • Understand to communicate with servers using HTTP
  • Pick up the ability to deploy Angular apps on Web servers

Yakov Fain is a Java Champion and cofounder of the IT consultancy, Farata Systems. An in-demand speaker at international conferences, Yakov has written 1,000 blogs (http://yakovfain.com) and authored or coauthored multiple books about software development, including Angular 2 Development with TypeScript (Manning Publications) and Enterprise Web Development (O'Reilly Media).

Table of Contents

  1. A High-Level Overview of Angular
    1. Introduction 00:01:26
    2. The Main Angular Players 00:14:22
    3. Angular Project Structure 00:02:55
    4. Installing Angular and Its Dependencies with npm 00:07:57
    5. Generating Projects with Angular CLI 00:09:39
    6. How to Run Code Samples of This Course 00:02:46
  2. TypeScript Basics
    1. Introduction to TypeScript and Compiling TypeScript into JavaScript 00:07:06
    2. TypeScript Classes 00:08:30
    3. TypeScript Generics 00:03:11
    4. TypeScript Interfaces 00:07:41
    5. Destructuring Objects 00:02:54
    6. TypeScript Compiler: TSC 00:08:23
    7. Type Definition Files 00:05:11
  3. Angular Templates and Bindings
    1. Binding to Component Properties in Angular 00:05:16
    2. Binding to Events in Templates in Angular 00:03:13
    3. Two-Way Binding with ngModel in Angular 00:14:20
  4. Client-Side Navigation with Angular Router
    1. Single Page Applications with Angular 00:03:06
    2. Angular Location Strategies 00:04:40
    3. Configuring Routes in Angular 00:06:38
    4. Passing Data to Routes in Angular 00:09:16
    5. Child Routes 00:06:36
    6. Guarding Routes with Angular Router 00:11:02
    7. Router Recap 00:02:11
  5. Dependency Injection in Angular
    1. Benefits of Dependency Injection with Angular 00:02:19
    2. Injectors and Providers with Angular 00:18:00
  6. Reactive Programming in Angular
    1. Benefits of Reactive Code 00:02:23
    2. The Main RxJS Players 00:03:54
    3. RxJS Operators 00:02:08
    4. Creating Observables 00:12:10
    5. Marble Diagrams 00:04:16
    6. Observables in Angular Forms and Observable Events 00:10:01
    7. Observable HTTP Requests in Angular 00:05:39
    8. Observables in the Angular Router 00:06:26
  7. Inter-component communications in Angular
    1. Using Component's @Input Properties 00:08:26
    2. Using Component's @Output Properties 00:06:39
    3. Inter-Component Communication Via a Common Parent 00:07:16
  8. Component Lifecycle and Change Detection in Angular
    1. Change Detection in Angular 00:05:25
    2. Component Lifecycle Hooks in Angular 00:10:21
  9. Introduction to Angular Forms API
    1. Template-Driven Forms in Angular 00:12:59
    2. Reactive Forms in Angular 00:13:47
  10. Communicating With a Web Server from the Angular Client
    1. Preparing the Node.js Server 00:10:58
    2. Working with the Angular Http Object 00:12:42
    3. Working with the Angular HttpClient Object 00:08:46
    4. Deploying Apps on the Server with Angular CLI 00:19:44