Routing & HTTP

May 2017, Nejc Zdovc

workshop #10

AGENDA

Routing

Http

Routing

Base href
Basic configuration
Router module
Router outlet
Router links
Redirects
Router params
Guards

BASE HREF

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

index.html (on root)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/project/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

index.html (with a folder inside)

Basic configuration

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent }          from './app.component';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.module.ts

Router module

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent }          from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.module.ts

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent }
];

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

app-routing.module.ts

Router LINKS / outlet

import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'my-app',
  template: `
    <h1>Angular Router</h1>
    <nav>
      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
      <a routerLink="/heroes" routerLinkActive="active big">Heroes</a>
    </nav>
    <button (click)="goHome()">Say hi</button>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {

    constructor(private router: Router) {}

    goHome() {
        this.router.navigate(['/hi']);
    }
}

app.component.ts

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';
import { HiComponent }     from './hi.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: 'hi',            component: HiComponent }
];

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

app-routing.module.ts

REdirects

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';
import { HiComponent }           from './hi.component';
import { PageNotFoundComponent } from './page-not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: 'hi',            component: HiComponent },
  { path: '',
    redirectTo: '/hi',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

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

app-routing.module.ts

router params

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'product-details',
  template: `
    <div>
      Current product id: {{id}}
    </div>
    <a (click)="goOnPrevious()">Previous product</a>
    <a [routerLink]="['/product-details', nextId]">Next product</a>
  `,
})
export class LoanDetailsPage implements OnInit, OnDestroy {
  id: number;
  nextId: number;
  prevId: number;
  private sub: any;

  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id'];
       this.nextId = this.id + 1;
       this.prevId = this.id - 1;
    });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
  goOnPrevious() {
    this.router.navigate(['/product-details', this.prevId]);
  }
}

app-routing.module.ts

GUARDS

import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';

@Injectable()
export class LoginRouteGuard implements CanActivate {

  constructor(private loginService: LoginService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import { HeroListComponent }     from './hero-list.component';
import { HiComponent }           from './hi.component';
import { LoginRouteGuard }       from './login-route.guard';

const appRoutes: Routes = [
  { path: 'heroes', component: HeroListComponent },
  { 
    path: 'hi',
    component: HiComponent,
    canActivate: [LoginRouteGuard]
  }
];

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

app-routing.module.ts

HTTP

Import

Request

Error handling

IMPORT

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.module.ts

REQUEST

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    result: any;
    constructor(private http: Http) {}

    search(term: string) {
       return this.http
          .get('https://api.spotify.com/v1/search?q=' + term + '&type=artist')
          .map(response => response.json())
          .subscribe((result) => {
              this.result = result.artists.items
          });
    }

    insert(term: string) {
       return this.http
          .post('https://api.spotify.com/v1/insert?q=' + term + '&type=artist')
          .map(response => response.json());
    }
}

app.component.ts

REQUEST - response

return this.http.get(`...`)
      .map(response => {
        return response.json().artists.items
      })
      .map(item => item.name);

Error handling

this.http.post(`/auth/login`, payload)
      .map(response => response.json())
      .subscribe(
        authData => this.storeToken(authData.id_token),
        (err) => console.error(err),
        () => console.log('Authentication Complete')
      );

this.http.get(`https://api.spotify.com/v1/dsds?q=${term}&type=artist`)
      .map(response => response.json())
      .catch(e => {
        if (e.status >==  500) {
          return cachedVersion();
        } else {
          return Observable.throw(
            new Error(`${ e.status } ${ e.statusText }`)
          );
        }
      });

THANK YOU

Denko Manceski

Slavko Žitnik

Rok Burgar