AngularJS : Installation / Introduction

AngularJS est un framework JavaScript écrit en javascript 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. AngularJS 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 AngularJS, 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, AnglularJS 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.

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'AngularJS 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 .