Getting Started With Angular

@SantoshYadavDev

TechTalksWithSantosh

GDE for Angular, GitHub Star, Co-founder TIL

Santosh Yadav

Angular is built keeping productivity in mind.

Prerequisite

Nodejs

VS Code or any editor of your choice

Typescript

Built-in modules for forms

Built-in module for Routing

Ability to build tools

Built-in support to creare PWA

Built-in support for SSR and prerendering

Built-in support for localization and i8n

Built-in support for Dependency Injection

And many more.....

Angular material component library

Getting Started

npm i @angular/cli -g //install Angular CLI

ng new <app-name> //create a new app

ng serve //serve the app on localhost

ng g // command to generate projects/libs/component /service etc

ng build --prod //create production build

ng deploy //deploy application to your cloud provider 
//(Azure, AWS, Firebase, Netlify, GitHub Pages etc)

CLI helps you from development to deployment

Template

Its just HTML

{{variableName}} // string interpolation

<div [innerText]="variableName"></div>
// Property Binding

<button (click)="function()">Click</button>
// Event Binding

Dependency Injection

DI out of the box



export class ProductComponent {
  // inject a class
  constructor(private service: ProductService) { }
}


// creating a token
export const BROWSER_STORAGE =
  new InjectionToken<Storage>('Browser Storage', {
    providedIn: 'root',
    factory: () => localStorage
  });


export class BrowserStorageService {

  // injecting a token
  constructor(@Inject(BROWSER_STORAGE) public storage: Storage) { }

}

Handling API call

Using HTTP module

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // other imports ...
    HttpClientModule
  ],
})
export class AppModule { }

--------------------------------------------------------------

import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class EventsService {
  
  constructor(private http: HttpClient) { }

  getEvents() {
    return this.http.get<T[]>('api/events');
  }
}

Creating PWA

ng add @angular/pwa

Make your App PWA

Getting Started With Angular

@SantoshYadavDev

TechTalksWithSantosh

Thank You

Angular Material and CDK

Create your own components using CDK

Optimized and well tested for production use

UI library managed by Angular Team

// add Angular Material to your application
ng add @angular/material

Forms

Template Driven Forms

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    FormsModule
  ],
})
export class AppModule { }

Reactive Forms

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Creating Forms

<form [formGroup]="filterForm" (submit)="filterProduct()">
  <div>
    <input formControlName="minPrice" placeholder="Min Price">
  </div>
  <div>
    <input formControlName="maxPrice" placeholder="Min Price">
  </div>
  <button type="submit">
    Filter
  </button>
</form>

Routing

How to setup router


import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'event', component: EventComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<a [routerLink]="['home']">Home</a>
<a [routerLink]="['events']">Events</a>

<router-outlet></router-outlet>

What if we have a large App

Lazy Loading


import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'events',
    loadChildren: () => import('./events/events.module')
    			.then(m => m.EventsModule)
  },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }