Controller decorator in NestJS - Step-by-Step Execution

Concept Flow - Controller decorator

Define Controller Class

↓

Apply @Controller Decorator

↓

NestJS Registers Route Prefix

↓

Define Route Handlers inside Class

↓

Handle Incoming HTTP Requests

↓

Execute Handler Method

↓

Send Response to Client

The @Controller decorator marks a class as a controller, registering it with NestJS to handle HTTP requests for a specific route prefix.

Execution Sample

NestJS

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get()
  findAll() { return 'All cats'; }
}

Defines a controller for the 'cats' route that returns 'All cats' on GET requests.

Execution Table

Step	Action	Evaluation	Result
1	NestJS reads @Controller('cats') decorator	Registers 'cats' as route prefix	CatsController linked to '/cats' route
2	NestJS reads @Get() decorator on findAll()	Registers GET handler for '/cats'	GET requests to '/cats' call findAll()
3	Incoming HTTP GET request to '/cats'	Matches registered route and method	Calls findAll() method
4	findAll() executes	Returns string 'All cats'	Response body set to 'All cats'
5	Response sent to client	Client receives 'All cats'	Request cycle complete

💡 Request handled and response sent; no further action

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
routePrefix	undefined	'cats'	'cats'	'cats'
handlerMethod	undefined	findAll()	findAll()	findAll()
responseBody	undefined	undefined	'All cats'	'All cats'

Key Moments - 3 Insights

Why does the @Controller decorator take a string like 'cats'?

The string defines the route prefix for all handlers in the class, as shown in execution_table step 1 where 'cats' is registered as the route prefix.

How does NestJS know which method handles GET requests?

The @Get() decorator marks the method as a GET handler, registered in step 2 of the execution_table.

What happens if a request comes to a different route?

NestJS matches routes by prefix and method; if no match is found, the request is not handled by this controller, as implied by step 3 where only '/cats' GET requests call findAll().

Visual Quiz - 3 Questions

Look at the execution_table, what is the route prefix registered at step 1?

A 'GET'

B 'findAll'

C 'cats'

D '@Controller'

💡 Hint

Check the 'Evaluation' column in step 1 of the execution_table.

At which step does the findAll() method execute?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for the step where the method returns 'All cats' in the execution_table.

If the @Controller decorator was changed to @Controller('dogs'), what changes in the variable_tracker?

A handlerMethod changes to 'dogs'

B routePrefix changes to 'dogs'

C responseBody changes to 'dogs'

D No changes

💡 Hint

Refer to the 'routePrefix' variable in the variable_tracker.

Concept Snapshot

@Controller('route') decorator marks a class as a controller.
It sets the route prefix for all handlers inside.
Methods decorated with @Get(), @Post(), etc., handle HTTP requests.
NestJS uses these to route requests to the right method.
Handlers return responses sent back to clients.

Full Transcript

The Controller decorator in NestJS marks a class as a controller that handles HTTP requests. When you add @Controller('cats'), NestJS registers the class to handle routes starting with '/cats'. Inside the class, methods decorated with @Get(), @Post(), and others define handlers for specific HTTP methods. For example, @Get() on findAll() means GET requests to '/cats' call findAll(). When a request comes in, NestJS matches the route and method, calls the handler, and sends back the response. This flow helps organize your server code by grouping related routes and handlers in classes.

Practice

1. What is the main purpose of the @Controller decorator in NestJS?

easy

A. To define a service that handles business logic

B. To mark a class as a group of routes with a base path

C. To create a database connection

D. To style the HTML output of a component

Solution

1. Step 1: Understand the role of @Controller

   The @Controller decorator marks a class as a handler for HTTP requests grouped under a base path.

2. Step 2: Differentiate from other decorators

   It is not used for services, database, or styling but specifically for routing.

3. Final Answer:

   To mark a class as a group of routes with a base path -> Option B

4. Quick Check:

   @Controller = route group [OK]

Hint: Remember: @Controller groups routes under one path [OK]

Common Mistakes:

• Confusing @Controller with @Injectable
• Thinking it styles components
• Assuming it manages database connections

2. Which of the following is the correct syntax to define a controller with base path 'users' in NestJS?

easy

A. @Controller = 'users'
export class UsersController {}

B. @Controller.users
export class UsersController {}

C. @Controller('users')
export class UsersController {}

D. @Controller path='users'
export class UsersController {}

Solution

1. Step 1: Recall correct decorator syntax

   The @Controller decorator takes the base path as a string argument inside parentheses.

2. Step 2: Check each option's syntax

   Only @Controller('users') export class UsersController {} uses the correct syntax: @Controller('users'). Others misuse dot, equal sign, or invalid syntax.

3. Final Answer:

   @Controller('users') export class UsersController {} -> Option C

4. Quick Check:

   @Controller('path') syntax = @Controller('users') export class UsersController {} [OK]

Hint: Use parentheses with string path in @Controller [OK]

Common Mistakes:

• Using dot notation instead of parentheses
• Assigning with equal sign instead of decorator call
• Writing invalid decorator syntax

3. Given the following controller code, what is the full URL path to access the getAllUsers method?

@Controller('api')
export class UserController {
  @Get('users')
  getAllUsers() {
    return 'List of users';
  }
}

medium

A. /users

B. /users/api

C. /api/getAllUsers

D. /api/users

Solution

1. Step 1: Identify base path from @Controller

   The base path is 'api' from @Controller('api').

2. Step 2: Identify route path from @Get decorator

   The method route is 'users' from @Get('users').

3. Step 3: Combine base and method paths

   Full path is base + method = '/api/users'.

4. Final Answer:

   /api/users -> Option D

5. Quick Check:

   Base + method path = /api/users [OK]

Hint: Combine @Controller and @Get paths for full URL [OK]

Common Mistakes:

• Reversing base and method paths
• Using method name as URL path
• Ignoring base path in URL

4. Identify the error in this NestJS controller code:

@Controller('products')
export class ProductController {
  @Get()
  getAll() {
    return 'All products';
  }

  @Get('')
  getEmpty() {
    return 'Empty route';
  }
}

medium

A. Duplicate routes for the same path cause a conflict

B. Missing parentheses in @Get decorator

C. Controller path should be '/products' with a slash

D. Methods must return JSON objects, not strings

Solution

1. Step 1: Analyze route paths from @Get decorators

   Both methods respond to the same route: base 'products' + '' or no path means '/products'.

2. Step 2: Understand route conflict

   Having two methods for the same route causes a conflict and runtime error.

3. Final Answer:

   Duplicate routes for the same path cause a conflict -> Option A

4. Quick Check:

   Duplicate routes = conflict error [OK]

Hint: Avoid duplicate routes with same path in one controller [OK]

Common Mistakes:

• Focusing on @Get parentheses instead of duplicate routes
• Believing controller path needs leading slash
• Assuming string return type is invalid

5. You want to create a controller that handles routes for both '/admin' and '/user' paths using a single class. Which approach correctly uses the @Controller decorator to achieve this?

hard

A. Create two separate controllers, one for 'admin' and one for 'user'

B. @Controller(['admin', 'user'])
export class MultiPathController {}

C. @Controller('admin,user')
export class MultiPathController {}

D. @Controller('admin')
@Controller('user')
export class MultiPathController {}

Solution

1. Step 1: Understand @Controller supports single base path

   The @Controller decorator accepts a single string as the base path. It does not support multiple paths in an array.

2. Step 2: Evaluate options for multiple paths

   Create two separate controllers, one for 'admin' and one for 'user' is correct because creating two separate controllers is the proper way to handle multiple base paths. @Controller(['admin', 'user']) export class MultiPathController {} is invalid syntax. @Controller('admin,user') export class MultiPathController {} uses a comma-separated string which is treated as a single path. @Controller('admin') @Controller('user') export class MultiPathController {} uses multiple decorators which is invalid.

3. Final Answer:

   Create two separate controllers, one for 'admin' and one for 'user' -> Option A

4. Quick Check:

   One controller per base path [OK]

Hint: Use separate controllers for different base paths [OK]

Common Mistakes:

• Using array of strings in @Controller (not supported)
• Applying multiple @Controller decorators on one class
• Trying to combine multiple paths in one string