Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet. 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 :

et

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 :

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:

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:

Étape 3: Tester le projet

Rendez-vous dans le répertoire du projet en utilisant la commande :

Une fois que vous êtes dans votre dossier hébergeant votre application Angular, exécutez la commande suivante :

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 :

Ouvrez un navigateur sur http://localhost:4200/

L’application nous accueille avec un message:

Ma première application avec Angular

Ma première application avec Angular

J’espère que cette petite introduction vous aidera à créer votre premier projet Angular.

Réagissez en laissant un commentaire ci-dessous.

Angular – Développez vos applications web avec le framework JavaScript de Google

Ce livre s’adresse autant à un développeur web chevronné qu’à un néophyte. Il a été rédigé dans l’objectif de permettre au lecteur de se lancer dans un projet Angular (en version 4 au moment de l’écriture), quelles que soient ses connaissances.

Catégories : La minute coding

Claude BUENO

Je suis passionné par les technologies de l'information et de la communication. Ma mission : accompagner les clients dans leur transformation digitale. Je blogue depuis 2008 sur les sujets numériques. Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite à Tours.

Laisser un commentaire

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

Articles similaires

La minute coding

Comment trier une liste en JavaScript ?

Trier le contenu de listes est un exercice courant lorsqu’on développe des applications ou un site web. Aussi, si vous travaillez avec JavaScript, vous serez amené à utiliser la méthode sort() qui permet de trier Lire la suite…

La minute coding

Comment créer votre première application mobile avec Cordova ?

Depuis quelque temps je m’intéresse au développement pour mobiles et plus précisément pour Android. A travers ce billet, je vais vous présenter comment créer votre première application mobile avec Cordova sans connaître le langage natif Lire la suite…

La minute coding

Comment gérer son code avec Git et GitHub ?

Collègue développeur, je viens te parler d’un moyen efficace de suivre l’évolution de ton code sans rien perdre des modifications que tu as pu faire tout au long de la vie de ton projet. Le Lire la suite…