The Angular Masterclass

Gain insights into Angular architecture, components, modules, routing, dependency injection, and observables. Delve into state management, testing, and troubleshooting to build a sales contacts app.

Intermediate

147 Lessons

20h

Certificate of Completion

Gain insights into Angular architecture, components, modules, routing, dependency injection, and observables. Delve into state management, testing, and troubleshooting to build a sales contacts app.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

3 Assessments

116 Playgrounds

20 Quizzes

This course includes

3 Assessments

116 Playgrounds

20 Quizzes

Course Overview

In this course, you will use Angular to build a fully-functional sales team contacts application. To start things off, you’ll learn about Angular architecture and how components and modules are used to build sections of your application. In the second section, you’ll dive into routing and navigation, dependency injection, and observables. In the last part of this course, you will get hands-on experience managing the state of your app as well as testing and troubleshooting. Throughout the course are three ...Show More

TAKEAWAY SKILLS

Typescript

Front End Development

Angular

What You'll Learn

The architecture of a typical Angular application and how components and modules are used to build sections of the app.

Explore Services, Dependency Injection, Observables and RxJs.

NgRx, which is a library for managing reactive state for Angular.

Testing and packaging an Angular application for production.

What You'll Learn

The architecture of a typical Angular application and how components and modules are used to build sections of the app.

Course Content

Getting Started

Get familiar with Angular fundamentals through hands-on learning with practical app development.

Who Should Take This Course and Why?

Introduction to Angular

Look at Angular's framework, history, project examples, and hands-on Client Contacts Manager app.

What Is Angular?

Examples of Projects Built with Angular Angular's History

Why Use Angular?

Course Project: The Client Contacts Manager Application Summary: Introduction to Angular Quiz: Introduction to Angular

Angular Architecture

Examine Angular's architecture, including modules, components, services, and TypeScript advantages.

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 Summary: Angular Architecture Quiz: Angular Architecture

Getting Started with the Angular CLI

Break down complex ideas about using Angular CLI to streamline development processes.

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 Schematics and CLI Builders CLI Prompts Angular Elements Summary: Getting Started with the Angular CLI Quiz: Getting Started with the Angular CLI

Components, Templates, and Forms

Explore Angular's core components, data binding, and the practical use of 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 Summary: Components, Templates, and Forms Quiz: Components, Templates, and Forms

NgModules

11 Lessons

See how it works: Structure Angular apps with NgModules for organized, scalable development.

Angular Assessment 1

Assessment

Routing and Navigation

14 Lessons

Master the steps to configure routing in Angular, enhancing navigation and user experience.

Dependency Injection, Services, and HttpClient

14 Lessons

Learn how to use dependency injection, services, and HttpClient for robust Angular applications.

Build a Card Memory Game in Angular

Project

Observables and RxJS

20 Lessons

Discover essential Observables and RxJS concepts for responsive and efficient Angular applications.

Angular Assessment 2

Assessment

Build a Weather App Using Angular and RxJS

Project

10.

State Management and NgRx

13 Lessons

Master the steps to effectively implement state management in Angular using NgRx techniques.

11.

Testing Angular Applications

13 Lessons

Build a foundation in testing Angular applications to ensure reliability and efficiency.

12.

Packaging Our Application

11 Lessons

Dig deeper into optimizing and packaging Angular applications for better performance and efficiency.

Angular Assessment 3

Assessment

13.

Conclusion

1 Lesson

Investigate Angular's structure, CLI, routing, state management, and production optimization in development.

14.

Appendix

4 Lessons

Piece together the parts of setting up Angular CLI, creating apps, and installing VSCode and NgRx.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!