Share
Dans la partie précédente de cette série de tutoriels, nous avons implémenté le modifier et effacer poster la fonctionnalité dans la page d'accueil. Dans cette partie du didacticiel, nous allons ajouter un indicateur de chargement Ladda dans notre application. L'ajout d'un indicateur de chargement est essentiel car il rend l'application plus interactive. Nous allons également résoudre quelques problèmes mineurs au fur et à mesure de l'avancement du didacticiel..
Commençons par cloner la partie précédente du tutoriel de GitHub.
clone de git https://github.com/jay3dec/AngularJS_Firebase_Part6.git
Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..
cd AngularJS_Firebase_Part6 npm installer
Une fois 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.
Ladda est un concept d'interface utilisateur qui fusionne un indicateur de chargement en boutons, le rendant interactif et convivial. Sur le site officiel de Ladda,
Un concept d'interface utilisateur qui fusionne les indicateurs de chargement dans l'action qui les a appelés. Principalement destiné à être utilisé avec des formulaires qui donnent aux utilisateurs un retour immédiat après soumission, au lieu de les laisser se demander pendant que le navigateur fait son travail.
Afin d'utiliser Ladda dans notre application, nous allons créer une directive AngularJS pour l'indicateur de chargement Ladda. Les directives sont l’une des fonctionnalités principales d’AngularJS et elles contrôlent le rendu du code HTML dans l’application..
S'ouvrir app / home / home.js et créez une directive simple comme indiqué ci-dessous:
Accentsconagua
.directive ('laddaLoading', [function () return link: function (portée, élément, attrs) ;]);Nous allons commencer et arrêter l'indicateur de chargement Ladda basé sur un $ scope variable appelée login.loading. Quand login.loading est vrai, nous afficherons l'indicateur de chargement, et s'il est faux, nous arrêterons l'indicateur de chargement. Donc, dans HomeCtrl, définir une variable appelée s'identifier et l'assigner à la $ scope.login variable.
var login = ; $ scope.login = login;
Ensuite, incluez les fichiers CSS et JavaScript de ladda dist dans home / home.html comme indiqué ci-dessous:
Après avoir ajouté le script et les références de style ci-dessus, modifiez le Se connecter bouton dans home.html comme montré:
Comme vous pouvez le voir dans le code ci-dessus, nous avons ajouté la directive chargement de ladda au bouton et ont passé login.loading. Nous allons définir et réinitialiser le passé dans login.loading pour basculer l'affichage de l'indicateur de chargement. Nous avons également ajouté certains styles, segoe-ui-light et bouton ladda, styliser les indicateurs de chargement Ladda.
Maintenant dans la directive lien fonction, ajoutez le code suivant pour surveiller le login.loading variable de portée et démarrer et arrêter l'indicateur en conséquence.
.directive ('laddaLoading', [function () return link: function (portée, élément, attrs) var var Ladda = window.Ladda; var ladda = Ladda.create (element [0]); // Regarder login.loading $ watch (attrs.laddaLoading, function (newVal, oldVal) // En fonction de la valeur, lance et arrête l'indicateur if (newVal) ladda.start (); else ladda.stop (); );;]);Ensuite, lorsque l'utilisateur clique sur le Se connecter bouton nous devons définir l'indicateur de chargement. Donc, dans HomeCtrl à l'intérieur de Se connecter fonction, set login.loading to true pour démarrer l'indicateur de chargement.
login.loading = true;
De même lorsque la connexion Succès ou échec callback est appelé, nous devons définir la login.loading to false pour arrêter l'indicateur de chargement.
login.loading = false;
Enregistrez toutes les modifications et redémarrez le serveur. Entrez une adresse email et un mot de passe valides et vous devriez pouvoir voir l'indicateur de chargement en action.
De même, nous pouvons ajouter le Ladda indicateur de chargement du bouton Enregistrer dans enregistrer / enregistrer.html. Inclure les références requises dans enregistrer / enregistrer.html comme montré:
Modifier le registre bouton pour inclure la directive comme indiqué:
À l'intérieur de RegisterCtrl ajouter le s'identifier variable pour définir et réinitialiser l'indicateur de chargement Ladda.
var login = ; $ scope.login = login;
Maintenant, pour activer l’indicateur de chargement lorsque l’utilisateur clique sur le bouton registre bouton, ajoutez le code suivant au s'inscrire une fonction.
login.loading = true;
Pour désactiver l’indicateur de chargement, sur Succès ou échec callback ajouter le code suivant.
login.loading = false;
Enregistrez toutes les modifications et essayez de vous inscrire pour un nouveau compte. En cliquant sur le registre bouton, vous devriez pouvoir voir l'indicateur de chargement.
De même, nous pouvons ajouter l’indicateur de chargement à la Ajouter un post page aussi. C'est exactement pareil, je ne vais donc pas le répéter. Si vous êtes bloqué, regardez le code source à la fin de ce tutoriel..
À ce stade, tout utilisateur connecté peut ajouter, modifier et supprimer toutes les publications de l'application. Mais il n'est pas vraiment juste de permettre à un utilisateur de modifier la publication d'un autre utilisateur. Nous allons donc filtrer les articles affichés sur la page d'accueil et afficher uniquement ceux qui ont été créés par l'utilisateur.
Pour interroger une donnée de Firebase, nous pouvons utiliser les API startAt et endAt. En utilisant commencer à et Fin à nous pouvons récupérer les résultats avec le point de départ et le point d'arrivée spécifiés. Mais les données que nous serions en train de transmettre commencer à devrait être une priorité. Nous devons donc commencer par définir l'adresse électronique en priorité lors de l'envoi des données à Firebase..
Alors, ouvrez addPost / addPost.js et jetez un oeil à la partie où nous poussons les données à Firebase.
fb. $ push (titre: titre, poste: poste, emailId: CommonProp.getUser ()). then (fonction (ref) console.log (réf); $ emplacement.path ('/ bienvenue'); , fonction (erreur) console.log ("Erreur:", erreur););Modifiez le code ci-dessus pour définir l'adresse électronique en priorité lorsque vous transmettez les données..
var user = CommonProp.getUser (); fb. $ push (titre: titre, poste: poste, emailId: utilisateur, '.priority': utilisateur). then (fonction (ref) console.log (ref); $ emplacement.path ('/ bienvenue' );, fonction (erreur) console.log ("Erreur:", erreur););Alors maintenant, si nous ajoutons un post dans notre application, il est ajouté avec une priorité pour l'adresse e-mail. Ensuite, ouvrez bienvenue / bienvenue.js et jetez un oeil à la partie où nous créons le $ firebase objet dans BienvenueCtrl.
var sync = $ firebase (firebaseObj);
Modifiez le code ci-dessus en ajoutant le commencer à et Fin à méthodes à la firebaseObj.
var sync = $ firebase (firebaseObj.startAt ($ scope.username) .endAt ($ scope.username));
Désormais, seuls les articles ajoutés par un utilisateur connecté particulier seront renvoyés..
Enregistrez les modifications ci-dessus et redémarrez le serveur. Supprimez tous les anciens messages de Firebase. Maintenant, essayez d'ajouter des publications après vous être connecté avec une adresse e-mail et un mot de passe valides. Une fois que quelques articles ont été créés, essayez de vous connecter en tant qu'utilisateur différent et vous ne pourrez plus voir les articles créés par l'utilisateur précédent..
Dans ce tutoriel, nous avons vu comment ajouter l'indicateur de chargement Ladda dans notre application pour rendre notre application plus interactive. Nous avons également vu comment filtrer le résultat des données lors de l'extraction de données à partir de Firebase. Dans la prochaine partie de cette série, nous allons implémenter la fonctionnalité de déconnexion et résoudre quelques problèmes existants..
Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos pensées, corrections et suggestions dans les commentaires ci-dessous!
