Angular 2 commence à faire des émules. C’est un fait. Mais passer de la version 1 à la version 2 est un peu déroutant. Bref, j’ai aujourd’hui quelques outils qui me permettent de bosser efficacement avec Angular 2 sur Vim avec en plus une petite image Docker qui peut vous rendre service.

Passer de Angular 1 à 2, c’est comme passer de la voiture à la moto. On a bien un moteur, on roule sur des routes, on se déplace… Mais la conduite est considérablement différente.

Clairement, Angular 2 n’a quasiment rien à voir à avec la version 1. D’abord dans l’approche, puisqu’on a plus de contrôlleur, plus de “$scope”, etc. Mais aussi parce que le langage utilisé n’est plus Javascript. Pour être plus précis, on peut utiliser Javascript mais il semble que la majeure partie des développeurs passent à la version “TypeScript” qui propose une syntaxe plus poussée en termes de POO. Car Typescript est un langage qui propose une définition de classe avec encapsulation.

Mais nous n’allons pas parler de cela aujourd’hui, je veux vous parler essentiellement des outils que j’ai installés sur mon poste pour tester Angular 2 avec Vim.

On va donc passer par deux étapes, la première est la configuration de vim pour avoir l’auto-completion typescript, et la seconde vous montrera comment je démarre un projet Angular 2 (avec une image docker, et oui… On se refait pas)

Installation des outils

Typescript

Malheureusement, il faut installer globalement le transpiler “typescript”. J’ai cherché à m’abstraire de cette contrainte sans succès.

C’est assez facile, mais bon, ça installera le module dans votre système…

Rien de grave hein, c’est juste que je n’aime pas trop qu’un outil tiers manipule mon installation Linux si ce n’est pas un RPM (ou un .deb pour les debian/like)

Sans paniquer, vous pouvez y aller:

sudo npm install -g typescript

C’était pas compliqué.

Plugins Vim

Je travaille sur “neovim”, mais si vous avez “vim” traditionnel cela devrait passer sans souci. Personnellement j’utilise “Vundle” pour installer mes plugins vim, c’est plus rapide et plus maintenable que Pathogen selon moi.

Donc, dans votre “~/.vimrc” vous allez ajouter ces lignes:

" Mainly for typescript
Plugin 'Shougo/vimproc.vim'
Plugin 'Quramy/tsuquyomi'
Plugin 'leafgarland/typescript-vim'

Sauvez votre fichier et fermez vim, puis ouvrez vim et tapez:

:PluginInstall

Quand c’est terminé, fermez vim.

Si vous n’utilisez pas “Vundle”, vous devrez alors suivre les instructions des pages:

• https://github.com/Shougo/vimproc.vim
• https://github.com/Quramy/tsuquyomi
• https://github.com/leafgarland/typescript-vim

Bref, admettons que vous ayez enfin installé les plugins.

Maintenant allez dans le répertoire “~/.vim/bundle/vimproc.vim/” et tapez la commande “make”. Sans cela, rien ne fonctionnera.

Le troisième plugin ajoute la coloration syntaxique.

Voilà, on a terminé… Si si je vous assure !

Créer un projet

Plusieurs solutions s’offrent à vous. La première est d’utiliser l’outil officiel angular-cli en l’installant avec “npm”.

Personnellement je n’aime pas cette méthode, pour des raisons déjà expliqué plus tôt: je n’aime pas installer “globallement” des choses sur mon système.

Vous pourriez utiliser nvm aussi pour installer tout ça dans votre HOME, mais encore une fois j’ai un peu de mal avec cette méthode. Car si vous partagez votre projet avec une équipe, je suis prêt à parier qu’à un moment ou un autre vous allez oublier une dépendance dans votre “package.json” tout simplement parce que la librairie est accessible sur votre poste, et installée depuis un autre projet.

J’ai eut le cas… Donc personnellement je vais passer par une image Docker (vous vous y attendiez si vous me connaissez bien).

L’image que je vous propose est ici: metal3d/ng. Vous pouvez attraper cette image:

docker pull metal3d/ng

Créons donc un projet:

mkdir ~/Projects/angular2-test
cd ~/Projects/angular2-test
docker run --rm -it      \
    -v $(pwd):/project   \
    -u $(id -u):$(id -g) \
    metal3d/ng new myproject

Cela crée le projet “myproject” dans votre répertoire.

Attention, à partir de là il va y avoir un piège !

Le répertoire de “projet” est désormais “~/Project/angular2-test/myproject” !

Donc, maintenant, vous devez vous déplacer dans ce répertoire pour faire fonctionner votre application, ou changer le volume dans la ligne de commande.

Vous avez donc deux solutions:

• vous décidez que votre projet se trouve dans le répertoire “myproject” et donc vous avez simplement à vous déplacer dans ce repertoire pour lancer les commande docker
• vous décidez que “myproject” est un sous-repertoire de votre projet principal, il faut adapter le répertoire dans les commandes docker en ce qui concerne le volume

A partir de là, j’estime que vous avez choisi la première solution, à savoir que le répertoire “myproject” est le répertoire de projet. Vous pouvez donc taper:

cd myproject

Pour gagner en confort, je vais créer deux fichiers:

• un docker-compose.yml pour lancer le projet en mode “service”
• un Makefile pour éviter de taper de longues commandes docker pour créer des fichiers de projet

Allons-y…

Un peu de confort

Nous somme donc désormais dans le répertoire “~/Projects/angular2-test/myproject”.

Mon fichier docker-compose.yml ressemble à ceci (remplacez bien 1000:1000 par vos uid et gid):

version: '2'
services:
    app:
        image: metal3d/ng
        user: 1000:1000
        command: serve
        ports:
        - 4200:4200
        - 49152:49152
        volumes:
        - ./:/project

Le service s’appelle “app”, je vais l’utiliser dans un Makefile.

Voilà donc le fichier “Makefile” que j’utilise:

.PHONY: ng
DIR:=$(PWD)
APPNAME:=app
UID:=$(shell id -u)
GID:=$(shell id -g)

run:
    docker-compose up

ng:
ifndef DO 
    @echo 'You must provide a "DO" parameter'
    @echo 'Example: make ng DO="generate component foo"'
    exit 1
endif
    docker-compose run --rm $(APPNAME) $(DO)

Comme ça, je pourrais taper:

$ make ng DO="g component foo"
installing component
  create src/app/components/foo/foo.css
  create src/app/components/foo/foo.html
  create src/app/components/foo/foo.ts
installing component-test
  create src/app/components/foo/foo.spec.ts

Et donc, en tapant “make” ou en tapant “docker-compose up”, j’ai bien un service angular qui fonctionne.

app_1 | Could not find watchman, falling back to NodeWatcher for file system events.
app_1 | Visit http://www.ember-cli.com/user-guide/#watchman for more info.
app_1 | Livereload server on http://localhost:49152
app_1 | Serving on http://localhost:4200/

Conclusion

Je ne suis pas encore entré dans les détails de Angular 2. Je suis encore en cours d’apprentissage. Mais cette image docker, créée en quelques minutes, et les fichiers “Makefile” et “docker-compose.yml” que je vous ai montré accélèrent vraiment le boulot.

Encore une fois, vous pouvez vous passer de Docker ici, mais je pense honnêtement que si vous travaillez en équipe alors l’utilisation d’une image qui propose les outils et le serveur “dev” évitera pas mal de dérapages.

Vim, configuré comme je vous l’ai montré, me donne une bonne completion de code et des informations utiles ainsi qu’une coloration propre. Le confort de travail est suffisant pour moi.

En espérant que tout ça vous aide.