Share
Dans la première partie de cette série, nous avons vu comment commencer à créer une application utilisant AngularJS et Firebase. Nous avons créé notre page de connexion et mis en œuvre la fonctionnalité de connexion avec Firebase comme back-end.
Dans ce tutoriel, nous allons passer à la série suivante. Nous allons créer et configurer la page d'inscription et voir comment procéder pour valider des formulaires dans AngularJS..
Commençons par cloner la première partie du tutoriel de GitHub.
clone de git https://github.com/jay3dec/AngularJS_Firebase_Part1.git
Une fois le code récupéré, accédez au répertoire du projet et installez les dépendances requises..
cd AngularJS_Firebase_Part1 npm installer
Une fois toutes les dépendances installées, démarrez le serveur..
npm start
Pointez votre navigateur sur http: // localhost: 8000 / app / # / home et vous devriez avoir l'application en cours d'exécution.
Nous allons commencer par créer une page permettant aux utilisateurs invités de s'inscrire. Aller vers AngularJS_Firebase_Part1 / app et créez un dossier appelé registre. À l'intérieur de registre dossier, créer register.html et register.js des dossiers. Voici comment register.html regards:
Application Web AngularJS & Firebase AngularJS & Firebase App!
Comme indiqué dans le code HTML ci-dessus, nous avons utilisé Bootstrap pour notre conception HTML.
À l'intérieur register.js, nous allons déclarer les routes pour que l'application accède à la vue du registre. $ routeProvider a une méthode appelée quand, que nous utiliserons pour créer une route pour notre vue de registre. Lors de la définition d'un nouvel itinéraire, nous définirons un templateUrl qui serait rendu dans le index.html. Parallèlement à cela, nous allons également définir un manettepour le nouvellement créé $ scope de la vue du registre. Un contrôleur est une logique qui contrôle une vue particulière. Voici à quoi cela devrait ressembler:
Accentsconagua
'use strict'; angular.module ('myApp.register', ['ngRoute']) // Route déclarée .config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.when ('/ register', templateUrl: 'register /register.html ', contrôleur:' RegisterCtrl ');]) // Enregistrez le contrôleur .controller (' RegisterCtrl ', [function () ]);Maintenant ouvrir app.js et inclure le module de registre monApp.register dans l'application.
'use strict'; angular.module ('myApp', ['ngRoute', 'myApp.home', 'monApp.register' // route de registre nouvellement ajoutée]). config (['$ routeProvider', fonction ($ routeProvider) // Définir la vue par défaut de notre application sur home $ routeProvider.otherwise (redirectTo: '/ home')));Pour afficher la page d'inscription, nous devons inclure register.js dans le fichier de modèle HTML principal de l'application. S'ouvrir index.html et comprennent les éléments suivants:
Redémarrez le serveur et pointez votre navigateur sur http: // localhost: 8000 / app / index.html # / register et vous devriez voir l'écran d'inscription:
Ensuite, établissons un lien entre l'écran d'inscription et l'écran d'inscription. Dans home.html et register.html Il y a un s'inscrire et se connecter href respectivement. Nous allons définir les deux sources href afin qu'elles soient accessibles à partir des deux pages.
Dans home.html:
S'inscrire
dans le register.html:
Se connecter
Lorsqu'un utilisateur entre son adresse e-mail et son mot de passe sur l'écran d'inscription, nous devons valider quelques éléments. Tout d'abord, l'identifiant de messagerie entré doit avoir un format valide, et d'autre part le mot de passe saisi doit avoir une longueur minimale..
AngularJS fournit FormController, qui garde une trace de chaque élément dans un formulaire. D'après la documentation AngularJS:
FormController garde la trace de tous ses contrôles et formulaires imbriqués, ainsi que de leur état, comme être valide / invalide ou sale / vierge.
FormController a quelques propriétés comme $ vierge, $ sale, $ invalide, $ valide, etc. Nous verrons quelles sont ces propriétés et nous en utiliserons certaines pour implémenter la validation de formulaire pour notre page d'inscription..
Premièrement, nous devons modifier notre formulaire HTML pour ajouter des messages de validation. Dans register.html modifier le formulaire HTML comme indiqué.
Enregistrez les modifications, redémarrez le serveur et actualisez la registre page. Vous devriez voir une page comme celle-ci:
Comme nous pouvons le voir dans l’écran ci-dessus, les messages de validation sont visibles. Nous devons leur montrer que quand l'email et le mot de passe ne sont pas valides.
AngularJS fournit une directive appelée ngShow pour afficher du code HTML basé sur une expression donnée. (Une directive AngularJS est un attribut HTML étendu fourni par AngularJS pour améliorer les capacités des éléments.) Nous allons donc utiliser ngShow pour afficher le message de validation lorsque le courrier électronique saisi contient des données non valides. Mais comment savoir si le courrier électronique saisi est invalide? Eh bien, rappelez-vous le FormController propriétés dont nous avons discuté plus tôt. FormController a une propriété appelée $ invalide lequel est Vrai si un contrôle est invalide. regForm.email. $ invalid serait vrai si le courrier électronique entré n’est pas valide. Nous allons donc utiliser $ invalide et ngShow pour afficher le message de validation. Modifiez la durée du courrier électronique comme indiqué ci-dessous:
Entrer un email valide.
Enregistrez les modifications, redémarrez le serveur et accédez à la page d'enregistrement. Vous verrez que le message de validation de l'identifiant de messagerie électronique ne s'affiche plus. Maintenant, essayez de saisir des données dans le courrier électronique saisi et le message d'erreur apparaîtra. Essayez d'entrer une adresse email valide et le message de validation sera parti. Mais le message pour la longueur minimale du mot de passe apparaît toujours, dans un premier temps. Corrigeons-le.
AngularJS fournit une autre directive appelée ng-minlength pour définir la longueur minimale de tout contrôle d’entrée. Nous allons l'utiliser pour définir la longueur minimale du champ mot de passe, puis utiliser ngShow pour afficher / masquer le message de validation. Modifiez le champ du mot de passe pour inclure le ng-minlength directive comme indiqué:
Ensuite, modifiez la durée du message de validation pour le champ de mot de passe comme indiqué:
La longueur minimale du mot de passe est de 8 caractères.
Ainsi, si la longueur minimale du champ de mot de passe ne correspond pas à la longueur minimale définie dans le champ de saisie du mot de passe, regForm.password. $ error.minlength sera mis à "vrai" et le message de validation sera affiché.
Enregistrez toutes les modifications, redémarrez le serveur et accédez à la page d'enregistrement. Essayez de saisir une valeur pour mot de passe et le message de validation s'affichera jusqu'à ce que la longueur du mot de passe soit de 8.
Maintenant, afin de mettre en évidence les éléments d'entrée non valides, nous pouvons utiliser certains styles. En utilisant une directive AngularJS appelée ngClass, nous pouvons mettre en évidence de manière dynamique les éléments d’entrée défectueux à l’aide du bouton $ invalide propriété. Alors ajoutez le ngClass directive à la division parent des éléments email et password.
Entrer un email valide.
La longueur minimale du mot de passe est de 8 caractères.
Enregistrez les modifications, redémarrez le serveur et essayez d’accéder à la page d’enregistrement. Maintenant, sur les entrées non valides, les messages de validation apparaissent comme suit:
Comme vous pouvez le voir dans l’écran ci-dessus, en cas d’erreur de validation, registre bouton est activé. Rendons-le désactivé à moins que l'email et le mot de passe entrés soient valides. AngularJS fournit une directive appelée ngDisabled qui permet de désactiver les éléments basés sur une expression. Si email et mot de passe sont validés alors le utilisateur.email et mot de passe de l'utilisateur les modèles seront définis. Nous allons donc utiliser ces deux objets pour activer / désactiver le bouton d’enregistrement en utilisant ngDisabled. Modifiez le bouton d'inscription HTML comme indiqué:
Comme vous pouvez le voir, ng-disabled sera vrai si utilisateur.email ou mot de passe de l'utilisateur n'est pas faux, ce qui ne sera le cas que lorsque les données sont invalides.
Enregistrez toutes les modifications, redémarrez le serveur et actualisez la page d'enregistrement. Comme vous le remarquerez, le bouton Enregistrer est désactivé et il le restera jusqu'à l'entrée d'une adresse électronique valide et d'un mot de passe..
La mise en œuvre de la validation sur l'écran de connexion est assez similaire à celle que nous avons utilisée pour l'écran de connexion. Je suggérerais que vous implémentiez vous-même la validation pour l'écran de connexion en tant qu'exercice. Au cas où vous seriez bloqué, consultez le code HTML modifié pour le se connecter forme en home.html comme indiqué ci-dessous:
Dans cette partie du didacticiel, nous avons créé la page d'inscription et configuré les itinéraires correspondants. Nous avons également vu comment implémenter des validations en utilisant AngularJS pour la page d’inscription..
Dans la partie suivante, nous nous concentrerons sur la mise en œuvre de la fonctionnalité d’inscription et de quelques autres fonctionnalités. Le code source du tutoriel ci-dessus est disponible sur GitHub.
Faites-nous savoir vos pensées dans les commentaires ci-dessous!
