Decorator-based architecture in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a NestJS controller using the correct decorator.

NestJS

import { [1] } from '@nestjs/common';

@[1]('cats')
export class CatsController {
  // controller methods
}

Drag options to blanks, or click blank then click option'

AService

BInjectable

CModule

DController

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Injectable instead of @Controller

Confusing @Module with @Controller

The @Controller decorator defines a controller class in NestJS.

2fill in blank

medium

Complete the code to create a GET route handler in a NestJS controller.

NestJS

import { Controller, [1] } from '@nestjs/common';

@Controller('dogs')
export class DogsController {
  @[1]()
  findAll() {
    return 'This action returns all dogs';
  }
}

Drag options to blanks, or click blank then click option'

ADelete

BPost

CGet

DPut

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Post instead of @Get for a GET route

Forgetting to import the decorator

The @Get() decorator defines a handler for HTTP GET requests.

3fill in blank

hard

Fix the error in the service class by adding the correct decorator.

NestJS

import { [1] } from '@nestjs/common';

export class CatsService {
  getCats() {
    return ['cat1', 'cat2'];
  }
}

Drag options to blanks, or click blank then click option'

AInjectable

BController

CModule

DService

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Controller on a service class

Not adding any decorator to the service

The @Injectable decorator marks the class as a provider that can be injected.

4fill in blank

hard

Fill both blanks to define a NestJS module with a controller and a provider.

NestJS

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
  controllers: [[1]],
  providers: [[2]],
})
export class CatsModule {}

Drag options to blanks, or click blank then click option'

ACatsController

BCatsService

CDogsController

DDogsService

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing controllers and providers

Using unrelated classes in the arrays

The controllers array should include the controller class, and the providers array should include the service class.

5fill in blank

hard

Fill all three blanks to create a route handler that accepts a dynamic parameter and injects a service.

NestJS

import { Controller, Get, Param, [1] } from '@nestjs/common';
import { [3] } from '@nestjs/common';

@[3]()
export class CatsService {
  [2](id) {
    return 'Cat ' + id;
  }
}

@Controller('cats')
export class CatsController {
  constructor(@[1]() private readonly catsService: CatsService) {}

  @Get(':id')
  getCat(@Param('id') id: string) {
    return this.catsService.[2](id);
  }
}

Drag options to blanks, or click blank then click option'

AInjectable

BfindOne

CInject

DgetCats

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Injectable in the controller instead of the service

Calling a non-existent service method

Not importing the correct decorators

@Inject is used to inject dependencies manually, findOne is a typical service method to get one item, and @Injectable decorates the service class.

Practice

1. In NestJS, what is the main purpose of using decorators like @Controller() and @Injectable()?

easy

A. To replace the need for writing any class methods

B. To execute the class methods automatically on app start

C. To mark classes with specific roles and add metadata for NestJS to manage

D. To style the output of the application in the browser

Solution

1. Step 1: Understand decorator roles in NestJS

   Decorators like @Controller() and @Injectable() add metadata to classes, telling NestJS their purpose.

2. Step 2: Recognize how NestJS uses this metadata

   NestJS uses this metadata to organize and manage components like controllers and services during runtime.

3. Final Answer:

   To mark classes with specific roles and add metadata for NestJS to manage -> Option C

4. Quick Check:

   Decorators add metadata = C [OK]

Hint: Decorators label classes for NestJS to organize [OK]

Common Mistakes:

• Thinking decorators run methods automatically
• Confusing decorators with styling tools
• Believing decorators remove the need for methods

2. Which of the following is the correct way to define a controller class in NestJS using decorators?

easy

A. @Controller() class MyController { }

B. class MyController { }

C. function Controller() { } class MyController { }

D. @Injectable() class MyController { }

Solution

1. Step 1: Recall the syntax for controller decorators

   In NestJS, the @Controller() decorator is placed immediately before the class definition.

2. Step 2: Check each option for correct decorator usage

   @Controller() class MyController { } correctly shows @Controller() before the class. class MyController { } lacks any decorator. function Controller() { } class MyController { } incorrectly defines a function instead of using a decorator. @Injectable() class MyController { } uses @Injectable() which is for services, not controllers.

3. Final Answer:

   @Controller() class MyController { } -> Option A

4. Quick Check:

   Controller decorator before class = B [OK]

Hint: Controller classes need @Controller() decorator above class [OK]

Common Mistakes:

• Omitting the decorator entirely
• Using @Injectable() instead of @Controller()
• Trying to define decorators as functions

3. Given the following NestJS controller code, what will be the output when a GET request is made to '/hello'?

@Controller('hello')
export class HelloController {
  @Get()
  greet() {
    return 'Hello, NestJS!';
  }
}

medium

A. "Hello, NestJS!"

B. 404 Not Found error

C. An empty response

D. A runtime error due to missing decorator

Solution

1. Step 1: Analyze the route and method decorators

   The @Controller('hello') sets the base path to '/hello'. The @Get() decorator on greet() means this method handles GET requests to '/hello'.

2. Step 2: Understand the method return value

   The greet() method returns the string 'Hello, NestJS!'. So, a GET request to '/hello' returns this string as the response.

3. Final Answer:

   "Hello, NestJS!" -> Option A

4. Quick Check:

   GET /hello returns method string = A [OK]

Hint: Match @Controller path with @Get method for output [OK]

Common Mistakes:

• Assuming 404 because of missing route
• Expecting JSON instead of string
• Thinking decorators cause runtime errors here

4. Identify the error in the following NestJS service code:

@Injectable
export class UserService {
  getUser() {
    return { name: 'Alice' };
  }
}

medium

A. Return value must be a string, not an object

B. Missing parentheses in @Injectable decorator

C. Class name should be UserServices

D. Method getUser() should be async

Solution

1. Step 1: Check the decorator syntax

   The @Injectable decorator requires parentheses even if no arguments are passed, so it should be @Injectable().

2. Step 2: Verify other code parts

   The method getUser() can be synchronous and return an object. Class name and return type are valid as is.

3. Final Answer:

   Missing parentheses in @Injectable decorator -> Option B

4. Quick Check:

   @Injectable() needs parentheses = D [OK]

Hint: Always add () after @Injectable even if empty [OK]

Common Mistakes:

• Omitting parentheses on decorators
• Thinking methods must be async
• Changing class names unnecessarily

5. You want to create a NestJS controller that handles GET requests to '/users/:id' and returns the user ID from the URL. Which of the following code snippets correctly uses decorators to achieve this?

hard

A. @Controller('users')
export class UserController {
@Get(':id')
getUser(id: string) {
return `User ID is ${id}`;
}
}

B. @Controller('users')
export class UserController {
@Get()
getUser(@Body('id') id: string) {
return `User ID is ${id}`;
}
}

C. @Controller('users')
export class UserController {
@Post(':id')
getUser(@Param('id') id: string) {
return `User ID is ${id}`;
}
}

D. @Controller('users')
export class UserController {
@Get(':id')
getUser(@Param('id') id: string) {
return `User ID is ${id}`;
}
}

Solution

1. Step 1: Identify the correct HTTP method and route parameter usage

   The route is '/users/:id' and should respond to GET requests, so @Get(':id') is correct.

2. Step 2: Check parameter decorator usage

   The method parameter must use @Param('id') to extract the 'id' from the URL path.

   @Controller('users')
   export class UserController {
     @Get(':id')
     getUser(@Param('id') id: string) {
       return `User ID is ${id}`;
     }
   }

   does this correctly.

3. Step 3: Verify other options

   @Controller('users')
   export class UserController {
     @Get()
     getUser(@Body('id') id: string) {
       return `User ID is ${id}`;
     }
   }

   uses @Body('id') which reads from request body, not URL.

   @Controller('users')
   export class UserController {
     @Post(':id')
     getUser(@Param('id') id: string) {
       return `User ID is ${id}`;
     }
   }

   uses POST instead of GET.

   @Controller('users')
   export class UserController {
     @Get(':id')
     getUser(id: string) {
       return `User ID is ${id}`;
     }
   }

   misses the @Param decorator, so 'id' won't be injected.

4. Final Answer:

   The code snippet with @Get(':id') and @Param('id') -> Option D

5. Quick Check:

   GET + @Param('id') for URL param = A [OK]

Hint: Use @Get(':id') and @Param('id') to get URL parameters [OK]

Common Mistakes:

• Using @Body instead of @Param for URL params
• Using wrong HTTP method decorator
• Forgetting @Param decorator on method argument