Providers and Scopes
Control where services live in the tree.
Providers and Scopes is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Providers and Scopes
A provider tells Angular how to create a dependency. The scope where you register it determines how many instances exist and who shares them.
Root Scope
providedIn: root registers a service in the root injector: one shared singleton for the entire app. This is the most common choice.
@Injectable({ providedIn: 'root' })
export class AppStore {}Component Providers
You can scope a service to a component by listing it in the component providers array. Each instance of that component gets its own instance of the service.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Why Component Scope
Use component-scoped providers when each component instance needs its own isolated state, such as a form state object or a per-widget store.
Root vs Component
Root: one instance shared everywhere. Component: one instance per component instance (and its children). Choose based on whether state should be shared or isolated.
The Injector Hierarchy
Angular injectors form a tree. When resolving a dependency, Angular looks in the component injector, then walks up to parents, and finally the root.
Child Components Inherit
A service provided on a component is also available to that component children, unless a child provides its own instance, which shadows the parent.
Application-Level Providers
You can also register providers at bootstrap in the providers array of bootstrapApplication, similar to root scope, often via provide* functions.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass and useValue
Providers can map a token to a class with useClass, to a fixed value with useValue, or to a factory with useFactory, enabling substitution and configuration.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Swapping Implementations
Because a provider maps a token to an implementation, you can swap implementations (for example a mock in tests) without changing the consumers.
Choosing a Scope
Default to root for shared singletons. Reach for component providers only when you need isolated, per-instance state.
Quick Check: Scopes
Per-instance state.
Recap: Providers and Scopes
You learned that providers describe how to create dependencies and that scope controls instancing: root for app-wide singletons, component providers for per-instance isolation. Angular resolves through an injector hierarchy, and useClass/useValue/useFactory let you swap implementations. Next: injection tokens.
Frequently asked questions
Is the “Providers and Scopes” lesson free?
Yes — the full text of “Providers and Scopes” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Providers and Scopes”?
Control where services live in the tree. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Providers and Scopes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Services and Injectable
- The inject Function
- Providers and Scopes
- Injection Tokens