How To Take This Class

Course Overview

In this hands-on Angular Training course, students will obtain the foundation to get up and running with the latest version of Angular. Students will begin by learning about TypeScript - the language used in Angular. Students will then move on to create their first app, use the built-in components of Angular and then begin creating their own components. Next, the course moves onto intermediate concepts like using forms, APIs, routing to different pages and using Dependency Injection to organize code. In addition, students will learn how to test and deploy their Angular applications. This course is up-to-date through Angular 8.

Course Prerequisites

Students should have a familiarity with basic application development concepts.

Course Audience

This course is designed for students who either have no previous experience with Angular or students who have some experience using a previous version of Angular and want to get up to speed on the latest version of Angular.

What You'll Learn

After successful completion of this course, students will be able to:
  • Use the TypeScript language
  • Use Built-in Directives
  • Create Forms in Angular
  • Understand and use HTTP and APIs
  • Understand and use Routing
  • Understand and use Dependency Injection
  • Create Advanced Components
  • Test an Angular application
  • Deploy an Angular application

Course Duration

3 Days

Course Outline

  1. Introduction to TypeScript
    • Installing TypeScript and RxJS
    • TypeScript Overview
  2. Creating a New Angular Project
    • Installing the Angular CLI
    • Creating a New Angular Project
    • Opening the New Angular Project
    • Reviewing the Default Angular Project Structure
  3. Running Your Project
    • Running Your Angular Project
    • Making Changes to Your Angular Project
  4. Using a CSS Framework
    • Installing a CSS Framework
    • Stopping and Restaring the Build and Web Server
    • Verify Styles are Working in Your Angular Application
  5. Your First Component
    • Creating a Feature Module
    • Creating a Component
  6. Creating Data Structures
    • Create a Model or Entity Object
    • Add Data
    • Displaying Data
  7. Passing Data into a Component
    • Creating a Presentation Component
    • Passing Data into the Presentation Component
  8. Looping Over Data
    • Using ngFor to Loop Over Data
    • Using Interpolation
    • Using Property Binding to Display Data
  9. Formatting Data for Display
    • Using Built-in Pipes to Format Data
    • Using the Built-in Currency Pipe
  10. More Reusable Components
    • Creating a Presentation Component for Each Project
    • Passing a Project into the Presentation Component
  11. Responding to an Event
    • Using Event Binding
    • Responding to User Events
  12. Create a Form to Edit Your Data
    • Creating a Form to Edit Data
    • Creating a Form Component
    • Rendering a Form Component
    • Styling a Form Component
  13. Communicating from Child to Parent Component
    • Creating Custom Events in the Child Component
    • Listening for Custom Events in the Parent Component
  14. Hiding and Showing Components
    • Using ngIf
    • Hide or Show a Component
  15. Preventing a Page Refresh
    • Subscribe to an Event Handler
    • Implement and Event Handler Method
  16. More Component Communication
    • Create a Custom Event in a Child Form Component
    • Listen for the Custom Event in a Parent Form Component
  17. Form Binding
    • Creating Reactive Binding
    • Testing Form Binding
  18. Saving Form Values
    • Using Events to Save Form Values
    • Testing Your Form
  19. Validating Form Values
    • Add Validation Functions to Controls
    • Display Validation Messages
    • Test Form Validation
  20. Refactoring Code
    • Refactoring the Form Validation Code
  21. Services & Dependency Injection
    • Create a Service
    • Inject a Service into a Component
  22. Setup Backend REST API
    • Install the Backend REST API Server
    • Create Custom npm Script to Run the json Server
    • Start the REST API Server
  23. HTTP GET
    • Load Data from the REST API
    • Inject the HTTPService and Make a Get Request
  24. HTTP Error Handling
    • Handle a HTTP Error
    • Translate HTTP Errors to User-friendly Errors
    • Display Error Messages
  25. HTTP PUT
    • Communicate with the REST API to Update Data
  26. Showing a Loading Indicator
    • Show a Loading Indicator During HTTP Requests
  27. Router Navigation
    • Create a Home Module and Route to it
    • Add a Navigation Menu
  28. Route Parameters
    • Use Parameters to Navigate Routes
  29. Custom Pipes
    • Create a Custom Pipe
    • Format Data using a Custom Pipe
  30. Build & Deploy
    • Build an Angular Application
    • Deploy an Angular Application to a Web Server

What Students Receive

Each student will receive:
  • A printed courseware manual with samples and hands-on exercises for use during and after class.
  • Sample course files and solutions.
  • A PC headset for communicating with your instructor and fellow students during the Angular training class.
  • A course completion certificate upon successful completion of the Angular training course.