Angular and Nest

The Perfect Match

Seiji Villafranca

Seiji Villafranca

github.com/SeijiV13

Senior Software Engineer, SmartBite Malaysia

Auth0 Ambassador

Community Lead, AngularPH,

seijivillafranca.com

Talks

Goals for Workshop

• Learn the basics and Fundamentals of Angular
• Connect to MongoDB in Nest
• Learn to Create API Endpoints in Nest
• Consume Data in our Created endpoints

Let's discuss

History of TypeScript

Superset Languages

A sample code here

Transpiler that provides JS the features of typing,

Object Oriented Programming

Catches Error and provides fixes before running code

Transpiler

Target: ES6/ES5

Browsers don't understand Typescript

Now on 4.3.5

Some Features

Types

Some Features

Union Types

 ability to combine one or two types

var val:string|number 
val = 12 
val = "This is a string" 

Some Features

Interfaces

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  

using Iperson Interface

Some Features

Classes

class Car { 
   //field 
   engine:string; 
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
   //function 
   disp():void { 
      console.log("Engine is  :   "+this.engine) 
   } 
}

Some Features

Objects

var object_name = { 
   key1: “value1”, 
   key2: “value”,  
   key3: function() {
      //functions 
   }, 
   key4:[“content1”, “content2”]  
};

Community

https://www.typescriptlang.org/community

Famous Frameworks /Libraries

Angular

Front End Framework

Single Page Application

Typescript Based

Component Based

Angular

Module

Component

Service

Collection of Components, Services, Directives, and also Modules

Can be imported into multiple Modules

A piece of code that defines the view with custom behaviors

Cannot be imported into multiple modules

Lets think of this one as a customized HTML Element with customized attributes

Used to communicate with endpoints

Used by components by dependency injection

Can also be injected by services

Building blocks

Side Menu

Can be seen on most of all pages

Can be a component that can be reused in different pages

Boilerplate code reduction

Flow

Prerequisites

npm install –g @angular/cli

https://nodejs.org/en/

Check npm verision

 Check npm verision

npm -v

ng --version

Good to go?

Install Angular CLI

Install Node JS

Back End Node Framework

Typescript Based

Shares many concepts with Angular that's why its called the perfect match

Title Text

Flow

Prerequisites

npm install –g @nest/cli

https://nodejs.org/en/

Check npm verision

 Check npm verision

npm -v

nest --version

Good to go?

Install Nest CLI

Install Node JS

Let's Walk the Talk

Other things to learn

https://docs.nestjs.com/

• Pipes
• Guards
• Interceptors
• Authentication
• GraphQL
• Microservices

https://www.seijivillafranca.com/post/integrating-jwt-with-nest-js-and-mongo

• Rxjs
• State Management
• Dynamic Forms
• Resolvers
• Content projection

https://angular.io/

https://www.seijivillafranca.com/blog

Hey I'm a Mentor!

github.com/SeijiV13

seijivillafranca.com

fb.com/seiji.villafranca

https://www.facebook.com/groups/1133816916630570

AngularPH

https://www.facebook.com/Angular-PH-113942453649977

Group

Facebook Page