Utilidades

 @    @          @    @    @        @                @                
 @    @    @          @             @                @                
 @    @   @@@    @    @    @    @@@@@     @@@    @@@@@    @@@      @@ 
 @    @    @     @    @    @   @@   @       @   @@   @   @   @     @  
 @    @    @     @    @    @   @    @     @@@   @    @   @@@@@     @  
 @    @    @     @    @    @   @    @    @  @   @    @   @          @@
 @@  @@    @     @    @    @   @@  @@    @  @   @@  @@   @@          @
  @@@@     @@    @    @    @    @@@@@    @@@@    @@@@@    @@@@     @@@

//CONFIGURACIÓN BÁSICA DEL app.routes.ts
import { Routes, RouterModule } from '@angular/router';
import { PersonasComponent } from './components/personas/personas.component';
import { CrearPersonaComponent } from './components/crear-persona/crear-persona.component';
import { ModuleWithProviders } from '@angular/core';

export const ROUTES: Routes = [

    { path: 'listarPersonas', component: PersonasComponent},
    { path: 'listaPersonas/:mensaje', component: PersonasComponent},
    { path: 'crearPersona', component: CrearPersonaComponent},
    { path: 'crearPersona/:idPersona', component: CrearPersonaComponent},
    { path: '', pathMatch: 'full', redirectTo: 'home'},
    { path: '**', pathMatch: 'full', redirectTo: 'home'}
]
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(ROUTES);

//(Y ESTE ARCHIVO SE AGREGA EN EL app.module.ts)
import { RouterModule } from '@angular/router';

 imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot( ROUTES, { useHash: true })
  ],
//---------------------------------------------------------------


//ELEMENTOS DEL NAVBAR
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="home">Home</a>
//---------------------------------------------------------------

//TRABAJAR CON JSONs REMOTOS
//SE IMPORTA EN EL app.module.ts
import { HttpClientModule } from '@angular/common/http';

imports: [
    HttpClientModule
  ],

//Y EN EL COMPONENTE QUE SE VA A INYECTAR: home.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styles: []
})
export class HomeComponent implements OnInit {

  paises: any [] = [];

  constructor( private http: HttpClient ) {

    this.http.get('https://restcountries.eu/rest/v2/lang/es')
    .subscribe( (resp: any) => {
      this.paises = resp;
    });
   }

  ngOnInit() {
  }
}

//Y EN LA VISTA: home.component.html
<ul>
  <li *ngFor="let pais of paises">
    {{ pais.name }} - {{ pais.population | number }}
  </li>
</ul>

//---------------------------------------------------------------

//FORMA AUTOMÁTICA DE IMPORTAR SERVICIOS, SIN AGREGARLOS AL app.module.ts
//(Dentro del elemento.service.ts)

@Injectable({
  providedIn: 'root'
})


//---------------------//
//--COMO CREAR J-SONs--//
//---------------------//
https://www.json-generator.com/

//PARTES
id: '{{integer(20, 900000000)}}',
nombre: '{{firstName()}} {{surname()}}',
apellido: '{{surname()}}',
email: '{{email()}}',
ip: '{{integer(30, 255)}}.{{integer(30, 255)}}.{{integer(30, 255)}}.{{integer(30, 255)}}',

//LISTO
[
  '{{repeat(5, 100)}}',
  {
    id: '{{integer(20, 900000000)}}',
    nombre: '{{firstName()}} {{surname()}}',
    apellido: '{{surname()}}',
    email: '{{email()}}',
    ip: '{{integer(30, 255)}}.{{integer(30, 255)}}.{{integer(30, 255)}}.{{integer(30, 255)}}'
  }
]

//LISTO
[
  '{{repeat(5, 50)}}',
  {
    id: '{{integer(20, 900000000)}}',
    name: '{{firstName()}} {{surname()}}',
    lastname: '{{surname()}}',
    company: '{{company().toUpperCase()}}',
    email: '{{email()}}',
    age: '{{integer(20, 40)}}',
    ip: '{{integer(30, 255)}}.{{integer(30, 255)}}.{{integer(30, 255)}}.{{integer(30, 255)}}'
  }
]