Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet.
Table des matières
Après une petite introduction à Angular et les quatre piliers de sa conception, j’ai choisi d’utiliser l’Interface en ligne de commande (CLI) et la commande ng serve pour tester le projet Angular.
Qu’est-ce qu’Angular
Je vous propose de commencer par une petite introduction à Angular histoire de planter le décor.
Angular est né en 2009 dans les locaux de Google. Shyam Seshadri proposa un framework fait maison initialement appelé AngularJS.
Vous rencontrerez cette dénomination pour les applications développées avec les versions 1 et 2 du framework.
Ne cherchez pas la version 3 d’Angular, Google a purement décidé de passer directement à la version 4 en perdant au passage le suffixe JS.
4 concepts clés d’Angular
Angular est construit autour de concepts clés et bonnes pratiques du développement web actuel :
- Architecture MVC (Modèle-Vue-Contrôleur) : architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions possibles sur ces données (Contrôleur) ;
- Data Binding :il s’agit d’un mécanisme permettant de lier la partie vue à la partie logique c’est-à-dire que les éléments de votre code HTML seront liés à votre contrôleur JavaScript ;
- Injection de dépendances : les modules que vous développerez n’auront plus à se soucier d’instancier leurs dépendances ;
- Manipulation du DOM grâce aux directives : la manipulation du DOM devient plus facile à maintenir et à tester que du pur JavaScript.
Prérequis pour démarrer votre projet Angular
- Node 4.x.x ou supérieur ;
- Npm 3.x.x ou supérieur.
Si vous avez déjà une installation de Node, vérifiez que vous utilisez au moins node 4.x.x et npm 3.x.x ou supérieur en exécutant dans le terminal/console :
node -v
et
npm -v
Mise en place d’un nouveau projet Angular
Étape 1. Configurer l’environnement de développement
Pour la grande majorité des actions, vous allez utiliser la ligne de commande dans le terminal (pour MacOS et Linux) ou la console (pour Windows). vous allez tout d’abord installer l’Angular CLI. Cet environnement est incontournable pour créer les composants et services de votre application.
Pour installer l’Angukar CLI :
npm install -g @angular/cli
Sous Mac OS et linux vous devrez peut-être faire précéder la commande du terme « sudo » vous permettant d’élever vos droits (passer en mode root). Votre mot de passe vous sera demander pour poursuivre l’exécution de la commande.
Étape 2. Créer un nouveau projet
Ouvrez une fenêtre de terminal et créez un nouveau projet et un squelette d’application en exécutant les commandes suivantes:
ng new mon-application-angular
Cette commande créé un squelette d’application Angular 2.
Vous pouvez vérifier la structure de dossier par défaut.
Vous découvrez un fichier styles.css dans lequel vous pourrez écrire vos styles.
Mais si vous souhaitez créer un projet Angular utilisant SASS, vous devez exécuter la commande suivante:
ng new mon-application-angular --style=scss
Étape 3: Tester le projet
Rendez-vous dans le répertoire du projet en utilisant la commande :
cd mon-application-angular
Une fois que vous êtes dans votre dossier hébergeant votre application Angular, exécutez la commande suivante :
ng serve --open
La commande ng serve lance le serveur, surveille les fichiers et reconstruit l’application lorsque vous modifiez votre code. Vous n’avez pas besoin de rafraichir la page qui s’affiche dans votre navigateur : c’est automatique 😉
Voici ce qu’affiche ma console lors de l’exécution de ng serve :
Mac-mini-de-Claude:mon-application-angular claude$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: aa8deb39251b1f857740 / Time: 12392ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.63 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
Ouvrez un navigateur sur http://localhost:4200/
L’application nous accueille avec un message:
J’espère que cette petite introduction vous aidera à créer votre premier projet Angular.
Réagissez en laissant un commentaire ci-dessous.
Crédit photo :
ThisIsEngineering sur Pexels
