development:angular:practica1

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Següent revisió		 Revisió prèvia
development:angular:practica1 [27/01/2020 11:38] – creat matedevelopment:angular:practica1 [27/01/2020 12:48] (actual) – mate
Línia 2: Línia 2:
 == previa == previa
   * <code bash>npm install jquery popper.js bootstrap</code>   * <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>
 +
  • development/angular/practica1.1580153915.txt.gz
  • Darrera modificació: 27/01/2020 11:38
  • per mate