Tech Seeker

The main objectives of this article are: Create HTTP GET endpoint  in nestjs application Consume GET API and render the response in angular component Create HTTP Get Endpoint In NestJS Application: In 'SuperHeroesService' implement logic to fetch the data from the MongoDB NestJS_App/src/super-heroes/super-heroes.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { SuperHeroes, SuperHeroesDocument } from './schema/super-heroes.schema'; @Injectable() export class SuperHeroesService { constructor( @InjectModel(SuperHeroes.name) private superHeroModel: Model<SuperHeroesDocument>, ) {} async getAll():Promise<SuperHeroes[]>{ return await this.superHeroModel.find().exec(); } } (12-14) The 'find()' method fetches all documents from the MongoDB collection. Let's create the 'SuperHereosController' in the '

The main objectives of this article are: MongoDB MongoDB Atlas Cloud Service MongoDB ConnectionString Install Mongo Libraries In NestJS App Create A 'SuperHeroes' Module In NestJS App Create A Service Like 'SuperHeroesService' In NestJS App MongoDB: MongoDB is a document-oriented database, which is classified as a NoSQL database. In MongoDB, tables are called collections, and records are called documents. It stores data in BSON format. The BSON is binary serialization of JSON. The reading of data from MongoDB is faster when compared to the Relational Database. But MongoDB doesn't have a relation between the collections. We can't declare NoSQL is better than SQL or vice-versa. So depending on the application requirement either select NoSQL or SQL or Both databases. MongoDB Atlas Cloud Service: For our demo of using MongoDB let's use the MongoDB Atlas cloud service. (Step 1)So let's go to the MongoDB Atlas website and then signup for 'Free'(pricin

The main objectives of this article are: Angular Creating An Angular 14 Application Install Bootstrap Package Add The Bootstrap Menu Angular: Angular is a component-based application. The angular component comprises 3 files like Typescript File(*.ts), HTML File(*.html), CSS File(*.css). Components typescript file and HTML file support 2-way binding which means data transfer takes is bi-directional. Component typescript file listens for all HTML elements events from the HTML file. Create An Angular(v14) Application: To create angular applications, first, we must have Angular CLI in our local machine. Run the following command to install the Angular CLI npm install -g @angular/cli Run the following command to create the angular application ng new name-of-your-project While creating an app to add routing say 'yes'. Select 'CSS' style sheets as default Let's get familiar with default files in our angular project :- package.json -  contains commands like build,

The main objectives of this article are: NestJS And Angular Application Communication NestJS Create A NestJS Application Debug NestJS Application From Visual Studio Code Editor NestJS And Angular Application Communication: User request the Angular application(single page application) then js files are downloaded and then runs the application on the browser. Since Angular is a single-page application it depends on API for data to display. So Angular requests the NestJS endpoint through HTTP requests. NestJS API that runs at the server gives the JSON response. NestJS API communicates with the database for fetching and storing the data. NestJS: NestJS is a framework used to develop the server-side application. NestJS is built on top of the Node.js framework just like Express. It is the combination of Progressive Javascript, Object-Oriented Programming, Functional Programming, and Functional Reactive Programming. NestJS application built with 'Models' and 'Controllers' to

The main objectives of this article are: Create HTTP delete endpoint in API Project. React application to invoke the delete API. Create HTTP Delete Endpoint In API Project: Let's create an HTTP delete endpoint in the API project. API_Project/Controllers/SuperVillainController.cs: [HttpDelete] [Route("{id:int}")] public async Task<IActionResult> Delete(int id) { var villainToDelete = await _reactJSDemoContext.SuperVillain.FindAsync(id); if (villainToDelete == null) { return NotFound(); } _reactJSDemoContext.SuperVillain.Remove(villainToDelete); await _reactJSDemoContext.SaveChangesAsync(); return Ok(); } (Line: 1) The 'HttpDelete' attribute allows us action method can be consumed for only HTTP delete requests. (Line: 2) The 'Route' attribute defined where we need to pass the integer 'id' value. (Line: 5) Based on the 'id' value trying to fetch the record from the database. (Line: 6-9) Checking whether a record exists in the

The main objectives of this article are: Create Get By Id Endpoint In API Project. Creating Update Endpoint In API Project. Creating A React Component To Show Update Form Create Get By Id Endpoint In API Project: To update any record, we first need to fetch it by its 'id'. So let's create a get id by an endpoint in our API project. API_Project/Controllers/SuperVillainController.cs: [HttpGet] [Route("{id:int}")] public async Task<IActionResult> Get(int id) { var villainById = await _reactJSDemoContext .SuperVillain.Where(_ => _.Id == id) .FirstOrDefaultAsync(); return Ok(villainById); } (Line: 2)Since it is a second HTTP Get Action method, so we have to explicitly specify the route. The route expression '{id:int}' represent 'id' value must be integer value. (Line: 5-7) Fetching the record by 'id' from the database. Create Update Endpoint In API Project: Let's create the HTTP PUT action method. API_Project/Controllers/Supe

The main objectives of this article are: Create HTTP Post endpoint in API Project. Create React JS component with a form to add a new item Create Post Endpoint Action Method In API Project: Let's create an HTTP Post action method to save a new record into the database. API_Project/Controllers/SuperVillainController.cs: [HttpPost] public async Task<IActionResult> Post(SuperVillain newSuperVillain) { _reactJSDemoContext.SuperVillain.Add(newSuperVillain); await _reactJSDemoContext.SaveChangesAsync(); return Ok(newSuperVillain); } (Line: 1) The 'HttpPost' attribute makes our action method invoke only for HTTP Post requests. (Line: 2) Here our action method should receive the item to add as a payload input parameter. (Line: 4) Our new record data instance adding to the database context. (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database. Create 'AddSuperVillain' Component In React App: On the 'pages' folder