Tech Seeker

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

In this article, we will implement authentication routing guards and also implement interceptors to invoke the refresh token API. Click here for part-1 angular jwt token authentication & refresh token . Route Guards: In our current sample, we have an issue with the navigation that is like after login user can access the login page which is not correct, and without login can access the 'fav-movies' page. So we can correct this issue by integrating the routing guards. Let's create a routing guard service like 'AuthGuard'. ng generate class shared/auth/auth-guard --skip-tests src/app/shared/auth/auth-guard.ts: import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree, } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(priv

In this article, we are going to implement JWT(JSON Web Token) authentication in the Angular(v14) application. We also understand how to use the Refresh Token when the JWT Access Token expires. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 informative parts: Header Payload Signature Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo. Command To Create Angular App ng new name_of_your_project Let's install the bootstrap package npm install bootstrap@5.2.0 Configure the bootstrap CSS and JS file reference in 'angular.json'. Now let's add the bootstrap menu in 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" routerLink="/">Jwt Auth Demo</a> </div> </nav

In this article, we will implement Angular(v14) CRUD to consume the GraphQL endpoint using the Apollo Angular(v3) library. GraphQL API: GraphQL API mostly has a single endpoint. So data fetching or updating will be carried out by that single endpoint. For posting data or querying data, we have to follow its own syntax. GraphQL carries two essential operations: Query - (Fetching Data) Mutation - (Saving Data) Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo.  Command To Create Angular Application ng new your_app_name Let's install the bootstrap into our application. npm install bootstrap Now configure the CSS and JS links of bootstrap in 'angular.json'. Let's add the bootstrap 'Navbar' component at 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <div class="navbar-brand&qu