Angular : Installation / Introduction

AngularJS, devenu tout simplement Angular, est un framework JavaScript (abus de langage) utilisant spécifiquement la syntaxe TypeScript et qui permet d'étendre vos pages HTML avec de nouveaux attributs. Il est couramment utilisé pour des applications à page unique appelées communément SPA.

Son apprentissage est relativement simple si vous avez des connaissance de base dans les langages suivants : HTML, CSS, JAVASCRIPT.

INSTALLATION

Dans ce petit tutoriel, je vais partir des méthodes simples pour que nous comprenions ensemble la simplicité du framework. Angular peut être ajouté à une page HTML via une balise <script> :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

Vous pouvez aussi télécharger le fichier à cette adresse et l'héberger localement : 
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js
Dans ce tutoriel, la version actuelle est 1.7.8.

INTRODUCTION

Dans une application Angular, vous verrez certains attributs commençant par ng-. Ce sont ces attributs appelés Directives qui permettent vraiment d'étendre vos pages HTML. En effet, Anglular s'exécute une fois votre page web chargée. Considérons ce code : 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body ng-app="">

  <p>Mon sport : <input type="text" ng-model="sport"></p>
  <p ng-bind="sport"></p>

</body>
</html>

La directive ng-app définit une application AngularJS et indique que l'élément la portant est propriétaire de l'application donc <body> dans notre exemple. On peut mettre cette directive sur l'élément <html> ou encore un élément <div>. Cela dépend de la logique de votre application.

La directive ng-model lie la valeur des contrôles HTML (input, select, textarea) aux données de l'application donc dans notre exemple la valeur du champ text à la variable d'application sport.

La directive ng-bind lie les données d'application à la vue HTML. Dans notre exemple, le contenu de l'élément <p> à la variable sport.

Nous verrons ensemble dans les chapitres suivants plusieurs aspects d'Angular comme les controllers, modules et consor.

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .