Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using AngularJS and Firebase.
Creating a Web App From Scratch Using AngularJS and Firebase
Creating a Web App From Scratch Using AngularJS and Firebase: Part 3

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.

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

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

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:

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:

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

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:

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

Sign-up screen for AngularJS Firebase App

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:

Dans register.html:

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é.

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

AngularJS Firebase App register page

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:

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:

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

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.

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:

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:

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.