Step-by-Step Guide: Application Using NestJs and Angular
NestJs is, in my opinion, a great solution for Angular developers (like me) to start coding in a NodeJs environment as it is heavily based on Angular.
Join the DZone community and get the full member experience.Join For Free
NestJs is a framework for building Node.js server side applications and supports Typescript. Since almost all my experience is with Angular and NestJs provides an out-of-the box application architecture heavily inspired by Angular, it seemed like all the boxes were checked and I had to give it a try. For more information, please visit NestJs Official Documentation.
In this post, I will show you how to create a simple application with Angular frontend, NestJs backend, and Postgres database. To integrate with the database, Nest uses TypeORM and we will need to specify Postgres when installing TypeORM.
I will create a demo application that will manage the user budget. The user can create, update, view, and delete expenses and incomes. For each expense, there will be an expense category. I will set up first the expense category for this article.
Server-Side Application With NestJs
The first step is to set up and create the application using the following commands:
npm i -g @nestjs/cli
nest new budget-be
npm install — save @nestjs/typeoprm typeorm postgres
At this point, we are ready to start working with the server-side application. When creating the server-side application by default, it is created App Module, App Controller, and App Service.
Connecting to the Database
I have created the budget management database in Postgres. In App Module, we will need to set up the connection to the database by specifying it inside TypeOrmModule in the import.
Inside the TypeOrmModule import, I have specified the host, username, database name, and password according to my definitions. At this point, we are ready to start implementing the Expense Category Module.
Set Up Expense Category Module
Here, will show you steps to create Expense Category Module that will be responsible for all the requests coming to
expense-category from the front end.
1. Expense Category Dto
First, I will create the Expense Category DTO (Data Transfer Object), which determines how the data will be sent over the network. We will use it inside the controller later. For this example, it will be a very simple object containing only an
id and a
category. The implementation is done as follows:
2. Expense Category Entity
The Entity class marked with the
@Entity decorator corresponds to an entity in the database. The expense category entity will be:
In order to use the Entity, we should specify it inside the
3. Expense Category Controller
Controllers are responsible for receiving requests and return a response to the client. It is the routing mechanism that decides which controller should handle the incoming request. My application will display a list of expense categories that the user can update, delete, or create a new one. So, I will need to manage in my Controller all these types of requests. Here is the Controller I implemented:
4. Expense Category Repository
TypeORM supports the Repository design pattern. For this reason, the Expense Category Entity will have its own repository. To implement a custom repository, we need to extend Repository from typeorm. It is marked with the @EntityRepository decorator. The implementation is as below. I have implemented this just to try it, but even the default repository is fine for this case.
5. Expense Category Service
Dependency Injection works the same as in Angular. I will define a service using the
@Injectable decorator and will declare it under Providers in the Expense Category Module. Here, I will implement all the methods to create, get, find, update, and delete what I have used inside the Controller.
6. Expense Category Module
At this point, we have set up the expense category entity, controller, service, repository, and dto. We will include this in the Expense Category Module which later will be imported in the App Module and we can consider the server-side implementation finished.
Front End Application With Angular
After setting up the server-side application, I will create a new Angular application that will connect to NestJs Application to display and modify expense categories. I will not get in deep details regarding the Angular implementation, but rather give you a general implementation.
ng new budget-fe
ng g c expense-category
...we will create the budget management application and the expense category component. In order to connect to the server side, I will configure
proxy.conf.json as below:
Implementing CRUD in Angular for Expense Category
First, I will implement the service that will handle all the requests as below.
After implementing the service, we will update the
expense-category-component to get the data and add some actions to the UI such as create, modify, and delete.
The template for this example will be a list of items displaying the id and name of the category.
Component definition will be:
In the component, I am injecting the service in order to get, update, and delete expense categories. As I mentioned before, the front-end is a simple implementation just to see that the applications are connecting with each other and I have correctly implemented the server side.
NestJs is, in my opinion, a great solution for Angular developers (like me) to start coding in a NodeJs environment as it is heavily based on Angular. Creating a simple application, both server side and front-end was easy and quite interesting for me. I will continue to work and experiment in NestJs and will give you more updates. I would highly recommend giving it a try because as they say, “The proof of the pudding is in the eating”
Opinions expressed by DZone contributors are their own.