Introduction a angular-cli pour angular2

publié le

Angular-cli est le moyen le plus rapide pour réaliser une application Angular2, en seulemeny 2 lignes de code on obtient une application prête à l’emploi qui respecte les conventions suggérées par l’équipe Angular.

npm i -g angular-cli
#ng2webrtc est le nom de mon dossier, utilisez celui de votre choix
ng new ng2webrtc
résultat de ng new ng2webrtc

Le résultat vaut le détour : une application initialisée et bootstrapée (néologisme) pour les navigateurs web (cf ligne 1 de src/main.ts) avec 1 premier composant principal src/app/ng2webrtc.component.ts et son test associé src/app/ng2webrtc.component.spec.ts. Certes elle ne fait pas grand chose (affichage d’une string), mais elle fournit surtout toute la configuration nécessaire à travailler sereinement et des exemples prêts à l’emploi pour les tests unitaires et d’intégration :

  • src/tsconfig.json : la configuration du “compilateur” TypeScript
  • system-config.ts : la configuration pour SystemJS le chargeur de modules utilisé pour le moment (sera probablement paramétrable pour utiliser d’autres loader de module prochainement)
  • config/karma.conf.js : la configuration pour le runner karma qui joue les tests unitaires (avec jasmine) (*.spec.ts)
  • config/protractor.conf.js : pour le runner protractor qui joue les tests d’intégration (dossier e2e)
  • e2e/* : premier exemple de tests d’intégration (end to end)
  • tslint.json : configuration du linter pour l’analyse statique de code TypeScript
  • typings.json : configuration de Typings pour les définition de TypeScript que nous allons utiliser : es6-shym en dépendances et angular-protractor, jasmine et selenium-webdriver pour les tests
  • package.json : la configuration npm de notre application qui propose les tâches : start(serveur), postinstall(typings), lint(analyse de code), test(tests unitaires), pree2e(lance le webdriver), e2e(tests d’intégration)

Les commandes disponibles

Rien de plus simple on a le choix entre :

  • tests unitaires : npm test ou ng test résultat de ng test
  • tests d’intégrations : npm run e2e ou ng e2e (lance pree2e automatiquement) résultat de ng e2e
  • lancer un serveur (livereload sur le port 4200 et pré-requis pour les tests e2e) : npm start ou ng serve résultat de ng serve
  • au moment de mon test la tache de lint ne fonctionnait pas dans mon environnement, espérons que cela sera vite résolu.

Le mode scaffolder

Cependant la plus grande force d’angular-cli est l’attirail d’outils qu’il fournit pour simplifier la vie du développeur, en effet ce scaffolder permet la création de composants, directives, pipes, services, et routes grâce à la commande ng generate

résultat de ng generate

La commande crée tous les fichiers nécessaires à notre création : css, html, test unitaire (spec), et le composant et l’ajoute à la configuration de SystemJS afin de pouvoir charger ce composant dans notre application. Des options permettent de ne pas créer le fichier css ou html, mais il s’agit d’une mauvaise pratique donc évitez de les utiliser.

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

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

    constructor() {}

    ngOnInit() {
    }

}
<p>
    text-chat works!
</p>

Encore une fois on n’affiche que du texte dans un paragraphe et la feuille de style est vide, cependant le composant est directement prêt à être utilisé dans notre application :

//ng2webrtc.component.ts
import { Component } from '@angular/core';
import { TextChatComponent } from './text-chat/';

@Component({
    moduleId: module.id,
    selector: 'ng2webrtc-app',
    templateUrl: 'ng2webrtc.component.html',
    directives: [TextChatComponent],
    styleUrls: ['ng2webrtc.component.css']
})
export class Ng2webrtcAppComponent {
    title = 'ng2webrtc works!';
}
<!-- ng2webrtc.component.html-->
<h1>
    Introduction a angular-cli pour angular2
</h1>
<app-text-chat></app-text-chat>

Les autres verbes

En plus de tous les indispensables cités ci-dessus, Angular CLI vient avec les quelques verbes plus marginaux que voici :

  • ng init: Crée une nouvelle application Angular2 dans le répertoire courant.
  • ng doc: Ouvre un navigateur web avec le mot clé passé en paramètre recherché dans la documentation Angular.
  • ng format: Formates le code en utilisant clang-format.
  • ng get: récupère une valeur de la configuration Angular CLI.
  • ng set: Écrit une valeur dans la configuration Angular CLI.
  • ng github-pages:deploy : Déploie l’application sur une page github.
  • ng version: Affiche les versions d’Angular CLI, de NodeJS, ainsi que l’OS utilisés.

TLDR;

La Command Line Interface d’Angular est un outil vraiment très agréable à utiliser, pour un scaffolder il ne ramène que l’essentiel nécessaire au développement Angular2 avec TypeScript mais fournit toutes les options qu’on attend d’un tel outil. Seul bémol, pour le moment il n’est pas paramétrable pour utiliser ES6 ou 7 en tant que langage ou pour utiliser un autre module loader que SystemJS.

Grâce à cette CLI, aucun risque d’oublier un détail de configuration en créant un nouveau composant ou une nouvelle route (ou autre extension d’une classe Angular2), car le scaffolder le fait pour nous, ce qui permet de se concentrer sur le code avec une réelle valeur et de ne pas perdre de temps en configuration, que ce soit à la création avec ng new ou ng init ou pendant le développement avec ng generate. Cependant il faut se méfier de la magie aussi j’encourage fortement les développeurs Angular à ne pas l’utiliser au départ mais uniquement pour gagner du temps une fois qu’ils ont bien compris ce qui se passait dans le framework en expérimentant la voie Do It Yourself.

Tweet