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

Installation and Project Set-Up

Step 1:

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

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

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\1.jpg

Select Empty template for now.

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\2.jpg

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

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\3.jpg

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.

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\4.png

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

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\5.jpg

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\6.jpg

Step 3:

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

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\7.png

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\8.jpg

Step 4:

Next, include bootstrap and angular js files in the HTML page. Also add a paragraph tag with Hello world as:

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\9.jpg

Step5:

Now run the application. Press F5 to run in browser. Output will be as follows:

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\10.jpg

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

You can follow next tutorial of this series here: http://geekishor.com/angularjs-bootstrap-asp-net-mvc-part-2/

Thanks.

Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">