Tuesday, August 20, 2013

Project Seed for ASP.Net WebAPI + AngularJS + Bootstrap

Project Seed: A 'ToDo' app built with MS ASP.Net WebAPI + MSSQL + AngularJS + Bootstrap

Poorman's Development Environment:
- Windows XP SP3
- MS Visual Studio Web Developer 2010 Express SP1 + 'Package Manager Console'
- MS SQL Server 2008 R2
- MS SQL Server Management Studio 2008 R2 10.50.1617.0
- MS .NET Framework 2.0.50727.3649


A. Restful API: Setting up ASP.Net WebAPI project

0. Steps to create a ASP.Net WebAPI project with Visual Studio:
i. File > New Project... > Visual C# > Web > ASP.NET MVC 4 Web Application
ii. Name: ToDoApp_WebAPI_MSSQL_AngularJS and click OK
iii. Select a template: Web API (Note! View engine: Razor)

1. JSON as primary data-exchange format: Paste the below code in the member function 'Register' present in the following class file 'WebApiConfig.cs'.

// Remove default XML data-exchange format, so as to use JSON
config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(
config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml"));
             
2. The Model: Now, create the ToDo's data-model class in the 'Models' folder, for example a class file called '/Models/ToDoItem.cs':

namespace ToDoApp_WebAPI_MSSQL_AngularJS.Models
{
    public class ToDoItem
    {
        public int ToDoItemID { get; set; }
        public String ToDo { get; set; }
        public byte Priority { get; set; }
        public DateTime? DueDate { get; set; }
    }
}

3. Importantly! Clean your project & Rebuild your project

4. Create controller class for the above created data-model in the 'Controllers' folder. Which will automatically creates set of default Restful resources + Database tables on MSSQL DB.

i. Controller Name: 'ToDoController'
ii. Template: API controller with read/write actions, using Entity Framework
iii. Model class: ToDoItem (ToDoApp_WebAPI_MSSQL_angularJS.Models)
iv. Data context class: <New data context...> ToDoApp_WebAPI_MSSQL_AngularJS.Models.ToDoContext

5. Now, run the project & test your web app on your faviourate web-browser. For example with this URL:
http://localhost:????/api/todo


B. Pseudo dataset: Generate pseudo dataset on MSSQL database

1. Enable-Migrations with the database using the "Package Manager Console". Which will create a 'Configuration.cs' after creating a detected Database for your application.

2. Now, Add your logic for generating pseudo dataset using your data-model in "Configuration.cs", as below:

protected override void Seed(ToDoApp_WebAPI_MSSQL_AngularJS.Models.ToDoContext context)
        {
            var r = new Random();
            var items = Enumerable.Range(1, 15).Select(o =>
                            new ToDoItem
                            {
                                ToDo = o.ToString(),
                                Priority = (byte)r.Next(10),
                                DueDate = new DateTime(2012, r.Next(1,12), r.Next(1,28))
                            }
                        ).ToArray();
            context.ToDoItems.AddOrUpdate(item => new { item.ToDo }, items);
        }
     
3. Now, run Update-Database command in "Package Manager Console" in-order to inject random dataset to MSSQL database.

4. Now, run the Project & test your web app on a web-browser. For example with this URL:
http://localhost:????/api/todo


C. Frontend: AngularJS + Bootstrap setup  

1. With the help of "Package Manager Console", download the necessary libraries for your frontend:
i. Install-Package angularjs
ii. Install-Package Twitter.Bootstrap

2. Importantly! Clean your project & Rebuild your project

3. Create an 'index.html' file in the projects root directory, using the below html:

<!DOCTYPE html>
<html ng-app="ToDoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap/bootstrap.css" />
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>

4. Create an 'app.js' file in the '/Scripts' directory, using the below content:

//Constructor
var ToDoApp = angular.module('ToDoApp', ['ngResource']).config(
function ($routeProvider) {
$routeProvider.
when('/', { controller: ListController, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
}
);

//Factory for configuring the DB query
ToDoApp.factory('ToDo_Resource', function ($resource) {
return $resource(
'/api/todo/:id',
{ id: '@id' },
{ update: { method: 'PUT'} }
);
});

//Controller
var ListController = function ($scope, $location, ToDo_Resource) {
$scope.items = ToDo_Resource.query();
};

5. Create a 'list.html' file in the projects root directory, using the below bootscrap components:

<table class="table table-striped table-condensed table-hover">
    <thead>
        <th>
            ToDo's
        </th>
        <th>
            Priority
        </th>
        <th>
            DueDate
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
            <td>
                {{item.ToDo}}
            </td>
            <td>
                {{item.Priority}}
            </td>
            <td>
                {{item.DueDate | date:mediumDate}}
            </td>
        </tr>
    </tbody>
</table>

6. Now, run the Project & test your web app on a web-browser. For example with this URL:
http://localhost:????/index.html


Seed mercurial-repository:
This entire project-seed can be cloned from Bitbucket, here's the repository's URL:
https://bitbucket.org/nshetty/todoapp_asp.netwebapi_mssql_angularjs_bootstrap

Related references:

No comments:

Post a Comment