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

Part 2 – Preparing the views of the Contact Page using HTML5, BootStrap 3, and AngularJS.

Complete 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

Let's Create the Front End Views:

1. Create the File Structure of the Contact
   
   Create the contact folder and under it, create controller and html folders. Follow the folder structure above.


2. Create the contactController.js under the controller folder. As of now, we have scope of contacts that holds records of contacts. This is just to have something to display on the screen. Later on, we are going to pull records from the server.


3. Create the contactsList.html under the html folder.


4. Create the contactForm.html under the html folder.
   This will be the new contact view (The C of the CRUD)


5. Update the routes.
   Open the _Layout.cshtml and insert the My Contacts link. Open the clientRoute.js. Insert the routes: /mycontacts and /mycontacts/newcontact. See the code snippet below.


6. Include the contactController.js in the BundleConfig.cs.
   Open the BundleConfig.cs. Add the ~/App/contact/controller/contactController.js in the ~/bundles/angularApp. See the code snippet below.
7. Compile the application. You should navigate at the My Contacts menu. The 2 buttons at the New Contact is not functioning as of now. We will handle that our next series.

Next: Part 3 : Creating the Back End Using ASP.NET MVC