<\/p>\n
Updated July 4, 2026.<\/strong> Refreshed for Angular 21 and current SEO best practices.<\/p>\n<\/div>\n<\/p>\n\nTable of Contents<\/h2>\nFollow the Angular tutorial series in order:<\/p>\n\nLesson 1: Angular Tutorial \u2014 Introduction (2026)<\/a><\/li>\nLesson 2: Angular CLI Setup \u2014 Create Your First App (Angular 21+)<\/a><\/li>\nLesson 3: Angular Components and Templates \u2014 Build Your First UI<\/a><\/li>\nLesson 4: Angular Routing \u2014 Navigate Between Pages (Angular 21+)<\/a><\/li>\nLesson 5: Angular Services and Dependency Injection (Angular 21+)<\/strong><\/li>\nLesson 6: Angular HTTP Client \u2014 Fetch Data from APIs (Angular 21+)<\/a><\/li>\nLesson 7: Angular Forms \u2014 Reactive Forms and Signal Forms Preview (Angular 21+)<\/a><\/li>\n\u2190 Back to Angular Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/p>\n\nAngular 21 Notes<\/h4>\nUse @Injectable({ providedIn: 'root' })<\/code> and inject()<\/code> in standalone components \u2014 the modern replacement for constructor injection boilerplate.<\/p>\n<\/div>\nThis lesson explains Angular services<\/strong> and dependency injection (DI)<\/strong> \u2014 how to share logic, API clients, and state across components without prop drilling. Angular’s DI container is a core reason the framework scales in enterprise codebases.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
<\/p>\n\nTable of Contents<\/h2>\nFollow the Angular tutorial series in order:<\/p>\n\nLesson 1: Angular Tutorial \u2014 Introduction (2026)<\/a><\/li>\nLesson 2: Angular CLI Setup \u2014 Create Your First App (Angular 21+)<\/a><\/li>\nLesson 3: Angular Components and Templates \u2014 Build Your First UI<\/a><\/li>\nLesson 4: Angular Routing \u2014 Navigate Between Pages (Angular 21+)<\/a><\/li>\nLesson 5: Angular Services and Dependency Injection (Angular 21+)<\/strong><\/li>\nLesson 6: Angular HTTP Client \u2014 Fetch Data from APIs (Angular 21+)<\/a><\/li>\nLesson 7: Angular Forms \u2014 Reactive Forms and Signal Forms Preview (Angular 21+)<\/a><\/li>\n\u2190 Back to Angular Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/p>\n\nAngular 21 Notes<\/h4>\nUse @Injectable({ providedIn: 'root' })<\/code> and inject()<\/code> in standalone components \u2014 the modern replacement for constructor injection boilerplate.<\/p>\n<\/div>\nThis lesson explains Angular services<\/strong> and dependency injection (DI)<\/strong> \u2014 how to share logic, API clients, and state across components without prop drilling. Angular’s DI container is a core reason the framework scales in enterprise codebases.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
Follow the Angular tutorial series in order:<\/p>\n
Use @Injectable({ providedIn: 'root' })<\/code> and inject()<\/code> in standalone components \u2014 the modern replacement for constructor injection boilerplate.<\/p>\n<\/div>\nThis lesson explains Angular services<\/strong> and dependency injection (DI)<\/strong> \u2014 how to share logic, API clients, and state across components without prop drilling. Angular’s DI container is a core reason the framework scales in enterprise codebases.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
@Injectable({ providedIn: 'root' })<\/code> and inject()<\/code> in standalone components \u2014 the modern replacement for constructor injection boilerplate.<\/p>\n<\/div>\nThis lesson explains Angular services<\/strong> and dependency injection (DI)<\/strong> \u2014 how to share logic, API clients, and state across components without prop drilling. Angular’s DI container is a core reason the framework scales in enterprise codebases.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
inject()<\/code> in standalone components \u2014 the modern replacement for constructor injection boilerplate.<\/p>\n<\/div>\nThis lesson explains Angular services<\/strong> and dependency injection (DI)<\/strong> \u2014 how to share logic, API clients, and state across components without prop drilling. Angular’s DI container is a core reason the framework scales in enterprise codebases.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
This lesson explains Angular services<\/strong> and dependency injection (DI)<\/strong> \u2014 how to share logic, API clients, and state across components without prop drilling. Angular’s DI container is a core reason the framework scales in enterprise codebases.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
Prerequisites:<\/strong> Lessons 1\u20134. Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n1. What Is a Service?<\/h4>\nA service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\nng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
A service is a TypeScript class responsible for a focused capability \u2014 fetching users, wrapping localStorage, or encapsulating business rules. Components stay thin; services hold reusable logic.<\/p>\n
ng generate service services\/greeting --skip-tests\n<\/code><\/pre>\nPhoto by Jakub \u017berdzicki<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. @Injectable and providedIn: ‘root’<\/h4>\nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
import { Injectable, signal } from '@angular\/core';\n\n@Injectable({ providedIn: 'root' })\nexport class GreetingService {\n private readonly messages = signal<string[]>([]);\n\n add(message: string) {\n this.messages.update((list) => [...list, message]);\n }\n\n all() {\n return this.messages.asReadonly();\n }\n}\n<\/code><\/pre>\nprovidedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
providedIn: 'root'<\/code> registers a singleton for the entire app \u2014 no NgModule providers array required.<\/p>\nPhoto by Chris Ried<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. Inject Services with inject()<\/h4>\nimport { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
import { Component, inject } from '@angular\/core';\nimport { GreetingService } from '..\/services\/greeting';\n\n@Component({\n selector: 'app-greeting-list',\n standalone: true,\n template: `\n <ul>\n @for (msg of service.all()(); track msg) {\n <li>{{ msg }}<\/li>\n }\n <\/ul>\n <button (click)=\"add()\">Add<\/button>\n `,\n})\nexport class GreetingList {\n protected readonly service = inject(GreetingService);\n\n add() {\n this.service.add('Hello from DI');\n }\n}\n<\/code><\/pre>\n4. Testing Services<\/h4>\nWith Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
With Vitest (Angular 21 default), configure TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
TestBed<\/code> or instantiate services directly when they have no Angular dependencies:<\/p>\nconst service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
const service = new GreetingService();\nservice.add('test');\nexpect(service.all()()).toContain('test');\n<\/code><\/pre>\n5. Next Steps<\/h4>\nContinue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
Continue to Lesson 6 \u2014 HTTP Client<\/a> to load data from REST APIs inside services.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
What is dependency injection in Angular?<\/strong>\nA pattern where Angular creates and supplies class dependencies automatically \u2014 you declare what you need via constructor or inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
inject()<\/code>.<\/p>\nWhen should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
When should I use a service vs a signal in a component?<\/strong>\nKeep UI-only state in the component. Move shared or API-backed logic into services.<\/p>\n\n
\n