55266: Building web apps with Angular and TypeScript

55266: Building web apps with Angular and TypeScript

Audience

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.

Prerequisites

Before attending this course, students must have:

  • 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.

Duration

3 days. Hands on.

Course Objectives

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.

After completing this course, students will be able to:

  • Set up and write application with TypeScript.
  • Create and manage Angular applications.
  • Use data binding to update your screen.
  • Split up complex interfaces into components.
  • Write their own directives and pipes.
  • Create complex forms with validation.
  • Communicate with a REST backend.
  • Write an Single Page Application with client-side routing.

Course Content

Module 1: Introduction to Angular
Evolution in Web App Development
Angular Core and Modules
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
Writing Application-Scale JavaScript
Type-Safe JavaScript Development with TypeScript
Implementing Types, Classes and Inheritance
Namespaces and Modules
Lab : Toy Store
After completing this module, students will be able to:
• Have an understanding of the benefits of TypeScript
• Use core features of TypeScript
• Set up a new TypeScript project
• Compile and run TypeScript project

Module 3: Core Concepts
Components
Modules
Services
Tools
Lab : Inspecting a First Project
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
The Importance of Binding
Component to View
Structural Directives
Local Template Variables
Value Conversion
View to Component
Lab : TaskManager with Data Binding
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
Using Multiple Components
Input and Output
ViewChild and ContentChild
EventEmitter
Directive Life Cycle
Lab : TaskManager: Using Multiple Components
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
What are Attribute Directives?
Built-in Attribute Directives
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
What are Structural Directives?
Built-in Structural Directives
Templates
Custom Structural Directives
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
Terminology
Dependency Injection Basics
Services
Providers
Factories
Injection Tokens
Lab : Creating a Task Service
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
Lessons
Using a Pipe
Built-in Pipes
Custom Pipes
Pure versus Impure
Lab : Temperature Pipe
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
What's in a Form
Responding to Changes
FormBuilder
Data Validation
Lab : Task Editor Form
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 feeback

Module 11: Talking to the Server
Sending and Receiving Data
HTTPClient Module
HTTP Interceptors
Observables versus Promises
Lab : Working with Observables
Lab : Talking to the Server
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
What is a SPA
Router Module
Route Configuration
Parent-Child Navigation
Route Guards
Lab : Building a SPA: Rabbit Rescue
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

Virtual Courses

ALL of our courses can be delivered virtually. And our Bath public schedule of courses are now available as live virtual sessions, using the popular Zoom Virtual Classroom and remote labs. Delegates can test their access at: www.zoom.us/test

On-Site Courses

Can't attend one of our public classes? Booking for multiple people?

All our courses are available on your site! Delivered for your staff, at your premises.

Contact us to find out more...