Scribd
Importer
62 vues2 pages

Formulaire de connexion en AngularJS

Le document décrit les étapes pour créer un formulaire de connexion en AngularJS. Il explique comment créer un module et un contrôleur, ajouter un formulaire dans la vue avec des champs email et mot de passe, ajouter une validation sur les champs et gérer la logique de connexion.

Transféré par

amine imariren
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
62 vues2 pages

Formulaire de connexion en AngularJS

Le document décrit les étapes pour créer un formulaire de connexion en AngularJS. Il explique comment créer un module et un contrôleur, ajouter un formulaire dans la vue avec des champs email et mot de passe, ajouter une validation sur les champs et gérer la logique de connexion.

Transféré par

amine imariren
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Université Sultan Moulay Slimane

ENSA – Khouribga
Département : Mathématiques et Informatique
Filière : Informatique et Ingénierie des Données
Module : JEE/JS
Atelier : JS
Année Universitaire : 2022/2023
Pr. Ibtissam Bakkouri

Atelier 2
Créer un formulaire de connexion en AngularJS. Le formulaire doit comporter des champs pour l'adresse
e-mail et le mot de passe, et une validation doit être effectuée pour s'assurer que les champs sont remplis.

1- Créez un nouveau module AngularJS et définissez un contrôleur pour gérer le formulaire de connexion.

var app = angular.module('myApp', []);

app.controller('LoginController', function() {
var vm = this;

vm.email = '';
vm.password = '';
vm.errorMessage = '';

vm.login = function() {
vm.errorMessage = '';

// TODO: Implement login logic


};
});

2- Ajoutez un formulaire de connexion à la vue avec des champs pour l'adresse e-mail et le mot de passe.

<form ng-submit="vm.login()">
<label>
Email:
<input type="email" ng-model="vm.email" required>
</label>
<label>
Password:
<input type="password" ng-model="vm.password" required>
</label>
<button type="submit">Log In</button>
<div>{{ vm.errorMessage }}</div>
</form>

3- Ajoutez une validation pour les champs de l'adresse e-mail et du mot de passe. Si les champs ne sont pas
remplis, affichez un message d'erreur.

<form ng-submit="vm.login()" name="loginForm" novalidate>


<label>
Email:
<input type="email" ng-model="vm.email" name="email" required>
<div ng-show="loginForm.email.$error.required">Email is required</div>
</label>
<label>
Password:
<input type="password" ng-model="vm.password" name="password" required>
<div ng-show="loginForm.password.$error.required">Password is required</div>
</label>
<button type="submit">Log In</button>
<div>{{ vm.errorMessage }}</div>
</form>

4- Mettez en place la logique de connexion dans la méthode login() du contrôleur. Pour l'instant, vous
pouvez simplement afficher un message de réussite ou d'échec.

vm.login = function() {
vm.errorMessage = '';

// TODO: Implement login logic


if (vm.email === '[email protected]' && vm.password === 'password') {
alert('Login successful');
} else {
vm.errorMessage = 'Invalid email or password';
}
};

5- Testez le formulaire en entrant une adresse e-mail et un mot de passe valides ou invalides.

Vous aimerez peut-être aussi