Le dilemme
Angular – 4700 étoiles sur GitHub
https://github.com/yeoman/generator-angular
|
1 |
$ npm install -g generator-angular |
ou
Angular-fullstack – 4500 étoiles sur GitHub
https://github.com/angular-fullstack/generator-angular-fullstak
|
1 |
$ npm install -g generator-angular-fullstack |
Au CIMMI
Au CIMMI, nous avons sélectionné le générateur angular-fullstack pour deux projets. Le premier projet utilise la Stack MEAN (Mongo Express Angular et Node) tandis que l’autre projet vise seulement à développer le côté client d’une application de géolocalisation.
Structure des dossiers
Les deux générateurs offrent sensiblement les mêmes outils côté client (grunt server, grunt test, wiredep, watch). Par contre, la structure des dossiers est différente. Pour un petit projet, cette structure est sans importance, mais plus le projet est grand, plus il sera facile de le faire évoluer avec la structure de angular-fullstack.
Le module pattern correspond à la structure generator-angular-fullstack.
Scalable code organization in AngularJS — Opinionated AngularJS
https://medium.com/opinionated-angularjs/scalable-code-organization-in-angularjs-9f01b594bf06
Autres considérations du générateur yeoman angular-fullstack
L’inconvénient du générateur est qu’il est plus lourd à installer. Puisqu’il convient au développement client et serveur, plus de dépendances doivent être installées sur le poste.
Le générateur permet la mise en place facile d’un système d’authentification, que ce soit une authentification standard avec courriel et mot de passe ou avec Facebook, Google ou Twitter.
Le générateur angular-fullstack est déjà configuré afin de déployer facilement votre projet sur Heroku ou OpenShift.
Finalement, il est aussi facile de mettre en place un système d’échange temps-réel offert par les Websockets. Lors de la configuration de votre générateur, vous avez l’option d’installer Socket.IO, soit la librairie la plus populaire pour simplifier l’utilisation des WebSockets, tant côté client que serveur.
Angular-fullstack évolue rapidement
Après avoir mis à jour angular-fullstack à la version 3.3.0 (la plus récente), j’ai réalisé qu’il est maintenant impossible d’écrire du JavaScript vanille (vanille étant du JavaScript sans transcript). Il faut absolument écrire le JavaScript dans un langage intermédiaire qui sera ainsi transformé en JavaScript.
En utilisant la dernière version du générateur, le code initialement généré sera en format Babel ou TypeScript en fonction de l’option sélectionnée lors de la création de votre projet.
Peut-être ne voulez-vous pas apprendre un nouveau langage? Si c’est le cas, vous devrez utiliser la version 2.0.13 du générateur.
Oups! J’ai déjà la version 3.3 et je ne veux pas Babel!
Voilà un beau défi à relever!
Pour débuter tentez la commande suivante :
|
1 |
$ npm install --global generator-angular-fullstack@2.0.13 |
Si cela ne fonctionne pas, poursuivez.
La première étape est de se débarrasser du générateur le plus récent. Identifier les endroits où le generator-angular-fullstack est installé sur votre système.
Vous pouvez vérifier la version du générateur installé avec la commande suivante. Par contre, j’ai réalisé que cette version n’était pas toujours la bonne!
|
1 |
$ npm ls -g --depth=1 2>/dev/null | grep generator- |
├─┬ generator-angular-fullstack@2.0.13
│ ├── generator-ng-component@0.0.10
├─┬ generator-webapp@0.5.1
La commande « locate » peut vous aider.
|
1 |
$ locate generator-angular-fullstack |
Inspecter le fichier package.json, la version du générateur s’y trouve.
Supprimer les dossiers trouvés.
|
1 |
$ rm -rf nomDuDossierDuGenerateur |
Installer la bonne version du générateur.
|
1 |
$ npm install --global generator-angular-fullstack@2.0.13 |
Lancer le générateur dans un dossier vide.
|
1 |
$ yo angular-fullstack |
Note : la version 2 du générateur ne propose pas l’option Babel ou TypeScript. Si cette option est proposée, vous utilisez la version 3 du générateur.
Conclusion
Pour un petit projet, n’hésitez pas à sélectionner generator-angular, le générateur officiel de l’équipe Yeoman.
Pour un projet MEAN, fiez-vous à generator-angular-fullstack.
Pour un projet sans TypeScript ou Babel, utilisez generator-angular ou generator-angular-fullstack@2.0.13
Pour un projet client d’envergure moyenne, considérez sérieusement fullstack qui vous offre une structure de dossiers qui évolue mieux.
Atomrace.com 
Facebook Comments