Creating a Web App Using ASP.NET MVC 4 and AngularJS - Setting Up

AngularJS and ASP.NET C# MVC are both MVC frameworks for creating web applications. AngularJS is a JavaScript framework for creating web applications while ASP.NET MVC is a framework for creating web applications using HTML, JavaScript and server side programming language like C# etc. In this tutorial series, we’ll see how to create a web application using both ASP.NET MVC 4 and AngularJS. This tutorial would focus on how to use AngularJS for .net developers.

Source code from this tutorial is available on GitHub.

Also read : How to do file upload using AngularJS & ASP.NET MVC 4

Also read : What is An Interface & How to Use It ?

Creating ASP.NET MVC 4 Web App

Let’s get started from scratch by creating a ASP.NET MVC 4 empty template project. Once the project has been created it shoud empty without any default code. I did this so that you can get a feel of how to get started from the very scratch and understand how thing really work. So, moving on, first we’ll add a layout to our web application. A layout is like a master page that we have in asp.net web form’s project. In our project’s view directory create a folder called Shared and inside that directory create a file called _Layout.cshtml. Here is how it looks like:

Creating a Web App Using AngularJS and ASP.NET


    
    
    

    
    
    CodeHandbook
    @Styles.Render("~/bundles/bootstrap")




    
        
            
                
                    Home
                    Sign In
                    Sign Up
                
            
            
                CodeHandbook
        
        
            @RenderBody()
        
        
            © 2015 Codehandbook, Inc.

Now there are a couple of things in the above HTML code that would be confusing to a beginner. Let’s take them one by one.

@Styles.Render("~/bundles/bootstrap")

The above code renders the bootstrap related CSS files that we would define in the BundleConfig.cs file in the App_Start folder. Let’s create the BundleConfig.cs class in the App_Start folder. Inside BundleConfig.cs we need to register the routes. Here is how it would look like:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.IgnoreList.Clear();
    bundles.Add(new StyleBundle("~/bundles/bootstrap").Include(
         "~/Style/bootstrap.min.css",
         "~/Style/jumbotron-narrow.css"));
}

Why do we need to use bundle ? Why not include the files directly like we do in web forms ?

Well, bundling helps to compress the JavaScript file and style sheets into a single file to save bandwidth and that’s why we use it.

Add the following line of code in the Global.asax file in the Application_Start :

BundleConfig.RegisterBundles(BundleTable.Bundles);

Next thing that may look odd in the above code is the @RenderBody(). This is the section of the layout page where the content is rendered each time a new request is received.

For the _Layout.cshtml to be accepted as the layout page for our application we need to define it in another file called _ViewStart.cshtml. Inside Views create a file called _ViewStart.cshtml and add the following code :

@{
     Layout = "~/Views/Shared/_Layout.cshtml";
}

Ok now we are all set with the layout code for our web application. Now let’s add a controller inside the Controllers folder called LoginController. Inside the LoginController define a method called ShowDefault which would render a default view.
Here is the ShowDefault method :

public ActionResult ShowDefault()
{
     return View();
}

Right click on the ShowDefault method and add a view with the same name, ShowDefault. Now a file should get created in the Views/Login/. Add the following code to the ShowDefault.cshtml :

@{
    ViewBag.Title = "ShowDefault";
}

    Jumbotron heading

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus
    ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
    amet risus.

    Sign up today

Set the default controller and action method to be called when the app start in the RouteConfig.cs file.

public static void RegisterRoutes(RouteCollection routes)
{
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Login", action = "ShowDefault", id = UrlParameter.Optional }
       );
}

Save the changes and try running the application and you should be able to see the asp.net MVC 4 app in action.

enter image description here

Integrating AngularJS and ASP.NET MVC 4

To include AngularJS in your ASP.NET MVC web app, download the AngularJS file and place it in the Scripts folder in your web app. Inside the BundleConfig.cs file include the angular js file too.

bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
"~/Scripts/angular.js"));

Inside the _Layout.cshtml file include the AngularJS script as shown :

@Scripts.Render("~/bundles/angularjs")

Add one more file called app.js in the Scripts folder which would be the root file of our AngularJS application.
Here is how app.js would look like:

var app = angular.module('EmployeeApp', []);

Include the app.js file as reference in the _Layout.cshtml page.

@Scripts.Render("~/bundles/app")

Inside the _Layout.cshtml file add the ngApp directive to the HTML tag.

ng-app="EmployeeApp"

And that’s it, AngularJS has been successfully added to the MVC web app and ready to use.

Also read : Creating an AngularJS app powered by Flask REST API

Wrapping It Up

In this part of the tutorial, we saw how to get started with creating a web application using AngularJS and ASP.NET MVC 4. We just created a web app using MVC 4 from the scratch. We also saw how to integrate AngularJS and ASP.NET. In the next part of the tutorial series, we’ll implement the sign in functionality for our web application.
Do let us know your thoughts, suggestion or any feature or article request in the comments below.