Diferencia entre revisiones de «Xulla Angular»
Ir a la navegación
Ir a la búsqueda
Sin resumen de edición |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
== 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 == | == Rutes == | ||
Revisión del 11:17 23 feb 2022
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)
);
}