Angular and Nest

The Perfect Match

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

programming language which was developed by Microsoft. It is free, open source and superset of the JavaScript

October 2012

Anders Hejlsberg,

the lead architect of c#,

version 0.8

Absence of IDE support

Eclipse (plugin by Palantir)

Text Editor (Sublime etc.)

Tyepscript 0.9 supports Generics

Tyepscript 1.0

2013

2014

Superset Languages

Prototypes

Dynamic Types

TypeScript

Generics

Interfaces

ES6

Types

A sample code here

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, 
        public lastName: string) {
            this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

let user = new Student("Jane", "A", "Doe");

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

Any

Built-in types

User Defined Types

number, string, boolean, void, null, undefined

Arrays, Enums, Classes, Interfaces

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

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

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