Servicios en Angular

Que son los servicios

Es el mecanismo que sirve para compartir funcionalidad entre componentes, es decir podemos acceder a métodos y propiedades a través de otros componentes en todo el proyecto.

Crear un servicio

Creamos un servicio utilizando el siguiente comando:

ng g service myservice

En el imports de app.module.ts:

·         Importamos el servicio

import { MyserviceService } from './myservice.service';

·         Y lo insertamos en el providers:

providers: [MyserviceService]

 

myservice.service.ts:

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root'

})

export class MyserviceService {

constructor() { }

}

Vamos a crear nuestra función de servicio en esta clase, aquí en el código vemos que el módulo inyectable se importa desde @ angular / core y además contiene el decorador de clase @Injectable.

Vamos a crear una función que devolverá un nombre:

myservice.service.ts:

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root'

})

export class MyserviceService {

  constructor() { }

 mostrarNombre() {

   const nombre = 'Juan';

   return nombre;

 }

}

En el archivo de servicio anterior, hemos creado una función mostrarNombre(), donde vamos a devolver el nombre creado.

 

app.component.ts:

import { Component, OnInit } from '@angular/core';

import { MyserviceService } from 'src/app/myservice.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

 titulo = 'Bienvenido a angular';

 nombre: string;

 constructor(private miServicio: MyserviceService) {

  }

 ngOnInit() {

  this.nombre = this.miServicio.mostrarNombre();

}

}

La función ngOnInit forma parte del ciclo de vida de Angular y es lanzado cuando se ha completado la creación del componente.

Inyectamos en el constructor el servicio creado, y obtenemos el nombre de la variable miServicio y hacemos una interpolación con la variable nombre al código HTML.

app.component.html:

<p> Mi nombre es: {{nombre}} </p>

Routing en Angular

Que son los routing

Como en Angular solo tenemos una página, un index.html y como generalmente tenemos un componente el selector del modulo principal el <app-root></app-root>, lo que vamos a hacer es intercambiar en el app.component.html los componentes que vallamos a visualizar en ese momento, para ello disponemos del sistema de routing que dispone de una serie de rutas virtuales previamente definidas en el app.module.ts.

Importamos el código del sistema de routing

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

RouterModule es el módulo que contiene el código del sistema de rutas.
Routes es una declaración que corresponde con un array de objetos tipo Route

 

Creamos cuatro componentes:

ng generate component componente1
ng generate component componente2
ng generate component componente3

Declaramos las siguientes rutas en app.module:

const rutas: Routes = [

  { path: 'componente1', component: componente1 },

  { path: 'componente2', component: componente2 },

  { path: 'componente3', component: componente3 },  

  // Mediante el path: '**' le indico que ante cualquier ruta

  // no contemplada anteriormente se ejecute el comando redirectTo: 'not-found'

  /* { path: 'not-found', component: NotFoundComponent },

  { path: '**', redirectTo: 'not-found' } */

];

Ponemos en el imports de app.module.ts:

RouterModule.forRoot(rutas)

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { Componente1Component } from './componente1/componente1.component';

import { Componente2Component } from './componente2/componente2.component';

import { Componente3Component } from './componente3/componente3.component';

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

const rutas: Routes = [

  { path: 'componente1', component: Componente1Component },

  { path: 'componente2', component: Componente2Component },

  { path: 'componente3', component: Componente3Component },

  // Mediante el path: '**' le indico que ante cualquier ruta

  // no contemplada anteriormente se ejecute el comando redirectTo: 'not-found'

  /* { path: 'not-found', component: NotFoundComponent },

  { path: '**', redirectTo: 'not-found' } */

];

@NgModule({

  declarations: [

    AppComponent,

    Componente1Component,

    Componente2Component,

    Componente3Component,

  ],

  imports: [

    BrowserModule, FormsModule,

    RouterModule.forRoot(rutas)

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.html:

<nav>

    <a routerLink="/">Home</a> |

    <a routerLink="/componente1"><p class="p">Componente1</p></a>    

    <a routerLink="/componente2"><p class="p">Componente2</p></a>    

    <a routerLink="/componente3"><p class="p">Componente3</p></a>       

</nav>

<router-outlet></router-outlet>