practica 1 [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= practica 1
== previa
  * <code bash>npm install jquery popper.js bootstrap</code>

== rutas
<sxh typescript; title: app.routes.ts>
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);
</sxh>

  * añadir a **app.modules.ts**
  * en **navbar.component.html**:<sxh 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></sxh>
    * uso de **routerLinkActive** para indicar la opción activa
    * uso de **[routerLink]** en lugar de **href**

== servicios
  * 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.
  * <code bash>ng g[enerate] s[ervice] services/peliculas --skipTests</code>
    * 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)

== modelos/interfaz
  * <code bash>ng g[enerate] i[nterface] models/pelicula</code>