Angular Training Course

Learn the fundamentals of Angular, and how to apply your Angular knowledge

Duration

  • 5 Days

What do I need?

  • Webinar : A laptop, and a stable internet connection. The recommended minimum speed is around 10 Mbps.
  • Classroom Training : A laptop, please notify us if you are not bringing your own laptop. Please see the calendar below for the schedule

Certification

  • Attendance : If you have attended 80% of the sessions and completed all the class work, you qualify for the Attendance Certificate. (Course Price : R12 500)
  • Competency : If you have also enrolled for the additional competency projects, you qualify for the Competency Certificate. (Course Price : R15 000)

Alignment

.

Pre-requisites

What you will learn

  • Know the fundamentals of the Angular JavaScript-based framework
  • Know how well-known single page-applications are designed and represented by components, in this case Angular Components
  • Know how Angular Components exchange information amongs another on a page
  • Know how Angular Pages share information with another
  • Utilise Component life-cycle Hooks in Angular
  • Consume a RESTful API with a Angular application
  • Develop a standalone Angular app utilising a Firebase database

DAY 1

Introduction

  • What is Angular?
  • Overview of Angular Apps
    • Modules
    • Components
    • Services
    • Directives
  • Setting Up
    • Installing Node
    • Installing TypeScript
    • Installing Typings
    • Installing Angular CLI
    • TypeScript Editor
    • Chrome Browser
  • Creating a New Project with Angular CLI
    • Project File Review
  • Editing Our First Angular Component

Creating and Using Components

  • Creating Our First Component
  • Using Our Created Component
    • app.module.ts
  • Component Templates
    • Displaying a line with *ngFor
  • Services
  • Dependency Injection
    • providers

Bindings

  • Property Binding
  • CSS Class Binding
  • Binding to User Input Events
  • Example Application

Day Two

Working with Components

  • Input Properties
  • Styles
  • Example Application

Conditional Rendering, Pipes and Ng-Content

  • ngIf
    • ngIfElse
  • ngSwitch
  • Pipes
  • Custom Pipes
  • ng-content
    • Multiple Insertion Points

Template Driven Forms

  • Create the User Model Class
  • Revising app.module.ts
  • Creating an initial HTML Form Template
  • Using *ngFor to Display Options
  • Two-way data binding with ngModel
    • Show and Hide Validation Error messages
  • Showing Specific Validation Errors
  • Submit the form with ngSubmit
  • Getting Submitted Values

Day Three

<

Model Driven Forms

  • Building a Basic Login Form
  • Creating Controls Explicitly
    • Implementing Validation
    • Submitting the Form
    • app.component.ts
    • Using Formbuilder
    • Implementing Custom Validation
    • login.component.ts
    • login.component.html
    • Validating Upon Form Submit
    • login.component.html

    Introduction To Observables

    • Obervables
    • Creating an Observable from DOM events
    • Observable Operators
      • filter operator
      • debounceTime Operator
      • distinctUntilChanged Operator

    Getting Data From RESTful APIs with Observables

    • GitHubRESTful API
    • Getting Data
    • Dependency Injection
    • ngOnInit
    • Showing a Loader Icon
    • Implementing a GitHub Results Display page

Day Four

Routing

  • Enabling Routing
  • Setting Up Our Routes
  • Router Outlet and Links
    • Router Outlet
    • Router Links
    • Adding a new Router Link
  • Route Parameters
    • Specifying Route Parameters
    • Retrieving Route Parameters
  • Imperative Navigation
  • Route Guards
    • RouteGuard CanActivate
    • RouteGuard CanDeactivate
    • app.routing.ts
    • AppModule

Structuring Large Apps With Modules

  • NgModule
  • Restructuring
  • Restructuring GitHubModule
  • Restructuring LoginModule
  • Restructuring AppModule
    • app.module.ts
  • Restructuring Routes
    • app.routing.ts
    • app.module.ts

Day Five

C.R.U.D. with Firebase

  • About Firebase
  • Using Firebase
  • Adding Firebase to our Angular App
    • app.module.ts
    • app.component.ts
  • Working with a Firebase Database
  • Displaying List of Users
  • Adding a user
  • AngularFirestore Add
    • dirty tracking
  • Retrieving a Single User and Deletion
  • Deleting a User

Own Project

Back to top