Angular5 POC
============
RxJs Observable with service
tamplate binding, Event binding,
Material desing imple
routing - route params
github link :
https://github.com/gnganpath/Angular-6videos-thatJsdude
video:1 -> Installation and requirement software - Local dev environment
----------
Download node js , download and install VS code follow the agular cli version
npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve -> no need of npm install is required here.
ng serve --host 0.0.0.0 --port 4201
video:2 -> component, tempalte binding, Event Handler
----------
bangularbangk$ ng g c circular
inside app.hml - template binding
bind the circular template using <app-circular>
app-circular.html
(click)="changeTextEventHandler()"
app.component.ts
public changeTxt = "initial text";
ngOnInit(){
this.changeTxt = "update text in OnInt";
}
changeTextEventHandler(){
this.changeTxt = "Event handler in child component";
}
video:3 -> Service, Observable, RxJS
----------
bangularbangk$ ng g service github/github
RxJs/Observale ->
app.module.ts
import { HttpClientModule } from '@angular/common/http';
...
imports: [
BrowserModule,
HttpClientModule
],
github.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map'
@Injectable()
export class GithubService {
constructor(private http: HttpClient) { }
getUser(searchText): Observable<any>{ // rxjs - observable call for API
const url= 'http://api.github.com/search/users?q='+searchText;
return this.http.get(url).map(
res => {
const data = res;
console.log(data)
return data;
}
)
}
}
search.html
<input type="text" (keyup)="onKeyup($event)">
<button (click)="getUsers()">Search</button>
<p>{{ searchCount }}</p>
<ol *ngIf="searchResult">
<li *ngFor="let user of searchResult.items">{{ user.login }}</li>
</ol>
search.component.ts
import { Component, OnInit } from '@angular/core';
import {GithubService} from '../github/github.service';
searchText;
searchResult;
searchCount;
....
....
constructor(private githubService:GithubService) { }
onKeyup(event){
this.searchText = event.target.value;
}
getUsers(){
console.log(this.searchText)
this.githubService.getUser(this.searchText).subscribe(
res =>{
// console.log(res)
this.searchResult = res;
this.searchCount = res.total_count;
}
)};
Video:4 -> Angular2 Material Design
bangularbangk$ npm install --save @angular/material @angular/cdk
app.module.ts
import { MatCardModule } from '@angular/material/card';
....
imports: [
BrowserModule,
HttpClientModule,
MatCardModule
],
search.html
<div *ngIf="searchResult">
<mat-card class="example-card" *ngFor="let user of searchResult.items">
<mat-card-header>
{{ user.login }}
</mat-card-header>
<img class="profile-image" mat-card-image [src]="user.avatar_url" alt="Photo of a Shiba Inu">
<mat-card-content>
content
</mat-card-content>
</mat-card>
</div>
Video:5 -> Routing, multiple routing, pass a route parameter, load data based on routing
--------
contnents
------------
<base href>
Router imports
Configuration
Router outlet
Router link
Router state
Summary
need to use base-href
index.html
<base href="/">
create appRoutes.ts
import { Routes } from '@angular/router';
import { CircularComponent } from './circular/circular.component';
import { SearchComponent } from './search/search.component';
export const appRoutes: Routes = [
{ path:'circular', component:CircularComponent },
{ path:'search', component:SearchComponent}
]
routeParams implementation in appRoutes.ts
import { Routes } from '@angular/router';
import { CircularComponent } from './circular/circular.component';
import { SearchComponent } from './search/search.component';
import { UserComponent } from './user/user.component';
export const appRoutes: Routes = [
{ path:'circular', component:CircularComponent },
{ path:'search', component:SearchComponent},
{ path:'user/:userId', component:UserComponent}
]
app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
.....
import: [
RouterModule.forRoot(appRoutes),
BrowserModule,
HttpClientModule
]
app.html
<router-outlet></router-outlet> <!-- to implement router in our applicaiton -->
goto localhost:4200/search
find one result and click
search.html
<button mat-button (click)="showUserDetails(user)">{{ user.login }} </button>
search.component.ts
import { Router } from '@angular/router';
showUserDetails(user){
this.router.navigate(['user', user.login]);
}
github.service.ts
.....
getUserDetails(userId):Observable<any>{
const url = 'https://api.github.com/users/'+userId;
return this.http.get(url).map(
res =>{
const user = res;
return user;
}
)
}
user.component.ts
import { ActivatedRoute } from '@angular/router';
....
private userDetail;
constructor( private activatedRouter:ActivatedRoute, private githubService: GithubService) { }
ngOnInit() {
const userId = this.activatedRouter.snapshot.params['userId'];
console.log(userId)
this.githubService.getUserDetails(userId).subscribe(
res =>{
this.userDetail = res;
console.log(this.userDetail)
}
)
}
user.html
<h1>User Details page</h1>
<div *ngIf="userDetail">
<h4>{{userDetail.name}}</h4>
<p>email : {{userDetail.email}}</p>
<small>followers: {{userDetail.followers}}</small>
</div>
Video:6 -> pipes, Debug angular 2, build for proeduction
----------
simple default pipes
<h4>{{userDetail.name | uppercase}}</h4>
<p>email : {{userDetail.email}}</p>
<small>followers: {{userDetail.followers}}</small>
<p>created at:{{userDetail.created_at | date }}</p>
For Debugging:
Install chrome Augury plugin
angular tree, state of the compoent, compoennt dependencies
Ref: ThatJsdude
