Ce tutoriel va t’aider à installer Angular et tenter de vulgariser au maximum ce framework.

Nous allons avancer pas à pas pour te permettre d’en comprendre les bases, et, pourquoi pas enfin lancer le projet de site pour tonton Guy qui fait la collection de figurine Warhammer (faut pas déconner tout de même).

Qu’est-ce qu’un framework ?

D’une manière générale, un framework est « un cadre de travail », constitué d’un ensemble de bibliothèques, d’outils et de conventions permettant le développement rapide d’application. C’est une grosse boîte à outils qui comporte tous les éléments pour faciliter le travail du développeur.

AngularJS, Angular 2, Angular 4 ou Angular ? :

Tu ne t’y retrouves plus dans tous ces noms que tu rencontres dans ta tweetlist, dans ton fil d’actus feedly ou encore dans les sujets reddit ; rassure-toi, il y a une raison très simple et nous allons éclaircir ce point.

Misko Hevery conçoit la première version du framework AngularJS en 2009. L’année d’après, il rejoint les équipes de Google qui soutient alors officiellement le projet.

À partir de Décembre 2016, soit 7 ans plus tard, la communauté a pu prendre en main la version beta du framework JS dans sa version 2, le dénommé Angular.

angular

Il est de coutume désormais d’associer le nom d’AngularJS à la version 1.x et Angular à partir de la 2.x. Les noms tels qu’Angular 2/4/5 n’ont pas réellement d’intérêt, mais ils peuvent s’avérer utiles lorsque l’on constate des bugs sur une version donnée. Cela nous permet de trouver la solution rapidement en la ciblant.

Ce changement de nom est dû à la refonte totale du framework basée notamment sur une programmation en TypeScript, une structuration différente que nous détaillerons plus tard, une conception autour des composants et un développement accentué vers les applications web vues depuis un mobile.

Un point sur la concurrence :

En cherchant un peu sur le web, nous trouvons rapidement deux potentiels concurrents à Angular : React et Vue.

Le premier est une librairie développée par Facebook en 2013 qui rencontre un certain succès, le second est également une librairie, écrite par Evan You et parue en 2014.

Dans le graphique ci-dessous, tu peux observer un point de comparaison relatif entre les 3 projets :

graphique de comparaison angular react vue
Nombre de téléchargements par mois sur NPM d’Octobre 2015 à Septembre 2017

Comme nous pouvons le constater, React reçoit un certain engouement de la part de la communauté avec son nombre de téléchargement qui augmente fortement.

Tu es en droit de te demander pourquoi j’ai choisi de faire ce dossier sur Angular à l’instar de React. Tout simplement car je suis développeur front-end dans une agence de développement web qui offre un écosystème et un cadre de travail basé sur Angular. Il en va de soi qu’il m’arrive de loucher un peu sur le github des voisins.

Les caractéristiques principales :

Le framework est complet en proposant toutes les briques nécessaires à la création d’une application :

  • Router : pour te créer simplement des url dans ton application, exemple : blogdummi.fr/mon-url-personnalisé
  • Templates : appelé communément les « vues » dans le modèle MVC (Modèle-Vue-Controleur), ils sont là pour y intégrer ton HTML.
  • Module http : pour récupérer des informations dynamiquement d’une API, rien de plus simple avec ce module déjà fourni.
  • Formulaires : tout un module clé-en-main pour concevoir des formulaires robustes et sécurisés.
  • Tests : comme toute application, elle doit être testée. Le framework donne les outils pour y arriver.
  • Et tant d’autres…

La configuration d’un tel espace de travail peut paraitre longue et fastidieuse, c’est vrai. Cependant, la team d’Angular a bien travaillé et a pensé à toi : Ils ont sorti un outil en ligne de commande (hé oui, désolé, tu n’y échapperas pas !) nommé Angular CLI. Il te permettra de créer facilement la base de ton application en générant des squelettes de composants, de pipes, de services, … Mais nous y reviendrons plus tard pour bien comprendre tous ces termes  

Dans la liste précédente, j’ai évoqué les modules de routing, http et de formulaires. Ils font partie des nombreux sous-paquets qui constituent Angular, sa caractéristique première, la modularité.

Comparons avec Bootstrap, par exemple. Si tu veux seulement utiliser les styles de boutons pour ton nouveau portfolio, tu ne vas pas importer tout Bootstrap, c’est bien trop lourd ! (NDLR : oui je sais, il est possible de choisir ce qu’on veut importer dans la version less ou scss)

C’est pourquoi, Todd Motto et toute son équipe, ont voulu rendre cela possible nativement sur leur projet. Ainsi, tu es libre d’importer uniquement les paquets (aka module) nécessaires : http, forms, routing, translate, pour ne citer qu’eux, sans compter tous les modules développés par la communauté.

Passons à la pratique ! Comment installer Angular ?

Avant d’installer Angular, il est nécessaire que tu es NodeJs et NPM d’installés sur ta machine. Après cette petite introspection du framework, il est grand temps d’ouvrir notre terminal.

Nous allons commencer par installer Angular CLI sur ta machine pour pouvoir ensuite créer facilement un projet. Pour cela, ouvre ton terminal et tape: (il peut être demander ton mot de passe car l’installation global,  -g, requiert les accès administrateur de ta machine)

Ensuite, mets-toi dans le dossier dans lequel tu veux installer ton application et créer ton projet :

Pour cette commande, ng new, il existe des paramètres que tu peux utiliser pour configurer ton projet avec des options. Pour exemple, deux options que j’utilise toujours à la création de mes projets :

  • --style : définis le langage CSS par défaut. Personnellement, je travaille avec le SCSS.
  • --routing : génère un module pour le routing, chose qui se rendra très utile plus tard  

La commande devient donc :

Tu as réussi à installer Angular et pu créer ta première application sous Angular ! Lançons-la ! Dans ton terminal, rends toi dans le dossier de ton nouveau projet :

Cette commande te permet de le lancer en mode développement. Tu peux ouvrir d’ores et déjà ton navigateur préféré à l’adresse : localhost:4200
Par défaut, le port utilisé est le 4200 mais tu peux le spécifier en passant en paramètre de la commande précédente l’option --port. Par exemple, pour le port 4500 :

Tu devrais tomber sur cette page :

Félicitations, tu as désormais ton premier projet Angular ! 

Dans cet article, nous avons pu voir ensemble l’histoire et les bases de ce framework. Dès à présent, ce tutoriel pour installer Angular t’a aidé, et l’introduction à ce framework t’a intéressé, je t’invite à te rendre sur les trois liens qui sont présents sur la page de projet. Tu y trouveras un tutoriel Tour of Heroes, qui te permettra de voir d’autres notions de l’outil, la documentation de l’interface de ligne de commande et le blog.

Sinon je te donne rendez-vous prochainement pour la suite de la vulgarisation d’Angular où nous aborderons de nouvelles notions, tout en les mettant en pratique !

Installer Angular : initiation au framework Javascript
4.4 (88%) 10 votes

Une réflexion sur “ Installer Angular : initiation au framework Javascript ”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir