ToDo Manager With AngularJS and Web API Part V

Okey,So far in last 4 posts, we have a basic AngularJS project with CRUD opderations on one business entity, Project. If you have missed any of them please follow the below links.

• ToDo Manager with AngularJS Part - I
• ToDo Manager with AngularJS Part - II
• ToDo Manager with AngularJS Part - III
• ToDo Manager with AngularJS Part - IV

In this post we will do some refactoring to see how we can extract the data access logic into some sort of a service.

Creating the Service

Let's create the new JavaScript file named ProjectService.js in the services folder.

Along with new JavaScript file you will also notice that I have created one copy of each of our Controllers and named them with -old. The reason being when we introduce our service, we will be refactoring our Controller and so I want you to have a copy of the old Controllers to compare side by side.

Also let's update our index.html page with the reference to the new ProjectService.js file.

Define the Service

Let's add following code into pour ProjectService.js file.

By looking at the definition it seems pretty clear that this service will be responsible for all of our backend communication ? Why is that ? There are bunch of benefits from this.

• Makes our Controller trimmed and clean
• Makes our code more maintainable and easy to extend
• Makes all the calls reusable across multiple Controllers
• Centralized place for all the logging
• Makes the Controllers more testable because data access is abstracted away in service layer

So, I am not putting actual implementation of these methods here but it will be available as part of the download project.

Refactoring the Controller

Now that all the ground work is done, let's go ahead and inject our Controller with new projectservice.

And now let's go to all the places in our Controller where we are referring $http service and replace those calls with our projectservice methods. What that means is your Controller does not need to have a direct reference to the $http service and should be removed from the signature if this was a production application.

For example our LoadProjects method now looks like this.

    function LoadProjects() {
        projectservice.GetProjects().then(function (data) {
            vm.Projects = data;
        },
        function (error) {
            vm.Error = response;
        });
    };

As you can see it is not making $http call anymore and instead invokes the GetProjects function from projectservice. This might not look like a big benefit specially looking at this sample but believe me,this becomes a big time saver on mid scale application with lot of code reuse and single location for data access and logging features.

Let's follow similar steps in our ProjectDetailsController and update method now looks like this.

    function updateProject() {
        projectservice.UpdateProject(vm.ProjectId,vm.SelectedProject).then(function (data) {
            $location.path('/Projects');
        },
      function (error) {
      });
    };

Once all the changes have been made, go ahead and run the project. Everything should keep working as it was before. We did not gain any new features out of this exercise, but believe me we are doing a big favour to ourselves and safegurding against future changes and extensions.

That's it for this series. Wait.. what ? That's it ?? What happened to the fully functional demo of ToDo Manager. No worries, we will get there but from next part onwards I will not be explaining everything step by step.