Developing a Net Program From Scratch Using AngularJS and Firebase: Component 6

Each entry in Firebase have a special ID, which we'll utilize to draw the specific record details from Firebase. To be able to query Firebase together with the unique ID, we have to get that ID. In the last tutorial, we queried Firebase and delivered the returned result in our welcome page. Here is how we left the result : 

Inside program/welcome/welcome.js, add an editPost function which we'll call on Edit button click. Previously, we used the Firebase URL https://blistering-heat-2473.firebaseio.com/Articles to bring all posts from Firebase. To be able to attract a specific record from Firebase, we will have to append the unique ID of the post, like https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg. 

Next, we must populate the facts of the brought in posts in the modal popup. Since the details are in $range.postToUpdate, we will bind it to the modal using the ngModel directive. Add the ngModel directive to the post and name text region as shown below:

Next we'll execute the update functionality. When the article has been populated in the edit modal popup, the user can simply change the name or place and click Release. After Release has been clicked, we should upgrade the details in Firebase.

Then add another function called deletePost, which we'll call when the user verifies the post deletion. In the confirmDelete function we've already assigned the post item to $range.postToDelete. In the deletePost function we'll use the $range.postToDelete thing to refer to the post and remove it from Firebase. Here is how the deletePost function appears:

In this tutorial, we saw the best way to edit and delete the site posts added in Firebase using API systems. In the following section of the tutorial, we will make an effort to incorporate Ladda loading indexes into our program. We'll also fix some little problems existing in our program.



Posted on April 30, 2015 at 08:00 PM