FAQ Angular

08/03/20 danny

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.0.5

# 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é nom-du-projet avec choix manuel des options
ng new nom-du-projet

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

Routing

#  Création du routing
ng generate module app-routing --flat --module=app

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>

Comment créer un service avec Angular CLI

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.

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');
    }
  }