Sorry, it has been a while since my last post.
To finish off the first series of my AngularJS posts, I would like to talk about how I went about updating an existing person and a few other things that I have not covered up to now.
For those who have not read the previous posts you can reach them here The Beginning ,Part 2, and Part 3
Like adding a new person to our personnel record, the application will use the routing engine to determine where to go (“#” represents the routing engine) so our route this time is #/updatePerson. The route can then work out what controller and partial to use for updating.
Our route provider should look like this:
$routeProvider.when("/updatePerson/:id", {
controller: "singlePeopleController",
templateUrl: "/templates/updatePerson.html",
});
The “:id” part of the url allows the id of the person to be set. I’ve kept this in the one file but it might be better to split these up into multiple files, my intention is to do that.
The singlePeopleController then retrieves the person using the data service which I created to avoid writing the same code over and over again. So the first action is to retrieve the person using the id that you have passed in. I originally retrieved the person by accessing an person object stored in memory instead of using the api to go back to the database but I found that the update was going wrong. The details were not getting updated, the application would overwrite the new details with the old details. It was like the save was not happening at all.
After returning the right person, I proceeded with the update. The person was added to a $scope.Person. I passed the $scope.person to the updatePerson data service method. This posted the data to the api and in turn saved it to the database. If it was successful, it would return it the beginning using $window.location = “/#”.
var _updatePerson = function (existingPerson) { var deferred = $q.defer(); $http.put("/api/People", existingPerson) .then(function (result) { var updatedPerson = result.data; _people.splice(0, 0, updatedPerson); deferred.resolve(updatedPerson); }, function () { deferred.reject(); }); return deferred.promise; };
function singlePeopleController($scope, dataService, $window, $routeParams, $log) { $scope.person = null; $scope.$log = $log; //$log.log("Id : " + $routeParams.id); dataService.getPerson($routeParams.id) .then(function (person) { // Success $scope.person = person; $log.log("Person : " + person.Salutation); }, function () { alert("Cannot find person"); //$log.log("Cannot find person"); $window.location = "/#"; }); $scope.update = function () { dataService.updatePerson($scope.person) .then(function () { $window.location = "/#"; }, function () { alert("Cannot update person"); }); };
}
Instead of save() this time I use update(). Update is $scope.update a function which the form uses when the submit is called. i.e. clicking the update button.
One of the issues that I did have to solve was how to put the updated salary into the salary list for that person. I wanted to search for that person and show the historical salaries for the personnel.
person.Salary[0].Salary
I’m still not 100% sure if that is correct way of doing this but it works for now. I went to the forums asking in the Angular JS forum, a couple of people had replied saying that this was a good way to access the list and update it. I still need to do a bit work on bringing the updated value.
What I still have left to do is implement a search which allows user to search for a person and it would details of their salaries and I would like to add some testing around AngularJS with the ones that I played with is Jasmine / Karma. That’s because they are on the AngularJS site.
The only other function that I have in the data service is FindPerson, it loops around the people object stored in memory and return the found one if the id of the person matches.
function _findPerson(id) { var found = null; $.each(_people, function (i, item) { if (item.Id == id) { found = item; return false; } }); return found; }
Another thing completely off topic and I can’t get right is how to properly format code in blog post. The formatting seems to go totally awry. Anyone who knows can contact me please.
I promise I won’t leave it so long next time…my plan is to regularly update this blog so that my technical writing, communication and blog posts improve.
The Inner Donkey Sanctuary 