ToDo Manager With AngularJS and Web API Part I

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.

• Getting Started With AngularJs
• Basic Data Binding With AngularJs
• Binding JSON list in AngularJS
• Handling Click Event In AngularJS

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.

Next, let's add the Model and Data Projects. Both of them will be class library projects. The Model project will hold all the model classes and Data Project will hold the repositories and UnitOfWork implementation.

Designing application Entities

Once we have these projects created, let's add EntityFramework package to our solution. I will be using the latest stable version at the time of writing this article which happens to be 6.1.2.

Plese note that in Visual Studio 2015 the package management dialog has been modified and looks somethig like below.Verify all the settings as bleow and click install.

Once installed, let's go ahead and create our two main entities Project and Task. I will add the User entity as well but the user management will not be covered in this series, if I find some time I will do a different series for user management. As you might have guessed, we are planning to use EntityFramework Code First approach here to keep the code clean.

Following are the higherlevel designs of these classes.

public class Project
{
    [Key]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public string Description { get; set; }
    [Required]
    public DateTime DateCreated { get; set; }
    public bool IsCompleted { get; set; }
    public ICollection<Task> Tasks { get; set; }
    public virtual User User { get; set; }
}

public class Task
{
    [Key]
    public int Id { get; set; }
    [Required]
    public string Title { get; set; }
    public string Description { get; set; }
    [Required]
    public DateTime DateCreated { get; set; }
    public DateTime DueDate { get; set; }
    [Required]
    public int Status { get; set; }
    public virtual Project Project { get; set; }
    public virtual User User { get; set; }
}

public class User
{
    [Key]
    public int Id { get; set; }
    public string Username { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
    public ICollection<Project> Projects { get; set; }
    public ICollection<Task> Tasks { get; set; }
}

Next, let's update the Data project with proper context class and enable migrations on our database just in case we have to make any changes to our entites in future.

Define the connection string into the App.Cofnig file which points to your local SQL server instance.

<connectionStrings>
<add name="ToDoDB" connectionString="Data Source=DMEOWX;Initial Catalog=TodoDB;Integrated Security=SSPI;" providerName="System.Data.SqlClient" />
</connectionStrings>    

Enable Migrations

Open the Package Manager Console in Visual Studio. The easiest way to get there is by searching for that in the search box (Upper right corner of your Visual Studio). Now let's type following command to enable migrations on our database. Make sure to have yoru Data project selected in the Console.

Enable-Migrations

If there were no errors you will see Migrations folder created in Data project with default configurations.

Next,let's crate initial migration and update our database.

Add-Migration InitialCreate

Next, let's update database.

Let's head over to our SQL Server instance and verify that database is created as intended. You have new database with tables and relations between those tables as intended.

Ok, this seems like a good pit stop for this series and we will pick up at building repositories in the next blog post.