Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever

NAVIGATION - SEARCH

Make Angular.js and Asp.net MVC work harmoniously

I am always a hardcore .net guy. And I really like Angular.js too. So in my recent pet project, I tried to make these two work together. I know this is not a new topic. But I want to show you how you can fully utilize MVC inside a Angular SPA. 

First, you would need to create your normal ASP.net MVC project and add angular.js into your project.

Your MVC home controller will look like 

public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

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

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

Now create your angular.js file. Let's call it app.js

"use strict";

angular.module("demo", ["ngRoute"]).
  config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    $routeProvider
      .when("/", { templateUrl: "/Home/Home" })
      .when("/contact", { templateUrl: "/Home/Contact" })
      .otherwise({ redirectTo: "/" });

    $locationProvider.html5Mode(false).hashPrefix("!");
  }]); 

Now here are things you need to be aware of. 

  1.   Since Angular V1.2 ngRoute has been separated to it's own file (angular-route.js). So don't forget to reference them in the view.
  2.   $locationProvider is optional. If you want to use html5Mode, you need to change the code to $locationProvider.html5Mode(true). You also need to configure URL rewrite at server side. Otherwise when you refresh the page, you will get 404 error. 
  3.   You should set Layout = null in your views except for your start page. You may noticed in my controller, I have Index and Home. But I only reference Home in the JavaScript. I only set the layout in the Index view otherwise you will create a recursive loop between your views. Index view will only be used as place holder unless the website can't initialize angular properly. Users will only see Home view as the start page.

This is my _laytout.cshtml looks like

<!DOCTYPE html>
<html lang="en" data-ng-app="demo">
<head>
 <!-- put your links here -->
</head>
<body>
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#!/contact">
                        <h5>Contact</h5>
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div id="body" data-ng-view class="container">
            @RenderBody()
        </div>
    </div>
</body>
</html>

Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}
<div>Loading...</div>

Home.cshtml

@{
  Layout = null;
}

<div>Home content</div>

 

These is pretty much all you need to start coding your wonderful MVC&Angular website. Happy coding.