Créer une application web depuis le début en utilisant AngularJS et Firebase: Partie2

French (Français) translation by Florence Bertic (you can also view the original English article)

Dans la première partie de cette série, nous avons vu comment débuter en créant une application avec AngularJS et Firebase. Nous avons créé notre page d'identification et implémenté la fonctionnalité d'identification avec Firebase comme back-end (arrière-plan).

Dans ce tutoriel, nous allons emmener cette série au niveau suivant. Nous allons créer et installer la page d'enregistrement et voir comment faire le formulaire de validation dans AngularJS.

Commencer

Commençons par cloner la première partie du tutoriel depuis GitHub.

git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git

Une fois le code rapatrié, va dans le dossier du projet et installe les dépendances requises.

cd AngularJS_Firebase_Part1
npm install

Une fois toutes les dépendances installées, lance le serveur.

npm start

Dirige le navigateur sur http://localhost:8000/app/#/home et tu devrais voir l'application tourner.

Créer l'écran d'enregistrement

Nous commencerons par créer une page pour que les utilisateurs invités puissent s'enregistrer. Va dans AngularJS_Firebase_Part1/app et crée un dossier appelé register. Dans le dossier register, crée les fichiers register.html et register.js. Voici à quoi ressemble register.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign In</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
      </form>

    </div>

</body></html>

Comme vu dans le code HTML ci-dessus, nous avons utilisé Bootstrap pour notre design HTML.

Dans register.js, nous allons réclarer les routes pour que l'application accède à la vue d'enregistrement. $routeProvider a une méthode appelée when, que nous allons utiliser pour créer une route pour notre vue d'enregistrement. Quand on définit une nouvelle route, on met en place un templateUrl qui devrait être rendu dans index.html. En parallèle avec ça, on met également en place un controller (contrôleur) pour le $scope qui vient d'être créé pour notre vue d'enregistrement. Un contrôleur est une logique qui contrôle une vue en particulier. Voici à quoi ça doit ressembler:

'use strict';

angular.module('myApp.register', ['ngRoute'])

// Declared route 
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/register', {
        templateUrl: 'register/register.html',
        controller: 'RegisterCtrl'
    });
}])

// Register controller
.controller('RegisterCtrl', [function() {

}]);

Maintenant ouvre app.js et inclus le module d'enregistrement myApp.register dans l'application.

'use strict';

angular.module('myApp', [
    'ngRoute',
    'myApp.home',
    'myApp.register'  // Newly added register route
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home

    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

Pour afficher la page d'enregistrement, on doit inclure register.js dans le fichier template HTML principal de l'application. Ouvre index.html et inclus ce qui suit:

<script src="register/register.js"></script>

Relance le serveur et dirige ton navigateur vers http://localhost:8000/app/index.html#/register et tu devrais voir l'écran d'enregistrement:

Ensuite, faisons le lien entre l'écran d'enregistrement et l'écran d'identification. Dans home.html et register.html il y a respectivement un sign up et sign in href (lien). On met en place les deux sources href pour qu'elles soient accessibles depuis les deux pages.

Dans home.html:

<a href="#/register"> Sign Up<a/>

Dans register.html:

<a href="#/home"> Sign In<a/>

Formulaire de validation dans AngularJS

Quand un utilisateur entre son adresse email et son mot de passe dans l'écran d'enregistrement, on a besoin de valider quelques petites choses. D'abord, l'email id entré doit avoir un format valide, et ensuite le mot de passe entré doit avoir une longueur minimum.

AngularJS fournit FormController, qui garde une trace de chaque élément à l'intérieur d'un formulaire. Depuis la documentation AngularJS:

FormController garde une trace de tous ses contrôles et formulaire imbriqués ainsi que de leur état, comme le fait d'être valides/invalides ou brouillons/parfaits.

FormController a plusieurs propriétés comme $pristine, $dirty, $invalid, $valid, etc. Nous verrons ce que sont ces propriétés, et nous utiliserons quelques-unes de ces propriétés pour implémenter la validation de formulaire pour notre page d'enregistrement.

D'abord, on a besoin de modifier notre formulaire HTML pour ajouter les messages de validation. Dans register.html modifie le formulaire HTML comme montré.

<form class="form-signin" name="regForm">
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p>Enter a valid email.</p>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password">
        <p>Min password length is 8 characters.</p>
    </div>
    <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
</form>

Enregistre les changements, relance le serveur, et rafraîchir la page register. Tu devrais voir une page comme ceci:

Maintenant, comme on le voit sur l'écran au-dessus, les messages de validation sont visibles. On a besoin de les montrer uniquement quand l'email et le mot de passe ne sont pas valides.

AngularJS fournit une directive appelée ngShow pour le HTML basé sur une certaine expression. (Une directive AngularJS est un attribut HTML étendu fournit par AngularJS pour améliorer les capacités des éléments.) Donc, on va utiliser ngShow pour afficher le message de validation quand l'input de l'email contient des données invalides. Mais comment savons-nous que l'input d'email est invalide? Hé bien, souviens-toi des propriétés du FormController donc nous avons parlé plus tôt. FormController a une propriété appelée $invalid qui se met sur True si un contrôle est invalide. regForm.email.$invalid sera vrai si l'email entré n'est pas un email valide. Donc on va utiliser $invalid et ngShow pour montrer le message de validation. Modifie le span du message email comme montré ci-dessous:

<p ng-show="regForm.email.$invalid">Enter a valid email.</p>

Enregistre les changements, relance le serveur, et navigue jusqu'à la page d'enregistrement. Tu verras que le message de validation pour l'id email ne s'affiche plus. Maintenant, essaye d'entre des données dans l'input de l'email et un message d'erreur va apparaître. Essaye d'entrer une adresse mail valide et le message de validation sera parti. Mais le message pour la longueur minimum du mot de passe s'affiche toujours, dès le début. Nous allons arranger cela.

AngularJS fournir une autre directive appelée ng-minlength pour définir la longueur minimum pour n'importe quel contrôle d'input. On va utiliser ça pour définir la longueur minimum du champ de mot de passe et on utilisera ngShow pour montrer/cacher le message de validation. Modifie le champ du mot de passe pour inclure la directive ng-minlength comme ici:

<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">

Ensuite modifie le span du message de validation pour le champ du mot de passe comme ici:

<p ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>

Donc, si la longueur minimum du champ de mot de passe n'équivaut pas à la longueur minimum définie, alors regForm.password.$error.minlength sera défini sur "true" et le message de validation s'affichera.

Enregistre tous les changements, relance le serveur, et va voir la page d'enregistrement dans le navigateur. Essaye d'entrer une valeur pour le mot de passe, et le message de validation va s'afficher jusqu'à ce que la longueur du mot de passe soit de 8.

Maintenant, afin de mettre en évidence les éléments de l'input invalide, nous pouvons utiliser quelques styles. En utilisant la directive AngularJS appelée ngClass on peut dynamiquement mettre en avance les éléments input incorrects en utilisant la propriété $invalid. On va donc ajouter la directive ngClass à la div parent des éléments email et mot de passe.

<div class="form-group" ng-class="{ 'has-error' : regForm.email.$invalid }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p class="help-block" ng-show="regForm.email.$invalid">Enter a valid email.</p>
</div>

<div class="form-group" ng-class="{ 'has-error' : regForm.password.$invalid }">
    <label>Password</label>
    <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
    <p class="help-block" ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
</div>

Enregistre les changements, relance le serveur, et essaye de naviguer à la page d'enregistrement. Maintenant, sur les entrées invalides, le message de validation s'affiche comme ci-dessous:

Validation messages showing on registration page

Maintenant, comme vous le voyez dans l'écran ci-dessus, lorsqu'il y a des erreurs de validation, le bouton Register est désactivé. Nous allons le laissé désactivé à moins que l'email et le mot de passe entrés soient valides. AngularJS fournit une directive appelée ngDisables qui aide à désactiver des éléments basés sur une expression. Si email et password sont validés alors les modèles user.email et user.password seront mis en place. Donc, on va utiliser ces deux objets pour activer/désactiver le bouton d'enregistrement en utilisant ngDisabled. Modifie le bouton d'enregistrement HTML comme ci-dessous:

<button type="button" ng-disabled="!user.email || !user.password" class="btn btn-lg btn-primary btn-block">Register</button>

Comme tu peux le voir, ng-disabled sera vrai (true) si user.email ou user.password n'est pas faux, ce qui sera le cas uniquement quand les données sont invalides.

Enregistre les changements, relance le serveur, et rafraîchir la page d'enregistrement. Comme tu peux le voir, le bouton Register est désactivé et va le rester, jusqu'à ce qu'une adresse email valide et un mot de passe soient entrés.

Registration screen with Register button disabled

L'écran de validation de l'identification

L'implémentation de la validation sur l'écran d'identification est assez similaire à ce que nous venons de faire pour l'écran d'enregistrement. Je suggère que comme exercice, vous implémentiez vous-même la validation pour l'écran d'identification. Au cas où vous seriez coincé, jetez un oeil au code HTML modifié pour le formulaire sign in dans home.html comme montré ci-dessous:

<form class="form-signin" name="signinForm" role="form">
    <div class="form-group" ng-class="{ 'has-error' : signinForm.email.$invalid }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p class="help-block" ng-show="signinForm.email.$invalid">Enter a valid email.</p>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : signinForm.password.$invalid }">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="3">
        <p class="help-block" ng-show="signinForm.password.$error.minlength">Min password length is 8 characters.</p>
    </div>
    <label class="checkbox">
        <a href="#/register"> Sign Up</a>
    </label>
    <button ng-disabled="!user.email || !user.password" type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>
</form>

Pour conclure

Dans cette partie de tutoriel, nous avons créé la page d'enregistrement et défini les routes pour celle-ci. Nous avons aussi vu comment implémenter les validations en utilisant AngularJS pour la page d'enregistrement.

Dans la prochaine partie, on se concentrera sur l'implémentation de la fonctionnalité d'enregistrement et sur quelques autres fonctionnalités. Le code source du tutoriel ci-dessous est disponible sur GitHub.

Laissez-nous vos impressions dans les commentaire en-dessous!