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.

ASP.NET Web Application

Select "Empty" template for now.

ASP.NET Web Application

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

ASP.NET Web Application

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".

ASP.NET Web Application

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

ASP.NET Web Application

ASP.NET Web Application

Step 3

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

ASP.NET Web Application

ASP.NET Web Application

Step 4

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

ASP.NET Web Application

Step 5

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

ASP.NET Web Application
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.