Présentation
Angular est un framework basé sur Javascript jusqu'à sa version 2, puis sur Typescript.
On verra souvent parler de AngularJS et Angular2 pour les différencier, bien que maintenant Angular a dépassé la version 13.
Mais la différence entre Javascript et Typescript n'est pas phénoménale. En effet, Typescript est une surcouche de Javascript apportant le
typage. C'est à dire le fait de pouvoir indiquer de quel type doivent être les variables, les arguments ou les retours des fonctions.
Cela a pour principale intérêt de réduire les erreurs qu'un développeur pourrait faire et la perte de temps qu'ocasionne la recherche de
ces erreurs.
Angular est donc un Framework front-end permettant la création d'application Web de type "Single Page Application". C'est à dire que l'entièreté du site est chargé par Javascript et bien que l'application donne l'illusion de changer de page, ce n'est en vérité pas le cas et tout ce déroule sur une seule et unique page. Permettant par exemple l'animation de changement de page et de ne jamais recharger nos pages.
Installation
Pour installer Angular, il est vivement recommandé d'utiliser l'installateur de NodeJS appelé NPM.
Vous trouverez l'installateur ici : NodeJS
Nous ne nous pencherons pas sur NodeJS ici.
Une fois installé vous pouvez lancer l'invite de commande / Terminal / CMD de votre ordinateur ou de votre IDE.
Vous pouvez tester que l'installation a bien marché en tapant "npm" puis taper sur "Entrée". Si il n'y a pas d'erreur, alors nous
pouvons continuer.
On va ensuite entrer la commande suivante :
npm install -g @angular/cli
Détaillons cette commande ensemble.
- "npm" pour dire au terminal quel outil utiliser.
- "install" peut être abrégé "i" et dit à "npm" que l'on souhaite installer quelque chose.
- "-g" afin de lui dire de l'installer de façon globale, si ce n'est pas fait, il installera uniquement dans le dossier en cours.
- "@angular/cli" le nom du paquet que l'on souhaite installer.
Il nous faudra ensuite nous déplacer dans nos dossiers pour choisir où est ce que l'on va installer notre nouveau projet.
Pour rappel, se déplacer dans un terminal se fait avec la commande "cd" suivi d'un espace et du nom du ou des dossier(s) où l'on souhaite entrer.
Ou bien "../" pour retourner au dossier parent.
Une fois au bon endroit, on entre :
ng new nomDuProjet
- "ng" est le mot clef pour indiquer que l'on utilise Angular
- "new" pour dire que l'on veut créer un nouveau projet
- "nomDuProjet" le nom de votre nouveau projet.
Lors de l'installation il vous demandera si vous souhaitez utiliser le système de routing, ce que je vous conseille.
Il vous sera aussi demandé quelle technologie vous souhaitez utiliser pour le "CSS", et cela est à votre choix.
Serveur et Compilation
Angular est constitué de plus de 44 000 fichiers et la plupart dans des langages que nos navigateurs ne comprennent pas. Compliqué pour un framework
orienté front-end.
Il nous faudra alors compiler le code dans des langages compréhensible pour nos navigateurs, mais il serait fastidieux de compiler à chaque fois que
l'on souhaite tester le moindre changement.
C'est pour cela que Angular comporte un serveur qui compile le code automatiquement avant de l'afficher dans votre navigateur.
Pour cela on va entrer la commande ci-dessous en faisant attention de bien être dans le dossier de notre projet :
ng serve --open
- "ng" pour signifier que l'on appelle Angular
- "serve" pour indiquer que l'on souhaite lancer le serveur
- "--open" est optionnel et permet d'afficher directement la page dans le navigateur.
Par défaut la page sera accessible à l'adresse suivante : http://localhost:4200/
Si jamais il y a un problème avec le port qui peut être occupé, il peut être changé de cette façon :
ng serve --port 4201
- "ng" pour Angular
- "serve" pour lancer le serveur
- "--port" est optionnel et permet de changer le port par défaut
- "4201" est le numéro du port souhaité
Enfin, lorsque l'on veut envoyer notre projet en production, il faudra compiler ces 44 000 fichiers très lourd en moins d'une dizaine
très léger.
Pour cela on va utiliser cette commande :
ng build
- "ng" pour Angular
- "build" signifie que l'on veut compiler notre code
Angular va créer à la racine de votre projet un dossier nommé "dist" avec tout les fichiers dont on va avoir besoin pour mettre le site en ligne.
Il contient bien évidement le fichier index.html qui sera chargé par votre serveur.
Si jamais votre application ne se trouve pas à la racine de votre serveur, vous devrez changer la balise "base" dans le "head" de votre
"index.html" et lui indiquer où il se trouve.
Ajouter un ".htaccess" redirigeant vers votre "index.html" pourrait vous être utile.
Rappel des commandes
Une fois "nodeJS" et donc "NPM" installé :