Introduction à Angular

1. Introduction

AngularJS est un framework JavaScript. Il permet de développer des applications web dynamiques. Ce framework est totalement écrit en JavaScript.

La bibliothèque Angular s’articule autour des concepts suivants :

Le module : il désigne l’application.
Le modèle : ce sont les données.
Le contrôleur.
Des « directives » et des filtres pour gérer la façon dont les données sont traitées.

2. Les bases du JavaScript

Nous allons présenter les éléments de base du langage JavaScript, des conventions aux événements sur les objets.

a. Syntaxe

En JavaScript, chaque instruction se termine par un point-virgule.

Ainsi, si par exemple, nous voulons créer une variable nommée name, nous écrirons l’instruction ci-dessous qui se termine par un point-virgule :

var name;

Cette instruction permet donc de déclarer une variable.

b. Commentaires

Pour mettre du code JavaScript en commentaire afin qu’il ne soit pas interprété, deux syntaxes peuvent être utilisées.

S’il s’agit d’un commentaire d’une seule ligne, il faut débuter cette ligne avec //. S’il s’agit d’un commentaire de plusieurs lignes, il doit commencer par /* et se terminer par /*.

<html> 
 <head> 
  <title>Script JavaScript</title> 
  <meta charset='utf-8'> 
 </head> 
  <body> 
   <script> 
 
     //commentaire sur une ligne 
     //alert(‘1er Script JavaScript'); 
 
    /*var a; 
     var b; 
     var c; ...

Plug-in Angular sous Struts 2

1. Installer l’environnement

AngularJS est distribué sous la forme d’un fichier JavaScript, il peut être ajouté à une page web avec la balise <script>.

Voici comment ajouter cette librairie à votre page web :

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

2. Bases pour créer une application

Cette section n’a pas pour but d’expliciter le fonctionnement en détail d’AngularJS, mais seulement d’en exposer les principes de base pour créer une application et savoir mettre en œuvre la validation de formulaire.

a. Introduction

Une application Angular repose sur un module (l’application), un modèle (les données stockées en JSON), un contrôleur pour gérer les actions de l’utilisateur et la vue pour l’affichage des données.

Voilà à quoi ressemble une application simple AngularJS, l’utilisateur saisit son numéro de membre puis un mot de passe. Les données sont ensuite récupérées par l’application ou par le contrôleur plus précisément, puis poussées vers la vue et donc affichées à l’écran :

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/ 
angularjs/1.6.4/angular.min.js"></script> 
<body> 
 
<div ng-app="firstApp" ng-controller="myCtrl"> 
 
Member Number: <input type="text" ng-model="memberNumber"><br> 
Password: <input type="password" ng-model="password"><br> 
<br> 
Member Number : {{memberNumber}} 
<br> 
Password :  {{password}} ...

Exemple

AngularJS permet de vérifier l’état des différents formulaires d’une application web. Ainsi, il devient très aisé de vérifier si l’utilisateur a bien saisi les champs requis et si le format des données saisies est conforme.

Voici un exemple complet d’application AngularJS qui permet de contrôler les données saisies par l’utilisateur pour ce formulaire d’authentification.

Le formulaire comporte deux champs de saisie : le numéro d’adhérent et le mot de passe. Les informations saisies par l’utilisateur sont ensuite récupérées et affichées sur la page web. Cet exemple reprend les concepts abordés dans la section Bases pour créer une application.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/ 
angularjs/1.6.4/angular.min.js"></script> 
<style> 
input.ng-invalid { 
    background-color:pink; 
} 
input.ng-valid { 
    background-color:lightgreen; 
} 
</style> 
</head> 
<body> 
 
<h2>Sign In Form</h2> 
 
<form ng-app="authentificationApp" ng-controller="validateCtrl" 
name="authentificationForm" novalidate> 
 
<p>Member Number:<br> 
<input type="text" name="member" ng-model="member" required> 
<span style="color:red" ng-show="authentificationForm.user 
.$dirty && authentificationForm.user.$invalid"> 
<span ng-show="authentificationForm.member.$error.required"> 
Member number is required.</span> 
</span> 
</p> 
 
<p>Email:<br> ...

Angular et Struts 2