Créer une application Web à partir de zéro avec AngularJS et Firebase Partie 6

Dans la partie précédente de cette série, nous avons vu comment créer un article de blog et afficher tous les articles de blog dans la page d'accueil. Dans cette partie, nous allons implémenter les fonctionnalités d'édition et de suppression de publication..

Commencer

Commençons par cloner la partie précédente du tutoriel de GitHub.

clone de git https://github.com/jay3dec/AngularJS_Firebase_Part5.git

Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..

cd AngularJS_Firebase_Part5 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.

Editer le blog

Étape 1: Ajout des boutons Modifier et Supprimer

Nous allons commencer par ajouter des boutons d'édition et de suppression à nos articles de blog. Dans le dernier tutoriel, nous avons affiché les articles du blog dans la page d'accueil. Ajoutons un modifier et un Effacer bouton pour les articles du blog. 

Aller vers app / bienvenue / et ouvrir bienvenue.html. Nous avons utilisé le composant bootstrap list-group pour afficher les articles du blog. Ajoutez le code HTML suivant au groupe de liste composant pour afficher un modifier et un Effacer bouton.

  
le titre de l'article
 
article.post
  MODIFIER EFFACER   

Enregistrez les modifications et redémarrez le serveur. Connectez-vous en utilisant une adresse e-mail et un mot de passe valides et vous devriez pouvoir voir l'écran ci-dessous:

Étape 2: Afficher le menu contextuel Modifier au clic 

Nous allons utiliser un composant JavaScript Bootstrap appelé Modal popup. Pour utiliser les composants JavaScript Bootstrap, incluez les scripts jQuery et Bootstrap dans index.html.

Une fois les références de scripts incluses, ajoutez le code HTML contextuel suivant à app / bienvenue / bienvenue.html.

 
 
 
 ×Fermer  
Mettre à jour le message
 
 
 
 
 Titre:  
 
 Poster:  
 
 
 
 Fermer Publier 
 
 
 

Ensuite, modifiez le modifier bouton code HTML à inclure bascule de données et cible de données faire apparaître la popup sur clic.

MODIFIER

le cible de données l'attribut pointe sur l'ID de l'élément HTML à afficher dans la fenêtre contextuelle modale.

Ajoutez également un sur clic événement au modifier bouton balise d'ancrage parent comme indiqué:

Enregistrez les modifications, redémarrez le serveur et essayez de vous connecter. Lorsque vous êtes sur la page d’accueil, cliquez sur le bouton modifier bouton et vous devriez avoir le popup affiché.

Étape 3: remplir la fenêtre d'édition 

Chaque entrée de Firebase a un identifiant unique, que nous utiliserons pour récupérer les détails de l’enregistrement de Firebase. Pour interroger Firebase avec l'ID unique, nous avons besoin de cet ID. Dans le didacticiel précédent, nous avons interrogé Firebase et rendu le résultat renvoyé dans notre page d'accueil. Voici comment nous avons rendu le résultat: 

  
le titre de l'article
 
article.post
  MODIFIER EFFACER   

Maintenant enlever data-toggle = "modal" du modifier bouton. Nous allons déclencher le popup modal de notre contrôleur. 

À l'intérieur app / bienvenue / bienvenue.js, ajouter un editPost fonction que nous ferons appel à modifier cliquez sur le bouton. Plus tôt, nous utilisions l'URL Firebase https://blistering-heat-2473.firebaseio.com/Articles pour récupérer tous les articles sur Firebase. Afin d'extraire un enregistrement particulier de Firebase, nous devons ajouter l'ID unique de l'article, tel que https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg. 

Nous allons donc créer l'objet Firebase en utilisant l'URL spécifique à l'ID unique, puis le référencer pour extraire les détails de l'article en tant qu'objet. Voici comment editPost fonction regarde:

$ scope.editPost = function (id) var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); var syn = $ firebase (firebaseObj); $ scope.postToUpdate = syn. $ asObject (); $ ('# editModal'). modal (); // déclenche le pop-up modal

S'ouvrir bienvenue.html et ajoutez une directive ngClick à la modifier bouton. En ajoutant le ngClick appel de fonction à editPost, transmettez l'ID unique de l'article comme indiqué ci-dessous:

MODIFIER

Ensuite, nous devons renseigner les détails des articles récupérés dans la fenêtre contextuelle modale. Depuis les détails sont dans $ scope.postToUpdate, nous allons le lier au modal en utilisant la directive ngModel. Ajouter le ngModel directive à la poster et Titre zone de texte comme indiqué ci-dessous:

Enregistrez toutes les modifications et redémarrez le serveur. Essayez de vous connecter en utilisant une adresse email et un mot de passe valides. Une fois connecté, cliquez sur le bouton modifier bouton et vous devriez avoir la popup modale remplie avec les détails de l'article.

Étape 4: implémenter la fonctionnalité de mise à jour

Nous allons ensuite implémenter la fonctionnalité de mise à jour. Lorsque l'article a été rempli dans la fenêtre contextuelle de modification, l'utilisateur peut modifier le titre ou l'article et cliquer sur Publier. Une fois que vous avez cliqué sur Publier, nous devons mettre à jour les détails dans Firebase..

Tout d'abord, ajoutez le ngClick directive à la Publier bouton.

Publier

Ouvrir app / bienvenue / bienvenue.js et ajouter un mettre à jour appel de fonction qui est appelé Publier cliquez sur le bouton. Dans la fonction de mise à jour, nous devons créer un objet Firebase à l'aide de l'URL Firebase ajoutée par l'ID d'article unique..

var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate. $ id);

En utilisant le fb objet, créer un $ firebase objet.

var article = $ firebase (fb);

À l'aide de l'objet article, nous appelons l'API de mise à jour pour mettre à jour les modifications apportées à Firebase..

article. $ update (titre: $ scope.postToUpdate.title, article: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). puis (fonction (ref) // Mise à jour réussie, fonction ( erreur) console.log ("Erreur:", erreur););

Une fois la mise à jour réussie, fermez la fenêtre contextuelle modale. Ajoutez le code suivant pour mettre à jour le rappel de réussite.

$ ('# editModal'). modal ('masquer');

Voici le complet mettre à jour une fonction:

$ scope.update = function () var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate. $ id); var article = $ firebase (fb); article. $ update (titre: $ scope.postToUpdate.title, article: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). alors (fonction (ref) $ ('# editModal'). modal ('masquer');, fonction (erreur) console.log ("Erreur:", erreur);); 

Enregistrez toutes les modifications et redémarrez le serveur. Essayez de vous connecter en utilisant une adresse email et un mot de passe valides. Une fois connecté, essayez de modifier et de mettre à jour un message..

Supprimer le blog

Ensuite, implémentons la fonctionnalité de suppression de publication. Avant de supprimer un message, il est susceptible d'afficher une fenêtre de confirmation, alors commençons par cela.

Étape 1: Afficher la fenêtre contextuelle de confirmation de suppression

Ici aussi, nous utiliserons un modal Bootstrap pour afficher une fenêtre de confirmation. Ajoutez le code HTML suivant à bienvenue.html:

 
 
 
 
Vous allez supprimer ce message pour toujours !!
 
 
 Annuler Effacer 
 
 
 

Maintenant, modifiez le Effacer bouton pour ajouter un bascule de données et cible de données attribuer comme indiqué ci-dessous:

EFFACER

le bascule de données attribut déclenche le popup modal, et le cible de données attribut identifie le bloc HTML à afficher en tant que popup modal. 

Enregistrez les modifications et redémarrez le serveur. Connectez-vous et cliquez sur le Effacer bouton et vous devriez voir le popup confirmation de suppression.

Étape 2: Supprimer le post

Maintenant, afin de supprimer la publication de blog, nous devons extraire l'article de Firebase. Une fois que nous avons l'ID, si l'utilisateur clique sur Supprimer dans la fenêtre contextuelle modale, nous supprimons l'article de Firebase..

Alors, retirez d’abord le bascule de données attribut de la Effacer bouton, car nous allons déclencher le menu contextuel modal à partir du contrôleur une fois que l'article a été récupéré. Aussi, ajoutez un ngClick directive à la Effacer bouton.

EFFACER

À l'intérieur app / bienvenue / bienvenue.js, créer une nouvelle fonction appelée Confirmation de la suppression, ce qui déclenchera la fenêtre contextuelle modale et récupérera également l’article de Firebase. Voici ce que le Confirmation de la suppression la fonction ressemble à:

$ scope.confirmDelete = function (id) var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); var article = $ firebase (fb); $ scope.postToDelete = article. $ asObject (); $ ('# deleteModal'). modal (); 

Comme on le voit dans le code ci-dessus, nous avons créé le Base de feu objet à l'aide de l'ID d'article. En utilisant $ firebase nous avons récupéré l'objet article. En utilisant cet objet article, nous pourrons supprimer l'article de Firebase..

Ensuite, ajoutez une autre fonction appelée Supprimer le message, que nous appellerons une fois que l'utilisateur aura confirmé la suppression de l'article. dans le Confirmation de la suppression fonction nous avons déjà affecté l'objet article à $ scope.postToDelete. dans le Supprimer le message fonction nous allons utiliser le $ scope.postToDelete objet pour faire référence à l'article et le supprimer de Firebase. Voici comment Supprimer le message fonction regarde:

$ scope.deletePost = function () var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToDelete. $ id); var article = $ firebase (fb); article. $ remove (). then (function (ref) $ ('# deleteModal'). modal ('hide');, function (error) console.log ("Erreur:", erreur);) ; 

Nous avons utilisé la méthode API $ remove pour supprimer l'article de Firebase. En cas de suppression réussie, nous avons également basculé la visibilité de la fenêtre contextuelle de confirmation de suppression..

Ajouter le ngClick directive sur Effacer bouton dans la fenêtre contextuelle de suppression.

Effacer

Enregistrez toutes les modifications et redémarrez le serveur. Connectez-vous en utilisant une adresse email et un mot de passe valides. Une fois connecté, essayez de supprimer un article..

Emballer

Dans ce didacticiel, nous avons vu comment modifier et supprimer les articles de blog ajoutés à Firebase à l'aide de méthodes API. Dans la prochaine partie du didacticiel, nous essaierons d’intégrer les indicateurs de chargement Ladda dans notre application. Nous allons également corriger quelques petits problèmes existants dans notre application.

Faites-nous savoir vos pensées dans les commentaires ci-dessous!

Le code source de ce tutoriel est disponible sur GitHub.