ToDo Manager With AngularJS and Web API Part IV



So far in last 3 posts, we have created a basic AngularJS application that brings data from server and displays that as list. If you have missed them following are the direct links.

In this post we will extend the application to allow Create/Update/Delete from the AngularJS UI.

Creating the ADD button

<input ng-show="!vm.ShowForm"
       ng-click="vm.ShowForm=!vm.ShowForm"
       type="button" class="btn btn-primary" value="Add Project" />

As you can see it's simple input button but it is manipulating the property from the scope called ShowForm. We will use this variable to control the visibility of the form. Let's add this property along with one other object and event in our Controller.

Building ToDo Manager in AngularJS

Following is the implementation of the SaveProject method.

    function saveProject() {
        debugger;
        $http.post('/api/project',vm.Project)
           .success(function (data, status, headers, config) {
               LoadProjects();
               vm.Project = {
                   Name: "",
                   Description: "",
                   IsCompleted: false
               };
               vm.ShowForm = false;
           })
           .error(function (data, status, headers, config) {
               vm.Error = "Error adding the project";
           });
    }

What are we doing in this method ? Once user clicks save - We will pick the data bound object vm.Project and make an HTTP POST request to the server with new object. - If the call is successful, we empty the form by clearing the vm.Project object and reload the list of projects using LoadProjects().

Creating Form and Data-Bind using ng-model

Now let's make following changes in our View.

Building ToDo Manager in AngularJS

Okey, there is a lot changed here. So let's examine one by one.

  • In addition to the button I have a form whose visibility is controlled by the vm.ShowForm variable.
  • I have bound all the form fields to the relevant vm.Project object properties, highlighted in green underline.
  • I have submit button on the Form which is hooked to SaveProject method of the Controller.
  • And finally I have cancel button click hooked to vm.ShowForm variable so we can bring back the page to original state incase user decides to cancel out of the form.

Following is how it all looks in action.

Building ToDo Manager in AngularJS

I have modified the List view to use the Div with the Hyperlink template from bootstrap as below. The reason is we want to provide the Edit/Delete buttons and in future a way to navigate to the Tasks for this project.

<div class="list-group">
    <a href="#" class="list-group-item" ng-repeat="project in vm.Projects">
        <h4 class="list-group-item-heading">{{project.Name}}</h4>
        <p class="list-group-item-text">{{project.Description}}</p>
    </a>
</div>

Updated view looks like below.

Building ToDo Manager in AngularJS

Ok, now let's plug-in the Edit and Delete Buttons and their underlying implementation.

  • Add The Route

Building ToDo Manager in AngularJS

Pay close attention, the route we have has parameter in it. This shows how you can create AngularJS routes with parameters. Looking at the route looks like we need two new files, one is a new Controller and the second is the new View. Let's add them in our project.

  • Adding new View and Controller

Building ToDo Manager in AngularJS

Let's not forget to add reference of our new Controller in our index.html page.

Building ToDo Manager in AngularJS

  • Defining the Controller

Ok, now let's provide implementation for our Controller. As this View/Controller expects a parameter we will have to inject another AngularJS dependency called $routeParams.

Building ToDo Manager in AngularJS

Along with this I have defined some $scope variables that we will need. One for holding the Selected project object and one for storing the incoming route parameter ProjectID. On activation I am making an API call to bring the selected project data from server.

    function activate() {
        vm.ProjectId = $routeParams.projectID;            
        LoadProject(vm.ProjectId);
    }

    function LoadProject(id) {
        $http.get('/api/project/' + id)
            .success(function (data, status, headers, config) {
                vm.SelectedProject.Name = data.Name;
                vm.SelectedProject.Description = data.Description;
                vm.SelectedProject.IsCompleted = data.IsCompleted;
            })
            .error(function (data, status, headers, config) {
            });
    }

The return object of the service call is then being assigned as the SelectedProject variable values.

  • Defining the View

Finally, the view will be very similar to the form from the previous view but with couple of small changes. Instead of Cancel now we have Delete button. And there is no need to control the visibility of the form. Both changes highlighted in RED.

Building ToDo Manager in AngularJS

And in our previous view Projects.thml let's modify the link to pass the ProjectID as a route parameter.

Building ToDo Manager in AngularJS

And now run through click on a specific project and you will see the following Edit view.

Building ToDo Manager in AngularJS

Of course nothing happens because we have not defined the actual UpdateProject() and DeleteProject() functions. Let's define them next. Wire the events up with functions in our Controller.

Building ToDo Manager in AngularJS

Update Method

    function updateProject() {
        $http.put('/api/project/' + vm.ProjectId, vm.SelectedProject)
         .success(function (data, status, headers, config) {
             $location.path('/Projects');
         })
         .error(function (data, status, headers, config) {
         });
    }

Delete Method

    function deleteProject() {
        $http.delete('/api/project/' + vm.ProjectId)
         .success(function (data, status, headers, config) {
             $location.path('/Projects');
         })
         .error(function (data, status, headers, config) {
         });
    }

Apart from passing the data, take a closer look at the HTTP Verbs, PUT for update and DELETE for delete.

Building ToDo Manager in AngularJS

Ok let's stop here. In our next and last blog post we will refactor our Controllers a bit and extract all the data access logic into some sort of the service and that way we keep our Controllers clean.