Xulla Angular

Instal·lar

sudo npm install -g @angular/cli [--force]
ng new my-app
cd my-app 
ng serve -o

CLI

• Component: ng g component my-new-component
• Directive: ng g directive my-new-directive
• Pipe: ng g pipe my-new-pipe
• Service: ng g service my-new-service
• Class: ng g class my-new-class
• Interface: ng g interface my-new-interface
• Enum: ng g enum my-new-enum
• Module: ng g module my-new-module
• Guard: ng g guard my-new-guard
• Afegir biblioteques: ng add @angular/material
• Actualitzar: ng update --all
• Compilar: ng build [--prod]
• Crear projecte: ng new angular-projecte

Rutes

Fitxer: app-routing.module.ts

Etiqueta: <router-outlet>

Rutes amb #: imports: [RouterModule.forRoot(routes, { useHash: true })],

Exemple:

const routes: Routes = [
   {path: 'home', component: HomeComponent},
   {path: 'planets', canActivate: [AuthGuard], component: PlanetListComponent},
   {path: 'suns', canActivate: [AuthGuard], component: SunComponent},
   {path: 'planet/:id', canActivate: [AuthGuard], component: PlanetDetailComponent},
   {path: 'planet/edit/:id', canActivate: [AuthGuard],
   resolve: {planet: PlanetResolveService},
   component: PlanetEditComponent},
 
   {path: 'login', component: LoginComponent},
   {path: '**', pathMatch: 'full', redirectTo: 'home'}
 ];

Cridar a les rutes: <a class="nav-link active" aria-current="page" [routerLink]="['home']" [routerLinkActive]="['active']">Home</a>

Cridar a les rutes per codi:

import { Router } from '@angular/router';
constructor( private router: Router ) {}
detailsProduct(id: number): void{   this.router.navigate(['/product', id]); }

Servicis HTTP

En app.module.ts, en imports: HttpClientModule i importat de: import { HttpClientModule } from '@angular/common/http';

Exemple bàsic:

constructor(private http: HttpClient) { }
getProducts(): Observable<Product[]>{
   return this.http.get<{products: Product[]}>(this.productURL).pipe(
     map(response => response.products)
     );
 }