Angular: Designing and Architecting Web Applications

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

Beginner

132 Lessons

20h

Certificate of Completion

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

132 Playgrounds

This course includes

132 Playgrounds

Course Overview

This course will teach you step-by-step how to design and architect large Angular applications. You’ll start with the basics: components, pipes, and directives. These are the building blocks of any Angular application, so you will get plenty of hands-on practice with this material. Next, you’ll ramp things up by stepping into modules, routing, and RXJS, where you’ll learn how to declaratively manage data and dive deep into observables. In the latter half of the course, you’ll cover reactive and template ...Show More

Course Content

First Steps

Get familiar with Angular development setup for JavaScript developers.

Introduction Setting Up

Our First Project

Get started with creating, binding, styling, and deploying your first Angular app.

Creating an App Reviewing the Files Event Binding Property Binding Interpolation Global CSS Structural Directives Deploying the App Quiz Completed Project

Component Basics

Examine the essentials of creating, understanding, and utilizing Angular components effectively.

Creating a New Project

Understanding Components Creating a Component Passing Data From Parent to Child Component The ngFor Directive Static Assets Scoped CSS Quiz Completed Project

Pipes

Find out about transforming and formatting data using Angular pipes, including custom implementations.

Pipes Overview

Pipe Basics Pipe Parameters Currency Pipe and Decimal Pipe JSON Pipe Custom Pipes Taking Things a Step Further Quiz Completed Project

Directives

Solve problems in Angular by mastering directives, creating modular and dynamic web applications.

Creating a New Project

The ngClass Directive Toggling Images The ng-container Element The ngSwitch Directive Creating a New Directive Binding Properties to Directives Creating a Structural Directive Quiz Completed Project

Modules

4 Lessons

Follow the process of creating, organizing, and efficiently using Angular modules to boost application structure and scalability.

Routing

10 Lessons

Master the steps to optimize Angular routing for efficient navigation and dynamic content insertion.

Advanced Components

7 Lessons

Step through advanced component techniques including modals, lifecycle hooks, and event management.

Services

10 Lessons

Unpack the core of creating an Angular project, using services, handling HTTP requests, and ensuring robust security.

10.

RxJS

12 Lessons

Examine RxJS essentials in Angular, including observables, operators, error handling, and generics.

11.

Reactive Forms

14 Lessons

Find out about creating and validating reactive forms in Angular applications.

12.

Template Forms

7 Lessons

Dig into Angular template forms for creating, managing, and validating form data efficiently.

13.

Custom Validators

13 Lessons

Tackle creating custom validators in Angular, from project setup to handling validation errors.

14.

Authentication

14 Lessons

Master the steps to implement and manage authentication in Angular using Firebase.

15.

Conclusion

1 Lesson

Get familiar with advancing your Angular skills and keeping up with updates.

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!