Share
Dans la partie précédente de la série, nous avons conçu et implémenté une interface pour créer un article de blog avec un titre et un article. Dans cette partie, nous verrons comment récupérer les articles de blog enregistrés dans Firebase et les afficher sur notre page d'accueil..
Commençons par cloner la partie précédente du tutoriel de GitHub.
clone de git https://github.com/jay3dec/AngularJS_Firebase_Part4.git
Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..
cd AngularJS_Firebase_Part4 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.
Auparavant, lorsque nous avions inséré des données dans Firebase, nous les avions simplement transférées vers l'URL de Firebase. Elles étaient répertoriées de manière aléatoire dans Firebase. Mais lorsque les données augmentent et que tout est transféré à Firebase, il devient difficile de maintenir les données. Nous allons donc essayer d'organiser nos données, ce qui facilitera l'interrogation à partir de Firebase.
Connectez-vous à Firebase et accédez à Gérer l'application. L'URL de Firebase devrait apparaître sur l'écran du tableau de bord, comme indiqué ci-dessous:
Cliquez sur l'icône plus à côté de l'URL et créez un sous-noeud appelé Des articles avec une valeur 0 et cliquez sur Ajouter. Une fois qu'un sous-noeud est ajouté, vous devriez avoir quelque chose comme:
Comme vous pouvez le constater, nous avons classé les Des articles données séparément, de sorte qu'il sera facile d'interroger et de récupérer des données.
Maintenant, naviguez vers addPost.js et modifiez l'URL de Firebase en https://blistering-heat-2473.firebaseio.com/Articles. Ajoutons également l'identifiant de messagerie de l'utilisateur associé à l'article du blog. Nous pouvons obtenir l'ID de courrier électronique du CommonProp service que nous avons écrit plus tôt. Il suffit d'injecter le CommonProp service dans le AddPostCtrl manette.
Accentsconagua
.contrôleur ('AddPostCtrl', ['$ scope', '$ firebase', 'CommonProp', fonction ($ scope, $ firebase, CommonProp) Tout en poussant les données, incluez également le paramètre email ID. Voici le modifié AddPost une fonction:
$ scope.AddPost = function () var title = $ scope.article.title; var post = $ scope.article.post; var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles"); var fb = $ firebase (firebaseObj); fb. $ push (titre: titre, poste: poste, emailId: CommonProp.getUser ()). then (fonction (ref) console.log (réf);, fonction (erreur) console.log (" Erreur: ", erreur);); Enregistrez toutes les modifications et redémarrez le serveur. Essayez de vous connecter avec une adresse e-mail et un mot de passe valides, puis créez un article de blog. Maintenant, si vous regardez le tableau de bord Firebase, vous devriez voir les détails de la publication dans Des articles sous-noeud comme indiqué:
Ensuite, ajoutons un composant du groupe de listes Bootstrap pour afficher les publications créées par un utilisateur. Aller vers app / bienvenue / bienvenue.html et à l'intérieur de la div avec classe récipient, après le message de bienvenue, ajoutez le composant du groupe de listes comme indiqué:
Titre Titre
Contenu d'un article de blog
Enregistrez les modifications et redémarrez le serveur. Essayez de vous connecter avec une adresse e-mail et un mot de passe valides. Lorsque vous êtes sur la page d'accueil, vous devriez voir quelque chose comme:
Ensuite, interrogons les données de Firebase en utilisant l’URL https://blistering-heat-2473.firebaseio.com/Articles..
Ouvrir bienvenue.js, et à l'intérieur du BienvenueCtrl le contrôleur crée un objet Firebase en utilisant l’URL ci-dessus.
var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles");Nous allons utiliser $ firebase obtenir des données de Firebase. Selon les documents officiels:
le $ firebase wrapper est utilisé pour la synchronisation des données Firebase avec les applications angulaires. Il contient des méthodes d'assistance pour écrire des données sur Firebase, ainsi que des outils pour lire des données dans des collections ou des objets synchronisés..var sync = $ firebase (firebaseObj);
Pour obtenir des données à partir de l'URL Firebase sous forme de tableau synchronisé, AngularFire fournit une méthode appelée $ asArray. Appelons le $ asArray méthode sur l'objet de synchronisation et l'assigner à un autre $ scope variable.
$ scope.articles = sync. $ asArray ();
Ajoutez également un élément de paragraphe sur la page d'accueil, comme indiqué:
des articles
Enregistrez toutes les modifications et redémarrez le serveur. Connectez-vous avec une adresse e-mail et un mot de passe valides. Une fois sur la page d’accueil, vous devriez avoir le résultat de la requête sous forme de données JSON dans $ scope.articles élément de liaison.
["emailId": "[email protected]", "post": "Ceci est mon premier post sur cette plate-forme.", "titre": "Bonjour !!" , "emailId": "[email protected]", "post": "Bonne nuit pour ce soir", "titre": "GoodBye"]
Depuis que nous avons interrogé les données de Firebase dans la $ scope.articles variable, nous pouvons lier les données à notre élément de liste de pages d'accueil. Nous utiliserons la directive AngularJS ngRepeat pour répéter les données dans le groupe de listes Bootstrap. Voici la liste du groupe HTML:
Titre Titre
Contenu d'un article de blog
Ajouter le ngRepeat directive comme indiqué à la div principale.
ng-repeat = "article dans articles"
le ngRepeat directive itère sur la variable articles et crée le code HTML dans le groupe div de la liste pour chaque élément. Alors, modifiez le code HTML affiché:
le titre de l'article
article.post
Enregistrez les modifications et redémarrez le serveur. Connectez-vous à l'aide d'une adresse e-mail et d'un mot de passe. Une fois sur la page d'accueil, vous devriez voir la liste des articles ajoutés à partir de la page Ajouter un message..
Maintenant, accédez à http: // localhost: 8000 / app / # / addPost et ajoutez un autre message. Comme nous n’avons pas encore ajouté de redirection vers la page d’accueil après la création d’un message, accédez manuellement à http: // localhost: 8000 / app / # / welcome et vous devriez le voir dans la liste..
Une fois le message ajouté, nous devons rediriger l'utilisateur vers la page d'accueil. Ouvrir app / addPost / addPost.js et injecter $ location dans le AddPostCtrl manette. Sur fb. $ push rappel de succès, ajoutez une redirection à la Bienvenue page.
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););S'ouvrir app / bienvenue / bienvenue.html et modifier le lien Ajouter un message href pour rediriger vers la page Ajouter un message comme indiqué:
Ajouter un message
Enregistrez toutes les modifications et redémarrez le serveur. Connectez-vous avec une adresse e-mail et un mot de passe valides et essayez de créer un article. Vous devriez pouvoir le voir sur la liste de la page d'accueil..
Dans ce didacticiel, nous avons vu comment interroger les données stockées dans Firebase à l'aide de AngularFire. Nous avons créé une interface pour rendre la publication de blog créée par un utilisateur sous forme de liste sur la page d'accueil. Nous avons également corrigé quelques petits problèmes.
Dans la prochaine partie de la série, nous allons passer au niveau suivant en implémentant quelques fonctionnalités supplémentaires telles que l'édition et la suppression des articles de blog..
Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos pensées dans les commentaires ci-dessous!
