/ Linux

Angular JS sous Archlinux

Dans la poursuite de mes aventures et découvertes sous ArchLinux, je m’attaque à la programmation Javascript à travers le template Angular JS et la suite des outils JS : Yeoman, NodeJS, NPM, Bower et Grunt …

Installer le cadre de travail pour Angular est relativement souple et aisé sous ArchLinux, pour preuve :

Comment procéder ?

Yeoman comprend trois outils essentiels lorsque vous développez vos projets JavaScript :

  • Yo : il s’agit de l’outil qui va vous permettre de mettre en place votre projet.

  • Bower : il s’agit d’un autre gestionnaire de paquets, au même titre que npm. Ces deux gestionnaires de paquets ne gèrent pas les dépendances de la même manière. À titre d’explication, npm gère automatiquement les dépendances de vos paquets, alors qu’il incombe au développeur de décrire les dépendances lorsque vous utilisez bower. De ce fait, il est assez courant d’utiliser npm lorsque vous programmez votre serveur et bower pour vos projets front-end.

  • Grunt : il s’agit de l’outil qui va vous permettre de tester et lancer votre application.

Depuis votre gestionnaire de paquets, Pacman lancez l’installation de NodeJS et NPM :

nodeNPM

pacman -S nodejs npm

Installations

yeoman-toolset-300x120

Installation de bower

npm install -g bower

Installation de yo et de quelques générateurs

npm install -g yo

Nous rajoutons l’option -g afin de rendre l’installation globale. Cela vous évitera d’avoir à le réinstaller à chaque nouveau projet !

Si vous constatez des erreurs, exécutez vos commandes en mode superutilisateur.

Bien, créons un répertoire de travail puis un répertoire pour notre première application :

mkdir workspace ; mkdir workspace/test ; cd workspace/test

Vous êtes prêt à initialiser notre première application :

yo angular

DeepinScreenshot_select-area_20171011155513

NB : ne pas oublier la commande sudo chmod 777 -R workspace/test

DeepinScreenshot_select-area_20171021193340

Ci-dessus, après avoir lancé yo angular….

DeepinScreenshot_select-area_20171021193623

Et ici après avoir lancé successivement grunt puis, grunt serve…

DeepinScreenshot_select-area_20171021194007

Et miracle en lançant son navigateur sur le port 9000, on découvre l’interface Yeoman.

Avec Bootstrap c’est plus joli :

Capture-d-e-cran-2017-10-23-a--12.50.33

Et voilà c’est tout pour aujourd’hui, à très vite pour la suite…