practica 1

• npm install jquery popper.js bootstrap

import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { PeliculasComponent } from './components/peliculas/peliculas.component';

const APP_ROUTES: Routes = [
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'peliculas', component: PeliculasComponent }, 
    { path: '**', pathMatch: 'full', redirectTo: 'home' }
]; 

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

• añadir a app.modules.ts
• en navbar.component.html:

              <li class="nav-item" routerLinkActive="active"> <a class="nav-link" [routerLink]="['home']">Home</a> </li>
              <li class="nav-item" routerLinkActive="active"> <a class="nav-link" [routerLink]="['peliculas']">Películas</a> </li>
              <li class="nav-item" routerLinkActive="active"> <a class="nav-link" [routerLink]="['about']">About</a> </li>

  • uso de routerLinkActive para indicar la opción activa
  • uso de [routerLink] en lugar de href

• Ofrecer objeto Singleton y mediante Inyección de Dependencias.
• Brindar información a quien la necesite.
• Realizar peticiones CRUD (create, read, update, delete), normalmente a un backend que exponga un API Rest.
• Gestionar la persistencia de los datos.
• Servir como recurso reutilizable en la aplicación.

• ng g[enerate] s[ervice] services/peliculas --skipTests

  • genera el código correspondiente, con un decorador llamado @Injectable
• añadir en app.module.ts en la sección providers del decorador y hacer el import correspondiente
  • a partir de Angular 7 no es necesario, la directiva ProvidedIn del servicio ya lo hace (no fisicamente)

• ng g[enerate] i[nterface] models/pelicula