Creating CRUD Application with ASP.NET MVC 5, AngularJS, BootStrap 3, and HTML5 - Part 1

The reason why many developers want to use AngularJS and BootStrap 3 on their application is to avail of the SPA features:

• Avoid full page refresh that reloads resources from the server. 
• Take advantage of client side caching and reduce traffic.
• The support for responsive design.

Today, I’m going to share how to create a Contact Page SPA Application using ASP.NET MVC 5, AngularJS, BootStrap 3, and HTML 5.

There are five parts of this series:
Part 1 – Preparing the Skeleton
Part 2 – Preparing the views of the Contact Page using HTML5, BootStrap 3, and AngularJS
Part 3 : Creating the Back End Using ASP.NET MVC
Part 4 : Communicating with ASP.NET MVC
Part 5 – The Add, Update, and Delete modules

Download Source Code for Part I 

Screen Shot

Part 1 - Preparing the Skeleton

Let’s get going:

1. Create ASP.NET MCV Web Application. Name it as Contacts.
2. Include the AngularJs Libraries in the Scripts folder.

You can download the package at https://angularjs.org/. For this series we only need 3 angularJs files: angular.js, angular-route.js, angular-resource.js, and angular-ui-bootstrap. In this example, I used version 1.3.5.

3. In the BundleConfig.cs, create a bundle (~/bundles/angularApp) for angular libraries like the show figure below.

3. Create the Angular Client Site Application

• Create App folder where the client application will reside (please see the folder structure below).

• Create the contactApp.js under App folder.
  You might be wondering what is the use of contactApp.js. It is the domain module of our application. Any module that we want to use, we need to include in this domain.  You may think that it is the assembly name of the application. The ngRoute and ngResource lives in another module, so we need to inject these as dependencies when we want to use them.

• Create the clientRoute.js
  The clientRoute.js handles the client side routing.  We will be needing the $routeProvider that lives in the ngRoute module so we need to inject as well.

• Create the home folder and create 2 html files. Name them as home.html and about.html. For the moment, it can contain anything as long as it denotes homes page and about page.
• Let us register the AngularJS to the whole application.  Under the Views –> Shared folder open the _Layout.cshtml and @ the html tag,  add the tag ng-app="contactApp".
• In the _Layout.cshtml, go to the navigation menus and change it to angular compliant navigation.
  
• At the Scripts Render section, include the @Scripts.Render("~/bundles/angularApp") too.
  The complete mark up for the _Layout.cshtml:

• Under Views->Home folder, open the index.cshtml. Erase everything and change it with <div class="ng-view"> </div>. Any angular related page will be displayed in this area. Actually, angularJS uses partial html page most of the time.

4. Include the  contactApp.js and clientRoute.js  in the BundleConfig.cs.

5. You are ready to run now. Press control F5.

Part 2 – Creating the Contract Page using HTML5, BootStrap 3, and AngularJS