Updating a contact using our resource :-
Yesterday in index.html we have declared save function in the form tag. Hence we will add this save function in main.js > PersonDetailController.
//trimmed code
//PersonDetailController
$scope.save = function (){
$scope.contacts.updateContact($scope.contacts.selectedPerson)
}
//trimmed code
Now we will create updateContact in our service.
//trimmed code
//ContactService
},
'updateContact': function (person) {
console.log('service called update');
}
//trimmed code
Please find the log message when we click on save button in the below screenshot.
To update contacts we need to do a bit of modification to our contactResource inorder to playaround PUT function. In main.js we will update the factory Contact where we have defined API url and add two additional paramters inside $resource. First one is map with id and second one is the update with method PUT.
//trimmed code
app.factory('Contact', function($resource) {
return $resource("API_URL", {id:'@id'}, {
update: {
method: 'PUT'
}
});
});
//trimmed code
We have our update resource ready and we will hook it up to the service.
//trimmed code
//ContactService
},
'updateContact': function (person) {
console.log('service called update');
Contact.update(person);
}
Now we are able to hook data between detail and table, make modifications. But we are not able to give proper user feedback when we click on a button. For this purpose we will ladda button. First step is to add the isSaving entry into the service. when we are saving we will isSaving = true and the point of time we finished we will udpate isSaving = false. To achieve this we will use promise. In index.html, ladda button with contacts.isSaving is already added.
//trimmed code
//ContactService
},
'updateContact': function (person) {
console.log('service called update');
self.isSaving = true;
Contact.update(person).$promise.then(function (){
self.isSaving = false;
});
//trimmed code
There is also another way to update it with resources.
such as
//trimmed code
//ContactService
},
'updateContact': function (person) {
console.log('service called update');
self.isSaving = true;
person.$update().then(function (){
self.isSaving = false;
});
//trimmed code
code :- https://github.com/praneethkumarpidugu/angular1-core/commit/7d662b95608d3757ea65a6a1970cbc5645c3f720
Delete a contact using our resource :-
Now we will add a button to remove a contact. For this purpose we will add a delete button under the Details panel heading. Just as we did with update above we will do similar modifications to remove.
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/da4f1bc9cc8ca184f27f0ce0fa4c71a1637424b5
praneethspeaks 