Cloning Our Demo Project

The Single Responsibility Principle

Creating an Angular Service

Injecting and Using Services

Why Are Angular Services Necessary-

Exploring Our Demo Project

Cross-component Communication with Services

Course Overview

The Need for Reactivity in Angular Services

Configuring Angular Projects to Work with APIs

Using Angular Signals for Reactivity

Calling APIs from an Angular Service

Using the Async Pipe

Using RxJS for Reactivity

What Is Dependency Injection-

Benefits of Dependency Injection

Example Implementations of Dependency Injection

Angular Dependency Injection

What Are Service Providers and Injectors-

Using Classes as Provider Tokens

Creating useFactory() Providers

How Providers Affect Instantiation

Using Providers to Create Multiple Service Instances

Supplying Provider Dependencies (deps)

Creating a Configurable Cart

Using the multi Property

Challenges with Providing Services Using Interfaces

Creating useValue() Providers

What Are Service Injectors-

How Angular's Hierarchical Injectors Work

Configuring Injectors

A Graphical Look at Injectors

Defining Component-level Providers

Resolution Modifiers- @Self(), @SkipSelf(), @Host() and @Optional()

Standalone Projects- Route-level Injectors and Providers

Standalone Projects- Application-wide Providers

app-routing.module

app.component.spec

app.component

app.module

app.routes

app.config

catalog.module

catalog.component.spec

product.model

catalog.component

products-data

products.service

search.component.spec

search.component

cart.service

site-header.component

site-header.component.spec

cart.component.spec

cart.component

product-details.component.spec

product-details.component

shared.module

products-service.interface

engineers

squad-catalog.component.spec

squad-catalog.component

squad-routing.module

squad.module

engineers.service

squad.routes

main