ToDo Manager With AngularJS and Web API Part II

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email


In the previous post we started on the journey to create AngularJS ToDo Manager application. So far we have a basic Projects setup along with the initial database desing. In this post we will apply Repository and UnitOfWork pattern on our EntityFramework context class so when our API needs to access data we can work with single interface of UnitOfWork.

So let's get started.

Create Repositories and UnitOfWork Interface and implementations

First thing first let's create our BaseRepository and interface for that.

public interface IBaseRepository<TEntity> where TEntity : class
{
    IEnumerable<TEntity> Get(Expression<Func<TEntity, bool>> filter = null,
                             Func<IQueryable<TEntity>, IOrderedQueryable<TEntity>> orderBy = null,
                             string includeProperties = "");
    TEntity GetByID(object id);
    void Insert(TEntity entity);
    void Delete(object id);
    void Delete(TEntity entityToDelete);
    void Update(TEntity entityToUpdate);
    void Reload(TEntity entityToUpdate);
}

As you can see it is a pretty standard repository that I have obtained over the period of time from different tutorials available on line. I will also provide the implementation of this repository in downloadable sample.

Next, let's create a UnitOfWork Interface and implementation for that interface as well. Following is the screen shot of the implementation. It only really has one method Save but it also exposes individual repositories that we can access through UnitOfWork instance.

Building ToDo Manager in AngularJS

Creating The Web API

Now that the database stuff has been taken care of, let's move on to building our backend services that are goint to power our ToDO Manager AngularJS application.

Add the reference of Model and Data project to the Web project.

Building ToDo Manager in AngularJS

Next, let's add a Web API Controller.

Building ToDo Manager in AngularJS

Building ToDo Manager in AngularJS

The selected scaffolding will give a basic API Controller with four actions methos to match our CRUD operations. Next we will have to update the scaffolded code to use our UnitOfWork class for CRUD operations with our databse.

Building ToDo Manager in AngularJS

I have modified the ProjectController as below.

Building ToDo Manager in AngularJS

In order to get test the controller I have already added 1 Entry into user table and 1 entry into our Project table.

Building ToDo Manager in AngularJS

Let's go ahead and run the project. The API routes have been setup as below.

Building ToDo Manager in AngularJS

So once you run the project go and navigate following URL. http://localhost:1276/api/project

You run that URL and bammm, get the following error.

Building ToDo Manager in AngularJS

This is one of those classic gotacha' that you don't realize until you hit them. It is complaining that it is not able to serialize our simple Code First entities ? Why is that ? It is because our Project class has virtual Navigtaion properties to two other classes. In order to fix this issue, you need to do couple of things.

Disable proxy creation on Context class. public ToDoContext() :base("name=ToDoDB") { this.Configuration.ProxyCreationEnabled = false; }

Add following Data Annotation on Navigation properties. Remember that you will have to add reference to Syste.Runtime.Serialization.dll

    [IgnoreDataMember]
    public ICollection<Task> Tasks { get; set; }
    [IgnoreDataMember]
    public virtual User User { get; set; }

And that's it. Let's run the project again and navigate to the URL. It will show up the data correctly this time.

Building ToDo Manager in AngularJS

Wait a second ? Is that XML ? Isn't Web API suppose to give data back in JSON format ? Yes but the reason you are getting XML is because the way browser makes a request. You open same request in Internet Explorer and you will get JSON data back.

Building ToDo Manager in AngularJS

Building ToDo Manager in AngularJS

Next, let's upate rest of the API methods to Create/Update/Delete the Project entity. Before you do that update entites to have dedicated ForeignKey properties that we can assign values to.

Building ToDo Manager in AngularJS

And of course added the Migration and updated the database.

Building ToDo Manager in AngularJS

Below screen shot shows how we can test the API using POSTMAN Google Chrome Extension.

Building ToDo Manager in AngularJS

Building ToDo Manager in AngularJS