The Angular Masterclass

Description

In this course, you will learn :

• About the Angular architecture and how components and modules are used to construct sections of your application.
• About routing and navigation, dependency injection, and observables in the second section.
• You will gain hands-on experience managing the state of your app, as well as testing and troubleshooting.
• You'll have a fantastic new application for your portfolio as well as a better understanding of how to design an Angular application from the ground up.

Syllabus :

1. Introduction to Angular

• What Is Angular?
• Examples of Projects Built with Angular
• Angular's History
• Why Use Angular?
• Course Project: The Client Contacts Manager Application

 

2. Angular Architecture

• Overview of Angular
• The Folder Structure of an Angular App
• The Architecture of an Angular App
• Modules
• Components
• Services
• Why Use TypeScript?
• The Architecture of Our Client Contacts Manager Application

 

3. Getting Started with the Angular CLI

• How a CLI Helps Angular Developers?
• Creating and Running the Client Contacts Manager Application
• Commands of the Angular CLI
• Add Angular Material to Angular Project
• Run Unit Tests Using Angular CLI
• Using the CLI to Package an Application for Production
• CLI Prompts
• Schematics and CLI Builders
• Angular Elements

 

4. Components, Templates, and Forms

• Components, Templates, and Forms in Angular
• History of Components
• Why Do We Have Components Now?
• The Structure of a Component
• The Component Life Cycle Hooks
• Interpolation and One-way Data Binding
• Passing Data Between Parent/Child Components
• Passing Data Between Unrelated Components
• Component Templates and Styling Components
• Which Template Approach Is the Best?
• Categories of Components
• Create Component and Update Routing of Application
• Create Template-driven Search Form for Application
• Create Reactive Add Client Form for Application
• When to Use Reactive and Template Forms

 

5. NgModules

• NgModules
• What are Modules in Angular?
• Categories of Metadata Used by @NgModule Decorator
• The Sections of the NgModule File
• How to Create Modules Using the CLI
• Creating Modules for Our Client Contact Manager Application
• Adding Our Client Components to the ClientModule
• Create CustomMaterialModule for Application
• Adding Angular Material Modules to Application

 

6. Routing and Navigation

• Routing and Navigation
• What Are Routes?
• The Routes Array
• The Router Outlet Component
• Wildcard Routes
• The redirectTo Route
• Creating Our Navigation Component
• Adding Navigation Menu in Toolbar of Application
• Create About Section of Application
• Route Parameters
• Route Guards
• Implementing a Route Guard

 

7. Dependency Injection, Services, and HttpClient

• Dependency Injection, Services, and HttpClient
• What Is Dependency Injection?
• How Does Angular Handle Dependency Injection?
• The Hierarchy of Injectors
• Benefits of Three Levels of Injectors
• Providers in Angular
• Services in Angular
• A Look at the Services Angular Provides
• The HttpClient Service
• Features of the HttpClient API
• Advanced Features of HttpClient Service
• Creating Services for Client Contacts Manager Application

 

8. Observables and RxJS

• Observables and RxJS
• Terminologies Related to RxJS
• The Observable Object
• Subscribing and Unsubscribing from Observables
• Error Handling in Observables
• Hot and Cold Observables
• What Is RxJS?
• Observer Design Pattern
• RxJS Operators
• Creational Operators
• Conditional Operators
• Combination Operators
• Error Handling Operators
• Transformation Operators
• RxJS Subjects
• How Angular Uses RxJS
• What is AsyncPipe?
• Creating Reactive Forms for Client Contacts Manager Application

 

9. State Management and NgRx

• State Management and NgRx
• Defining State Management
• Methods for Implementing State Management
• The Redux Library
• Exploring NgRx
• Example of an Action
• Example of a Reducer
• Example of the Store
• Registering the State
• Example of Selectors
• Effects

 

10. Testing Angular Applications

• Testing Angular Applications
• Testing and Test Driven Development
• Jasmine in Action
• Setup and Teardown of Tests
• The Karma Test Runner
• Taking a Test Driven Development Approach
• Karma Settings in Angular
• Running Tests Using the Angular CLI
• Writing Tests in Angular
• The TestBed Class
• Examples of Tests

 

11. Packaging Our Application

• Ready for Production
• Building a Release Version with the CLI
• The Environment Files
• The angular.json File
• Ahead-of-time Compilation
• Other Various Production Optimisations
• Making Use of Lazy Loading
• Application Size Budget
• Measuring Performance

Show more