Santosh Yadav
Google Developer Expert for Angular and Web Technologies, Open source contributor for Angular and NgRx, creator ng deploy for Netlify, NestJSAddons core team.
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/pwaMake 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 { }Getting Started With Angular
By Santosh Yadav
