Angular Training Course

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

Pre-requisites

Our Intro To Programming level is required for entry into this course

Who will benefit

  • Programmers who want to learn on of the leading JavaScript-based frameworks of today
  • Developers who found that JavaScript alone is inadequate to develop a rich, fully-fledged front-end. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features Angular, going in-depth.
  • Certification

    Attendance : If you have attended 80% of the sessions and completed all the class work, you qualify for the Attendance Certificate. Competency : If you have also completed all the practical projects as described the Outcomes section, you qualify for the Competency Certificate.

    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

    What do I need?

    Live Online Training : 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 brining your own laptop. Please see the calendar below for the schedule

    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