Angular, BootStrap And ASP.NET MVC - Part One

In this tutorial series, we are going to learn AngularJS as Client side, Bootstrap for layout styling, and ASP.NET MVC as Server side.

Installation and project setup

Step 1

We are using Visual Studio for this tutorial series but you can use any editor you wish.

Open Visual Studio and create new project. Select ASP.NET Web Application under Web (Visual C#). Name it “DemoForms” and click OK.



Select "Empty" template for now.



Empty project is now set up. Here’s what you will see in Solution Explorer.



Step 2

Now, we are going to install all the required packages and libraries. Right click on the project form Solution Explorer and select "Manage NuGet Packages".



Search for AngularJS and install it. Similarly, install bootstrap.





Step 3

Now, we are done with setup. Let’s add an HTML page. Right click and Add > Html Page. Name it index.html.





Step 4

Next, include bootstrap and AngularJS files in the HTML page. Also, add a paragraph tag with Hello world.



Step 5

Now, run the application. Press F5 to run in browser. The output will be as following.


We are done with project set up and installation of libraries. In the next part of this series, we are going to learn the basics of AngularJS and start developing in depth.

Next tutorial is here.