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.

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

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

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.

Understanding Asp DotNet Identity

This is the first of two series blog post that explains how to work with the new Asp .Net Identity framework. If you have used/worked with Asp .Net MembershipProvider, RoleProvider and ProfileProvider, this should sound very familiar to you. However there are major underlying changes on how you handle use Identity going forward in any .Net stack application being a web site or web services or mobile applications. But if you are new to this frameworks, this just a default user management mechanism going forward.

Alright, so let's jump right into the code.

Create Empty MVC application

Advanced HTML Editing With Emmet II

In the previous post on Sublime Text 3, we saw some advanced use cases for Emmet plug-in. In this post we will continue looking into some more advanced features of Emmet HTML authoring.

Once you get used to using Emmet and start writing complex HTML abbreviation, soon you will get confused on what element is is closing where pretty much the same thing you experience when writing actual HTML. Well Emmet has a solution for that too. You can create groups of abbreviations to better understand and organize them.

Creating Groups