Building web apps with Angular and TypeScript

Session Detail:    Classroom 3 Day

In recent years a lot of effort has gone into making HTML and JavaScript a better place for web apps rather than just web content. With Angular, you can exploit these new and modern concepts to take it to the next level. By using a componentized approach, Angular is better equipped than ever to build performant data-driven web-apps. While Angular takes care of data binding, navigation, and server communication; TypeScript allows you to use the most advanced features JavaScript has to offer on any browser. Features like strong typing make your application more maintainable, better structured, and flexible. This course is constantly being updated to the latest version of Angular, currently Angular 6. Enjoy this beautiful synergy between Google`s Angular and Microsoft`s TypeScript.

Prerequisites

  • A good understanding of JavaScript
  • Basic understanding of HTML and CSS
  • At least a notion of node.js and npm
  • An IDE for web development like Visual Studio Code or WebStorm

Who Can Benefit

This course targets professional web developers who are looking for a kick-start into the world of Angular and TypeScript. Participants of this course need to have a good understanding of JavaScript, HTML and CSS, and a notion of node.js and npm.

Session Outline

Class Outline

Module 1: Introduction to Angular

  • Lesson 1: Evolution in Web App Development
  • Lesson 2: Angular Core and Modules
  • Lesson 3: TypeScript, Dart, Plain Old JavaScript

After completing this module, students will be able to:

  • Have an understanding of modern web UI technologies and the role they play in modern development

Module 2: Strongly Typed JavaScript with TypeScript

  • Lesson 1: Writing Application-Scale JavaScript
  • Lesson 2: Type-Safe JavaScript Development with TypeScript
  • Lesson 3: Implementing Types, Classes and Inheritance
  • Lesson 4: Namespaces and Modules

After completing this module, students will be able to:

  • Have an understanding of the benefits of TypeScript
  • Use the core features of TypeScript
  • Set up a new TypeScript project
  • Compile and run TypeScript project

Module 3: Core Concepts

  • Lesson 1: Components
  • Lesson 2: Modules
  • Lesson 3: Services
  • Lesson 4: Tools

After completing this module, students will be able to:

  • Understand the goal of Components and Services
  • Group Components and Services into Modules
  • Work with Angular Tools

Module 4: Data binding

  • Lesson 1: The Importance of Binding
  • Lesson 2: Component to View
  • Lesson 3: Structural Directives
  • Lesson 4: Local Template Variables
  • Lesson 5: Value Conversion
  • Lesson 6: View to Component

After completing this module, students will be able to:

  • Create and update a view using data binding
  • Handle user interactions in a component
  • Refer to elements with local template variables
  • Use pipes for value conversion

Module 5: Components

  • Lesson 1: Using Multiple Components
  • Lesson 2: Input and Output
  • Lesson 3: ViewChild and ContentChild
  • Lesson 4: EventEmitter
  • Lesson 5: Directive Life Cycle

After completing this module, students will be able to:

  • Split up complex components into multiple components
  • Set up parent-child communication
  • Work with various life cycle hooks

Module 6: Attribute Directives

  • Lesson 1: What are the Attribute Directives?
  • Lesson 2: Built-in Attribute Directives
  • Lesson 3: Custom Attribute Directives

After completing this module, students will be able to:

  • Understand the role of attribute directives
  • Use built-in attribute directives
  • Create your own attribute directives

Module 7: Structural Directives

  • Lesson 1: What are the Structural Directives?
  • Lesson 2: Built-in Structural Directives
  • Lesson 3: Templates
  • Lesson 4: Custom Structural Directives

After completing this module, students will be able to: After completing this module, students will be able to:

  • Understand the role of structural directives
  • Use built-in structural directives
  • Create your own structural directives

Module 8: Dependency Injection and Providers

  • Lesson 1: Terminology
  • Lesson 2: Dependency Injection Basics
  • Lesson 3: Services
  • Lesson 4: Providers
  • Lesson 5: Factories
  • Lesson 6: Injection Tokens

After completing this module, students will be able to:

  • Create their own services
  • Work with the various providers in Angular
  • Inject services into components and other services

Module 9: Pipes

  • Lesson 1: Using a Pipe
  • Lesson 2: Built-in Pipes
  • Lesson 3: Custom Pipes
  • Lesson 4: Pure versus Impure

After completing this module, students will be able to:

  • Use built-in pipes
  • Create their own pipes
  • Understand the importance of pure pipes

Module 10: Working with Forms

  • Lesson 1: What’s in a Form
  • Lesson 2: Responding to Changes
  • Lesson 3: FormBuilder
  • Lesson 4: Data Validation

After completing this module, students will be able to:

  • Choose between template-driven and model-driven forms
  • Create a form and submit the information
  • Add validation and visual feedback

Module 11: Talking to the Server

  • Lesson 1: Sending and Receiving Data
  • Lesson 2: HTTPClient Module
  • Lesson 3: HTTP Interceptors
  • Lesson 4: Observables versus Promises

After completing this module, students will be able to:

  • Work with HttpClient to make rest calls.
  • Process the result with observables.

Module 12: Building a Single Page Application

  • Lesson 1: What is a SPA
  • Lesson 2: Router Module
  • Lesson 3: Route Configuration
  • Lesson 4: Parent-Child Navigation
  • Lesson 5: Route Guards

After completing this module, students will be able to:

  • Create a single page application
  • Create feature areas
  • Set up routing per feature
  • Intercept navigation with guards

Need to train your team?

All of our sessions can be customized to meet your team’s specific need. Build the perfect program by picking and choosing topics from any of the courses in our catalog. A personalized private session gives you the ultimate flexibility and helps maximize your team’s valuable time!

Requesting Team Training
DateTimeTypePriceAdd To Cart

Building web apps with Angular and TypeScript

3 Day
Classroom

$2.295.00

Chat with a Coach

Chat with a Coach

Have a more immediate need? Why spend the next hour searching online for answers when you can spend just 15 minutes with one of our experts and get accurate and personalized answers to all of your questions. 

$9.99 | 15 Minutes

Book Now