Angular Academy · Lesson

Services and Injectable

Create injectable services for shared logic.

Lesson 1 of 413 steps

Services and Injectable is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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 data

Singletons 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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Services and Injectable” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Services and Injectable”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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

← Back to Angular Academy