FAQ Angular

24/04/20 danny

Angular

Liste des dernières version Angular

Liste des dernières version Angular CLI


Comment installer Angular CLI

# Installation d'angular-cli dernière version disponible
npm install -g @angular/cli

# Installation d'angular-cli version spécifique
npm install -g @angular/cli@9.1.1

# Test de version installée
ng --version

# Désinstallation d'angular-cli
npm uninstall -g @angular/cli

Comment créer sa première application

# Générer un projet appelé angular-starter avec choix manuel des options
ng new angular-starter

# Générer un projet appelé angular-starter avec options par défaut
ng new angular-starter --defaults

# Générer un projet appelé angular-starter avec options par défaut et routing
ng new angular-starter --defaults --routing

Comment déployer une application

Deux types de compilation

  • localement
    commande ng build
    Utilise environment.ts
     
  • production
    commande ng build --prod
    Utilise environment.prod.ts
# compilation du projet en mode local
ng build
npm run build

# compilation du projet en mode production
ng build --prod

# Installation du serveur de développement lightweight 
npm install -g lite-server

# Exécution
lite-server --baseDir="dist/angular-starter"

Comment gérer le routing

#  Création du module dédié au routing
ng generate module app-routing --flat --module=app
src/app/app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent, },
  { path: 'contact', component: ContactComponent },
  { path: 'about', component: AboutComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

Server side rendering et Angular Universal

# Générer un projet appelé angular-starter avec options par défaut et routing
ng new angular-starter --defaults --routing

# Ajout d'angular universal avec Angular CLI
ng add @nguniversal/express-engine

Comment créer un component Angular

# Création d'un composant movie dans app méthode 1
ng generate component movie

# Création d'un composant movie dans app méthode 2
ng g c movie

# Création du répertoire modules dans app
# Création d'un composant movie dans le répertoire app/modules
ng g c modules/movie
src/app/movie/movie.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
src/app/app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    MovieComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
src/app/app.component.html
<app-movie></app-movie>

Component avec Template

@Component({
  selector: 'app-example-component',
  template: `
    <h1>My First Angular Component</h1>
    `,
})

Comment créer un module

# Création d'un module home dans app , création d'un répertoire home
ng generate module home

# Création d'un module contact dans le répertoire app/modules
ng generate module modules/contact

Comment créer un service avec Angular CLI

# Création du service item dans le répertoire modules
ng generate service modules/item
// Création via Angular CLI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ItemService {

  constructor() { }
}


// Création manuelle du service MoviesService
export class MoviesService {

    getMovies() {
        return [
            'Alien',
            'Gladiator'
        ];
    }
}

Quelles sont les types de directives ?

Il y a 3 types de directives dans Angular

  • Components
    Ce sont des directives avec un template.
  • Structural directives
    Elles changent la structure de la vue.
  • Attribute directives
    hange the appearance or behavior of an element, component, or another directive.

Création d'une classe

On crée un service en utilisant Angular CLI et la commande ng generate service

# Création d'une classe song
ng generate class song

Comment utiliser ngFor

ngFor est une directive structurelle (structural directives)

example.ts
  movies = [
    'Alien',
    'Gladiator',
    'Braveheart',
    'Interstellar'
  ];
example.html
<!-- sans compteur -->
<ul>
  <li *ngFor="let movie of movies">{{ movie }}</li>
</ul>

<!-- avec compteur -->
<ul>
  <li *ngFor="let movie of movies; let i=index">{{ movie }}</li>
</ul>

Comment utiliser isPlatformBrowser en SSR

/* Déclaration des librairies */
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

/* Injection */
  constructor(@Inject(PLATFORM_ID) private platformId: object) {

/* Utilisation conditionnelle */
    if (isPlatformBrowser(this.platformId)) {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = name;
      s.async = false;
      document.getElementsByTagName('head')[0].appendChild(s);
    }

Qu'est ce que le binding ?

La syntaxe qui permet d'utiliser le binding.

  • Interpolation {{   }}
  • Property binding [   ]
  • Attribute Binding [ attr.xxxx ]
  • Style binding [ style.xxxx ]
  • Event binding (   )
  • Event two-way binding [(   )]
     
<!-- Interpolation -->
{{ movie }}

<!-- Property binding -->
<h2 [textContent]="movie"></h2>

<!-- Style binding -->
<button type="button" class="btn btn-primary" [style.background-color]="'blue'">
  Primary
</button>

<!-- Attribute binding -->
<td [attr.colspan]="colspan">Sum: $180</td>

<!-- Event binding -->
<button (click)="onSave()" type="button" class="btn btn-primary">Save</button>

<!-- Event two-way binding -->
 <input [(ngModel)]="name" required>


Comment utiliser Event binding

<button (click)="onSave($event)" 
  (keyup)="onKeyup($event)" 
  type="button" class="btn btn-primary">
  Event button
</button>                              
  onSave(event: any) {
    console.log('0001:', event);
    console.log('0001:', event.clientX);
  }

  onKeyup(event: any) {
    console.log('0001:', event);
    if (event.keyCode === 13) {
      console.log('0003');
    }
  }

Erreurs

Liste des erreurs
 

  1. NullInjectorError: No provider for Router!
  2. Can't bind to 'ngClass' since it isn't a known property of 'button'
// Erreur 2
  imports: [
    CommonModule,
  ],

Delay sur un post

    return this.http.post<any>(url, body, httpOptions).pipe(
      timeout(2000),
      tap((itemData: any) => this.log(`added item w/ id=${9999}`)),
      catchError(this.handleError<any>('addItem'))
    );