Introduction à Angular 4

 


Présentation

Angular est un framework Javascript basé sur la structure d’AngularJS. À partir d’Angular 2, l’équipe de développement de Google a fait une refonte complète de leur ancienne structure, jadis AngularJS, en instaurant la programmation orientée objet avec l’utilisation du langage Typescript. Typescript représente un sur-ensemble de Javascript qui le sécurise et le simplifie. Il amène plusieurs fonctionnalités de Java au langage, notamment le typage de variables et des fonctions, l’import de modules et la création de classes et interfaces.


Installation

Pour ce tutoriel j’utiliserai VS code, si vous ne l’avez pas je vous conseille de l’installer (  https://code.visualstudio.com/Download)

Si vous êtes sous Windows je vous conseille de télécharger Cmder ( http://cmder.net/ ) cela vous facilitera la tâche lorsque nous devrons rentrer dans l’invite de commande (vous n’êtes pas obligé de le faire)

Et pour finir installez Node (https://nodejs.org/en/)


Étape 1. Configurer l’environnement de développement

Ouvrez Cmder en tant qu’Administrateur.

Maintenant rentrez la commande ci-dessous dans le terminal :

npm install -g @angular/cli

 


Étape 2. Créez un nouveau projet

Dans Cmder, positionnez vous à la racine du dossier dans lequel se trouvera votre projet.

Ensuite rentrez la ligne suivante dans le terminal :

ng new Le-nom-de-mon-projet

Vous l’aurez compris, mettez le nom que vous voulez à la place de Le-nom-de-mon-projet.

Maintenant patience, il faut du temps pour mettre en place un nouveau projet, la plus grande partie est consacrée à l’installation de paquets npm.


Étape 3.  Se servir de l’application

Il est temps d’ouvrir VS code et de chercher votre projet (Fichier ouvrir le dossier),  une fois ouvert cliquez sur Afficher puis cliquez sur Terminal intégré ou appuyez sur Ctrl + ù

Rentrez dans le terminal de VS code la ligne suivante :

ng serve --open

La commande ci-dessus lance le serveur, surveille vos fichiers et reconstruit l’application lorsque vous apportez des modifications à ces fichiers.

Ouvrez votre navigateur et rentrez http://localhost:4200/ dans la barre d’url.

La page affichée devrait être celle-ci :

Si cette page ne s’affiche pas vérifiez que vous n’avez pas sauté une étape.


Étape 4. Modifiez votre premier composant Angular

Lors de l’étape 2 la commande a créé le premier composant angular pour vous. C’est le composant racine et il est nommé app-root. Vous pouvez le trouver dans ./src/app/app.component.ts.

Ouvrez ce fichier de « composants » et changez la propriété « title » et remplacez la par ‘Angular c’est trop bien !’.

export class AppComponent {
  title = 'Angular c'est trop bien !';
}
src / app / app.component.ts

Votre app.component.ts devrait ressembler à ça maintenant.

Votre navigateur va se recharger tout seul si vous enregistrez. Constatez que le titre affiché est bien celui souhaité, mais cela ne suffit pas, nous allons lui ajouter du « style » .

Ouvrez  src/app/app.component.css et donnez du style au composant.

h1 {
  color: #8B0000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
src / app / app.component.css

Sauvegardez et retournez sur votre page html, voila vous avez votre beau titre.

 


Source et liens utiles

Je vous conseille fortement d’aller sur le site officiel d’angular (https://angular.io/) vous y retrouverez pas mal de tutoriels intéressants ainsi qu’une multitude d’informations et d’exemples sur TOUTES les fonctions possibles et réalisables avec angular.

Source : (https://angular.io/)


 

BOUTIN Alexandre

BTS Systèmes Numériques option Informatique et Réseaux (1ère année)
Saint-Nazaire (2017-2018)