La mise en oeuvre d’Angular2 est assez laborieuse avec tous les fichiers à prévoir. heureusement il existe une heureuse initiative : un CLI ! Pour rappel un CLI est une interface de commande en ligne( Command Line Interface), autrement dit une batterie de commandes en lignes pour construire une application. petit passage en revue dans cet article…

Installation et lancement d’Angular-CLI

Le code d’Angular-CLI se trouve ici sur GitHub :

Au moment où j’écris cet article il est encore en version beta.

La première chose à faire est de l’installer :

npm install -g angular-cli

Le temps que tout se charge est c’est en place !

Pour créer un nouveau projet c’est maintenant d’un grande simplicité :

ng new mon_projet
cd mon_projet
ng serve

Et c’est tout ! Bon ça prend un peu de temps pour que tout se mette en place mais on peut boire un petit café en attendant.

Si vous avez Windows, comme moi, il est conseillé de lancer la console avec les droits d’administration.

Par défaut on trouve l’application avec cette url :

http://localhost:4200/

Et si tout se passe bien vous devriez obtenir :

mon-projet works!

 

Contenu du projet

Voyons un peu ce que nous avons obtenu…

Voici les dossiers :

On retrouve bien ce qu’on a vu dans les précédents articles :

• le fichier package.json,
• le fichier typings.json.

Dans le dossier des sources src :

On retrouve :

• le fichier index.html,
• le fichier tsconfig.json,
• le fichier main.ts,
• le fichier system.config.ts,
• un composant

Les commandes

Voyons les autres commandes disponibles dans ce CLI.

Créer un composant

On a déjà par défaut un composant :

On y trouve :

• mon-projet.component.css : pour le code CSS
• mon-projet.component.html : pour le template
• mon-projet.component.spec.ts : pour les tests
• mon-projet.component.ts : pour le code du composant

Si on veut ajouter un composant la syntaxe est celle-ci :

ng g component new-component

On se retrouve avec ce nouveau dossier :

Avec ce code tout prêt pour le composant :

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-new-component',
  templateUrl: 'new-component.component.html',
  styleUrls: ['new-component.component.css']
})
export class NewComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

Créer une directive

Pour créer une directive c’est tout aussi simple :

ng g directive new-directive

Avec ce résultat :

Je ne sais pas pourquoi il n’est pas créé un nouveau dossier et un template parce qu’après tout une directive est un composant comme un autre…

Créer un filtre (Pipe)

Pour créer un filtre (Pipe) c’est cette syntaxe :

ng g pipe my-new-pipe

Avec création de ces deux fichiers :

Avec un code de base pour le filtre :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'newPipe'
})
export class NewPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

Créer un service

Enfin pour créer un service c’est tout aussi simple :

ng g service new-service

Avec ce résultat :

Et le code de base :

import { Injectable } from '@angular/core';

@Injectable()
export class NewServiceService {

  constructor() {}

}

Créer une route

Je ne vous ai pas encore parlé des routes dans ma série d’article mais bien évidemment Angular2 en propose ! Voici comme en créer une :

ng g route new-route

Avec ce résultat :

Le signe + indique que c’est une route qui ne sera chargée que si on en a besoin (lazy), ce qui est le comportement par défaut.

Avec ce code de base pour la route :

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-new-route',
  templateUrl: 'new-route.component.html',
  styleUrls: ['new-route.component.css']
})
export class NewRouteComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

Si vous regardez maintenant dans le composant de base (mon-projet.component.css) on trouve un décorateur avec la référence de la nouvelle route créée :

@Routes([
  {path: '/new-route', component: NewRouteComponent}
])
export class MonProjetAppComponent {

Pratique !

Créer la distribution

Pour créer la distribution d el’application il suffit d’utiliser cette commande :

ng build

Tout se compile et on se retrouve avec tous les fichiers résultant dans le dossier de distribution (dist ) :

On a ici tout ce qu’il faut transférer sur le serveur !

Les tests

Pour les tests vous avez les deux commandes :

ng test

Et pour les tests end to end (e2e) :

ng e2e

Sur Windows c’est pas évident à faire fonctionner…

On peut aussi vérifier la syntaxe JavaScript avec la commande :

ng lint

Prise en charge des préprocesseurs

Pour pouvoir utiliser SASS ou LESS ou un autre préprocesseur de ce genre il suffit d’installer le module corrspondant, par exemple :

npm install node-sass

Et de bien préciser le suffixe correpsondant pour les fichiers, par exemple ici scss.

Il est aussi possible d’utiliser moments.js et material2, tout est expliqué ici.

Vous n’avez plus de raison pour ne pas vous lancer dans Angular 2 !