Angular Services in Angular

Angular Services is the fourth chapter of the free Angular tutorial. Real applications share data and logic across many screens: the signed-in user, the shopping cart, API calls and logging. Services hold that shared code, and dependency injection delivers it to the components that need it.

What each lesson covers:

• Services: What a service is and why apps use them, creating one with the CLI and @Injectable, storing shared state in signals, and injecting a service into a component with inject().
• Dependency Injection: How Angular finds and creates dependencies, providers such as useClass, useValue and useFactory, providedIn, the injector hierarchy, root-level and component-level providers, injection tokens, and the scope and lifetime of a service.

Every practice block runs real Angular in your browser, in TypeScript or JavaScript. Click the buttons in the output to see services share data and injectors create new instances. The exercises check what your page displays after you change the code, so any correct answer passes.

Lessons in this section

1. Services

   What services are, why apps use them, creating a service with @Injectable, storing shared state, and injecting a service into components.

2. Dependency Injection

   How Angular dependency injection works: tokens, providers, providedIn, the injector hierarchy, root and component-level providers, injection tokens, scope and lifetime.