Creating a service with CLI in Angular - Try It Yourself

Creating a service with CLI

📖 Scenario: You are building a simple Angular app that needs to fetch user data. To keep your code clean and organized, you want to create a service that handles this data fetching.

🎯 Goal: Create an Angular service using the Angular CLI. This service will be ready to use for fetching user data in your app.

📋 What You'll Learn

Use Angular CLI to generate a service named user

The service file should be named user.service.ts

The service should be provided in the root injector

The service class should be named UserService

💡 Why This Matters

🌍 Real World

Services in Angular help organize code that deals with data fetching, business logic, or shared state. Using the CLI to generate services speeds up development and ensures consistent structure.

💼 Career

Knowing how to create and use Angular services is essential for building scalable and maintainable Angular applications, a common requirement in frontend developer roles.

1

Generate the user service using Angular CLI

Open your terminal and run the Angular CLI command to generate a service named user. This will create the service files including user.service.ts.

Angular

# Run the Angular CLI command to generate the user service
# Your code here

Hint

Use ng generate service user or the shorthand ng g s user.

2

Check the generated service file for the class and decorator

Open the generated user.service.ts file and verify it contains the @Injectable decorator with providedIn: 'root' and a class named UserService.

Angular

/* Open user.service.ts and check for @Injectable and UserService class */
// Your code here

Hint

The service should have @Injectable({ providedIn: 'root' }) and a class named UserService.

3

Add a method to the service to simulate fetching user data

Inside the UserService class, add a method named getUser() that returns an object with id: 1 and name: 'Alice'.

Angular

ng generate service user

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor() { }

  // Add getUser() method here
  // Your code here
}

Hint

Define getUser() inside UserService that returns the user object.

4

Use the service in a component by injecting it

In your component's constructor, inject the UserService by adding a parameter named userService of type UserService. This prepares the component to use the service.

Angular

ng generate service user

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor() { }

  getUser() {
    return { id: 1, name: 'Alice' };
  }
}

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(userService: UserService) {
    // Your code here
  }
}

Hint

Inject UserService in the component constructor by adding userService: UserService as a parameter.

Practice

1. What is the main purpose of creating a service in Angular using the CLI?

easy

A. To generate routing modules

B. To share logic and data across multiple components

C. To style components with CSS

D. To create new components automatically

Solution

1. Step 1: Understand Angular services role

   Services in Angular are used to share logic and data between components, avoiding duplication.

2. Step 2: Recognize CLI service creation purpose

   The CLI command generates a service file with proper structure to be injected and reused.

3. Final Answer:

   To share logic and data across multiple components -> Option B

4. Quick Check:

   Services share logic/data = D [OK]

Hint: Services share data/logic, not create components [OK]

Common Mistakes:

• Confusing services with components
• Thinking services handle styling
• Assuming services generate routing

2. Which Angular CLI command correctly creates a new service named data?

easy

A. ng new service data

B. ng create service data

C. ng generate service data

D. ng make service data

Solution

1. Step 1: Recall Angular CLI syntax for services

   The correct command to generate a service is ng generate service [name].

2. Step 2: Match the command with options

   Only ng generate service data uses the correct ng generate service syntax.

3. Final Answer:

   ng generate service data -> Option C

4. Quick Check:

   Use ng generate service for services [OK]

Hint: Use 'ng generate service' to create services [OK]

Common Mistakes:

• Using 'ng create' instead of 'ng generate'
• Confusing 'ng new' for service creation
• Typing 'ng make' which is invalid

3. Given the command ng generate service user, what files are created by default?

medium

A. user.component.ts and user.component.html

B. user.service.js and user.service.test.js

C. user.module.ts and user-routing.module.ts

D. user.service.ts and user.service.spec.ts

Solution

1. Step 1: Understand CLI output for service generation

   The Angular CLI creates a TypeScript service file and a test spec file by default.

2. Step 2: Identify correct file extensions and names

   Files are named user.service.ts and user.service.spec.ts, matching user.service.ts and user.service.spec.ts.

3. Final Answer:

   user.service.ts and user.service.spec.ts -> Option D

4. Quick Check:

   Service + test files = B [OK]

Hint: Service files end with .service.ts and .service.spec.ts [OK]

Common Mistakes:

• Confusing service files with component files
• Expecting .js or .test.js extensions
• Thinking routing or module files are created

4. You ran ng generate service auth but got an error: Unknown command: 'generatee'. What is the likely cause?

medium

A. Typo in the command: 'generatee' instead of 'generate'

B. Service name 'auth' is invalid

C. Angular CLI is not installed

D. Missing --service flag

Solution

1. Step 1: Analyze the error message

   The error says 'Unknown command: generatee', indicating a typo in the command.

2. Step 2: Check command spelling

   The correct command is 'generate', not 'generatee'. This typo causes the error.

3. Final Answer:

   Typo in the command: 'generatee' instead of 'generate' -> Option A

4. Quick Check:

   Check spelling of CLI commands carefully [OK]

Hint: Check command spelling carefully for typos [OK]

Common Mistakes:

• Typing 'generatee' instead of 'generate'
• Assuming service name causes error
• Thinking CLI is missing when it is installed

5. You want to create a service named logger inside a folder shared/utils using Angular CLI. Which command is correct?

hard

A. ng generate service shared/utils/logger

B. ng generate service logger/shared/utils

C. ng generate service shared-utils-logger

D. ng generate service /shared/utils/logger

Solution

1. Step 1: Understand CLI path syntax for nested folders

   Angular CLI uses slash-separated paths to place files in nested folders.

2. Step 2: Identify correct command format

   ng generate service shared/utils/logger correctly uses shared/utils/logger to create the service in nested folders.

3. Final Answer:

   ng generate service shared/utils/logger -> Option A

4. Quick Check:

   Use slash paths for nested service folders [OK]

Hint: Use folder paths with slashes before service name [OK]

Common Mistakes:

• Reversing folder and service name order
• Using dashes instead of slashes for folders
• Starting path with a slash causing errors