Services and Injectable
Create injectable services for shared logic.
Services and Injectable is a free Angular Academy lesson on CoddyKit — lesson 1 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.
Services and Injectable
A service is a class that holds reusable logic or state, such as data fetching or a shared store. Angular creates and shares services through dependency injection.
Why Services
Components should focus on the view. Move business logic, API calls, and shared state into services so they can be reused and tested independently.
The Injectable Decorator
Mark a service class with @Injectable so Angular can create it and inject it where needed.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' registers the service with the application root injector. Angular creates a single shared instance (a singleton) for the whole app.
Tree-Shakable Providers
Because the provider is declared on the class with providedIn, unused services can be tree-shaken out of the bundle automatically.
A Service with State
Services often hold state. With signals, expose reactive state from the service.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}A Service with Methods
Add methods that components can call to perform actions or retrieve data.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Generating a Service
The CLI scaffolds a service with the Injectable decorator already added.
ng g service dataSingletons Share State
Because a root service is a singleton, every component that injects it sees the same instance and the same state. This is how components share data.
Services Can Inject Services
A service can depend on other services. For example a data service can use the HttpClient service to make requests.
Keep Services Focused
Give each service a single clear responsibility. Small, focused services are easier to test and reuse than large ones doing many things.
Quick Check: Injectable
Registering a singleton service.
Recap: Services
You learned that services hold reusable logic and state, are marked with @Injectable, and use providedIn: root to register an app-wide singleton. Services share state across components and can depend on other services. Next: the inject function.
Frequently asked questions
Is the “Services and Injectable” lesson free?
Yes — the full text of “Services and Injectable” 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 “Services and Injectable”?
Create injectable services for shared logic. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Services and Injectable” 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