Santosh Yadav
Google Developer Expert for Angular GitHub Start and Nx Champion, 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
