Angular router

El siguiente post es continuación del resumen de Angular 2

Hay varias formas de hacer un router en angular, una de ellas es la siguiente utilizando:

Para el ejemplo partimos de :

  • Un componente cualqiera como puede ser login situdado en /login/login.component el cual exportamos:

    import { Component, NgZone } from '@angular/core';
    
    @Component({
        selector: 'my-login',
        templateUrl: 'login.component.html',
        styleUrls: ['login.component.scss'],
    
    })
    export class LoginComponent {
      constructor() {}
    }
    
  • Creamos un modulo app-routing app-routing.module.ts, el cual importa:

    • Los componentes que vamos a routear
    • NgModule
    • Routes y RouterModule
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { LoginComponent } from './login/login.component';
    

    En el modulo creamos un array de rutas del objeto Routes en el cual se indica el path y el componente a dicho path:

      export const routes: Routes = [
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent }
      ];
    

    En @NgModule se importan las rutas para el routerModule y se exportan una vez añadidas las rutas:

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

Por último exportamos AppRoutingModule y además todos los componentes los cuales serán incluidos en AppModule para ser declarados, de esta forma no tenemos que importar uno a uno en AppModule, si no todos los componentes añadidos en el array de AppRoutingModule.

export class AppRoutingModule {}
export const routedComponents = [ LoginComponent, RegisterComponent ];

En definitiva AppRoutingModule sería por ejemplo:

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

import { LoginComponent } from './login/login.component';

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],

})

export class AppRoutingModule {}

export const routedComponents = [ LoginComponent, RegisterComponent ];

Y en app.module se importa import { AppRoutingModule, routedComponents } from './app-routing.module'; para añadir a imports AppRoutingModule y declarar en declarations routedComponents.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthModule } from './shared/auth.module';


@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule, // Important add AppRoutingModule
        HttpModule
    ],
    declarations: [
        AppComponent,
        routedComponents // All components in AppRoutingModule
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

HTTP angular

El siguiente post es continuación del resumen de Angular 2

En lo posts anteriores:

Cargábamos los datos localmente desde fichero.

Con el servicio http de angular obtendremos los datos a través internet.

Con HTTP podemos hacer peticiones GET, POST, PUT, DELETE las cuales las podemos hacer de dos formas distintas:

  • Mediante observables, como por ejemplo el método login:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthService {
    private backendUrl = process.env.BACKEND_URI;


    constructor(private http: Http) { }


    login(credentials: Credentials) {
      // console.log('cre', credentials);
        this.http.post(this.backendUrl + '/login', credentials)
            .map((res) => res.json())
            .subscribe(
            // We're assuming the response will be an object
            // with the JWT on an id_token key
            (data) => localStorage.setItem('jwtToken', data.jwtToken),
            (error) => console.log(error)
            );
    }

Como se observa importamos la librería @angular/http y la instanciamos en el constructor.
Tambíen necesitamos importar rxjs/add/operator/map para map en el observable.

  • Con Promesas
getHeroes() {
   this.heroService.getHeroes()
                    .subscribe(
                      heroes => this.heroes = heroes,
                      error =>  this.errorMessage = <any>error);
 }

Se ha de tener en cuenta que en nuestro modulo tenemos que añadir http como provider en ambos casos.

Para más info Http client angular