Angular

14/12/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@10.0.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.
    Elles sont responsable du layout HTML
  • Attribute directives
    Elles modifient l'apparence ou le comportement d'un élément, d'un composant ou d'une autre directive.
    Apperance or Behavior of a DOM element
<p *ngIf="true">
  show paragraph if true
</p>

<div *ngFor="let item of items; let i=index;>
{{item.name}}
</div>

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>
<ul>
  <li *ngFor="let item of endpointsList; let i=index">
    {{ item.name }}
    <ul>
      <li *ngFor="let child of item.links; let j=index">
        {{ child.verb }} {{ child.name }}/{{ child.param }}
      </li>
    </ul>
  </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,
  ],

Message erreur de code

  • object access via string literals is disallowed (no-string-literal)
/* code avec erreur */
        if (params['id'] !== undefined) {
          this.getItem(params['id']);
        }

/* Code sans erreur */
        const key = 'id';
        if (params[key] !== undefined) {
          this.getItem(params[key]);
        }

Erreur sur tslint

  • expected call-signature: 'ngOnInit' to have a typedef

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

Random et Lowercase

Afficher un nombre aléatoire de 1 à 9

    let number = Math.floor(Math.random() * (9)) + 1;
    this.username =
      this.firstname.toLowerCase() + '_' +
      this.lastname.toLowerCase() + '_' + number;