Course Code: angular13
Duration: 35 hours
Prerequisites:

Audience

  • Anyone who has just completed the HTML, CSS, and JavaScript and want to extent their skills in JavaScript
  • Anyone who is willing to build their own JavaScript based project
  • Anyone who wants to learn angular
Overview:

Angular 13 (latest release) is the one of the most streamlined and previously planned upgrades for a broadly accepted TypeScript-based web framework.

Angular 13 comes with all its newly added features and core updates.

  • Support for TypeScript 4.4
  • Enhancements to Angular Tests
  • 100% Ivy and No More Support for View Engine
  • Angular CLI Enhancements
  • Changes to the Angular Package Format(APF)
  •  RxJS v7.4
  • Component API Updates
Course Outline:

Introduction

  • Module 1: Introducing Angular
    • What is Angular?
    • Central Features of the Angular Framework
    • Appropriate Use Cases
    • Building Blocks of an Angular Application
    • Basic Architecture of an Angular Application
    • Installing and Using Angular
    • Anatomy of an Angular Application
    • Running the Application
  • Module 2: Introduction to TypeScript
    • TypeScript Syntax
    • Programming Editors
    • The Type System – Defining Variables
    • The Type System – Defining Arrays
    • Type in Functions
  • Module 3: Components
    • What is a Component?
    • An Example Component
    • Creating a Component Using Angular CLI
    • The Component Class
    • The @Component Decorator
    • Registering a Component to Its Module
    • Component Template
  •  Module 4: Component Templates
    • Templates
    • Template Location
    • The Mustache {{ }} Syntax
    • Setting DOM Element Properties
    • Event Binding
    • Expression Event Handler
  •  Module 5: Inter Component Communication
    • Communication Basics
    • The Data Flow Architecture
    • Preparing the Child to Receive Data
    • Send Data from Parent
  •  Module 6: Template Driven Forms
    • Template Driven Forms
    • Importing Forms Module
    • Basic Approach
    • Setting Up a Form
  • Module 7: Reactive Forms
    • Reactive Forms Overview
    • The Building Blocks
    • Import ReactiveFormsModule
    • Construct a Form
    • Design the Template
  • Module 8: Services and Dependency Injection
    • What is a Service?
    • Creating a Basic Service
    • The Service Class
    • What is Dependency Injection?
    • Injecting a Service Instance
    • Injectors
  • Module 9: Pipes and Data Formatting
    • What are Pipes?
    • Built-In Pipes
    • Using Pipes in HTML Template
    • Chaining Pipes
  •  Module 10: HTTP Client
    • The Angular HTTP Client
    • Using The HTTP Client - Overview
    • Importing HttpClientModule
    • Simple Example
  •  Module 11: The Angular Component Router
    • The Component Router
    • View Navigation
    • The Angular Router API
    • Creating a Router Enabled Application
    • Hosting the Routed Components
  • Module 12: Advanced HTTP Client
    • Request Options
    • Returning an HttpResponse Object
    • Setting Request Headers
    • Creating New Observables
    • Creating a Simple Observable
  •  Module 13: Unit Testing Angular Applications
    • Unit Testing Angular Artifacts
    • Testing Tools
    • Typical Testing Steps