Creating a service with CLI in Angular - Visual Walkthrough

Concept Flow - Creating a service with CLI

Open Terminal

↓

Run CLI Command

↓

Angular CLI Generates Service Files

↓

Service File Created

↓

Import Service in Component

↓

Use Service in Component Code

This flow shows how you open a terminal, run the Angular CLI command to create a service, then import and use it in your component.

Execution Sample

Angular

ng generate service data

// or shorthand
ng g s data

This command creates a new Angular service named 'data' with the CLI.

Execution Table

Step	Action	CLI Output	Resulting Files
1	Open terminal in Angular project folder	No output	No files created
2	Run 'ng generate service data'	CREATE src/app/data.service.ts CREATE src/app/data.service.spec.ts	data.service.ts, data.service.spec.ts created
3	Check data.service.ts content	Contains @Injectable decorator and class DataService	Service ready to use
4	Import DataService in a component	No CLI output	Component updated with import statement
5	Inject DataService in component constructor	No CLI output	Service instance available in component
6	Use service methods in component	No CLI output	Component can call service functions
7	Exit	Process complete	Service fully integrated

💡 Service files created and ready to be used in components

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	Final
data.service.ts	Not present	Created by CLI	Imported in component	Injected in constructor	Used in component methods
Component	No service import	No change	Import added	Constructor updated	Calls service methods

Key Moments - 3 Insights

Why do we run 'ng generate service data' in the terminal?

Running this CLI command automatically creates the service files with correct structure and boilerplate, as shown in execution_table step 2.

What does the CLI create when generating a service?

The CLI creates a TypeScript service file and a test file, as seen in execution_table step 2, ensuring you have both code and tests ready.

How do we make the service usable inside a component?

By importing the service file and injecting it in the component constructor, as shown in execution_table steps 4 and 5.

Visual Quiz - 3 Questions

Look at the execution table, what files are created after running the CLI command?

A app.module.ts and main.ts

B data.component.ts and data.component.html

C data.service.ts and data.service.spec.ts

D index.html and styles.css

💡 Hint

Check execution_table row 2 under 'Resulting Files'

At which step is the service imported into a component?

A Step 4

B Step 2

C Step 6

D Step 1

💡 Hint

Look at execution_table row 4 under 'Action'

If you skip injecting the service in the constructor, what happens?

A The CLI will create the service again

B The service methods cannot be used in the component

C The component will automatically find the service

D The service file will be deleted

💡 Hint

Refer to variable_tracker for 'Component' variable after Step 5

Concept Snapshot

Angular CLI service creation:
- Run 'ng generate service name' in terminal
- CLI creates service and test files
- Import service in component
- Inject service in constructor
- Use service methods in component code

Full Transcript

To create a service in Angular using the CLI, open your terminal in the Angular project folder. Run the command 'ng generate service data' or 'ng g s data' for short. The CLI creates two files: data.service.ts and data.service.spec.ts. The service file contains a class decorated with @Injectable, ready to provide functionality. Next, import this service into your component by adding an import statement. Then inject the service in the component's constructor to make it available. Finally, you can call the service's methods inside your component. This process automates service creation and integration, saving time and avoiding errors.

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