bhylu.com

Advertisements

Angular Services

A service holds behavior or data that should not belong to one template. Injection gives consumers an explicit dependency instead of making them construct or discover a shared object themselves.

How it works

The local catalog service returns a small fictional tool collection. Providing it at root makes one application-level instance available to consumers. That scope is suitable for this read-only fixture, but a large mutable service can become an accidental global store. Keep transport, validation and domain changes behind named methods rather than exposing every internal collection for callers to mutate.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

Example

src/app.ts

import { Component } from '@angular/core';
import { Injectable, inject } from '@angular/core';
@Injectable({ providedIn: 'root' })
class ToolCatalog {
  readonly names = ['Drill', 'Clamp'];
}
@Component({
  selector: 'bh-services',
  standalone: true,
  imports: [],
  template: `<p data-result>{{ catalog.names.join(', ') }}</p>`,
})
export class App {
  catalog = inject(ToolCatalog);
}

Expected result

Drill, Clamp

The component asks Angular for ToolCatalog and renders its current data. A service can be tested without mounting every screen that consumes it. This fixture does not connect to a database; the HTTP unit later introduces an actual local request boundary.

Advertisements