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.


ToDo Manager With AngularJS and Web API Part I

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In the previous few blog posts we have been exploring the different aspects of AngularJS framework. So far we have seen, how to setup a basic AngularJS application,basic data binding, basing list binding and handling user interaction with clic event. If you have missed out on any of those, following are the direct URLs to these posts.

From this post onwards,we will shift geras a bit and try to build a fully functional AngularJS application. We will be using SQL Server as our database and Asp .Net WEB API as a means of communication to the server. In the process of building this application, we will examine following concepts of AngularJS.

  • Setting up a basic AngularJS application
  • Setting up routes with ngRoute
  • Defining/Accessing settings across the application
  • Creating AngularJS services
  • Creating Views and Controllers

For the application itself, we will build a simple ToDo Manager. The application will have two main entities Project and Task. And user should be able to Create/Update/Delete Projects and Tasks. Associate tasks with the project and update status of the tasks. So let's get started. This will be a mutli series posts as we are starting to build evenryting from scratch.

Create The Basic Application

Let's start by creating a simple Empty web project in Visual Studio. Select MVC and Web API in the dialog to have those packages added automatically as part of the skeleton project.


Handling Click Event In AngularJS

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In the previous few blog posts we have been exploring the different aspects of AngularJS framework. In today's post we will explore how to handle different user interaction to events such as button's click event. If you directly arrived here and want to get basic understanding of AngularJS, please refer to following posts.

Again, I am going to work with the previously created sample and build today's demo on top of that. So let's get started.

Adding a button click Event ng-click

Let's modify our view to have a new button as following. AngularJS providers bunch of directives for handling different events. In this case we are trying to handle the click event of the button so the directive we will be using is ng-click.


Binding JSON objects in AngularJS

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this short blog post we will see how to bind list type data using AngularJS framework to your DOM/View. If you are just getting stated with the AngularJS please follow my previous two blog posts where I explain how to get stated with AngularJS.

Today, we will see how we can bind the list type data to our DOM elements. I am going to use the previously created application and just buildon top of that. So first let's start by creating some JSON object in our controller.

Adding JSON Data to Controller

For now we are just going to work with the Static data. In Future we will see how to bring the actual data from the server/api and bind them to the list. Let's declare a variable in our Controller which is a JSON Array.