MVC Routing With AngularJS Routing

Anubhav Chaudhary

10y188.3k22100Article

MVC AngularJSAngularJS Routing with MVC

22 Comments

Join the conversation! Your thoughts help the community grow.

Krushna Gade8y ago
Great article ... thanks for sharing
shafeeq shafeeq9y ago
This not working with Asp.net core
Krishna Nigalye9y ago
Thank you Anubhav Chaudhary for the article.
Rahul Jain9y ago
Why you have not used _layout.cshtml file to place your menus link >? Is it a matter of choice or something different ?
Jimit Bhatt9y ago
This is really a nice article but I would like to inform those programmers who are facing issue in Step:5 in routing. If you are getting '#/! ' kind of characters in URL and not able to perform routing properly, then just use $locationProvider.hasprefix('') as shown: appmodule.config(function ($routeProvider, $locationProvider) { //locationProvider-> to clear hasprefix by default provided by angularjs $locationProvider.hashPrefix(''); $routeProvider.when('/Home', {.....................
- Krishna Nigalye9y ago
  Thanks for the fix
Murali M9y ago
What if you set $locationProvider.html5Mode(true) in route config and directly open the url 'localhost/routedemo/first'.? MVC route/Angular route will win?
Kant Nikhil10y ago
Very well explained , thanks for sharing this .
dinesh reddy10y ago
Finally..i got the solution..only angularJs 1.2.20 version works..previously i've used 1.6.0
dinesh reddy10y ago
But it didn't work. i am getting page url like this "http://localhost:1844/Home/Index#!#/firstPage". can you help me to sort out this..i am using VS 2013, MVC 4
- Jimit Bhatt9y ago
  Hi Dinesh, I already faced this problem and founded workaround for this. Please go through my above comment to use use $locationProvider.hasprefix('')
Dmk Glori10y ago
Does it work with "Layout.cshtml" page?
Bharath Peggem10y ago
Hello, In case RouteConfig.cs (MVC) and ngRoute (Angjs) both same project, so it will works or not
chirag patel10y ago
Hello, is it possible to remove # from url.
Santhakumar Munuswamy10y ago
Thanks for nice article.
Anubhav Chaudhary10y ago
Thanks Al
Manoj Kulkarni10y ago
Nice article. Thank you for sharing
Manas Mohapatra10y ago
Nice to know Angular JS routing with MVC routing :)
Debasis Saha10y ago
Nice article..
Anubhav Chaudhary10y ago
Thank Abhishek Arora and Shridhar Sharma
Shridhar Sharma10y ago
nice share
Abhishek Arora10y ago
Good article

Introduction

In this article I am going to explain how does MVC Routing and Angular Routing work when used together.

If you have worked on MVC and Angular both but not together then you must have wondered that what will happen when both are used together. As both are having controllers, both are having routings and many more things.

It has become a hot topic for interviewers as well, as they try to mix things between Angular and MVC, just for e.g. they might ask what is the difference between AngularJS Controller and MVC Controller or between MVC routing and Angular Routing, or they might ask how you can use both the routings together and which one will work first. (OOPS! I am discussing some hot questions.)

I am not going to answer all these questions as this article is not about interview questions, here I'll only answer the last question i.e. How to use them together.

To explain this I created a sample application using MVC and AngularJS.

Step 1:

Firstly, an empty MVC application was created, in the application I add a controller file to the controller folder and just created a simple ActionResult which is calling the view Index.

namespace MVCWithAngularJS.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}

Step 2:

Right click on Index() and add click on Add View, this will create a folder inside Views folder with same name as of controller and in that folder a cshtml file will be created with name Index.

Step 3:

After this I worked on the cshtml page, here I called the Angular library, provided ng-app and ng-controller, and at last created a div where ng-view is applied, ng-view will make this div a container where we can call some other pages.

<!DOCTYPE html>
<html ng-app="angualarModule">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="~/Scripts/AngularController.js"></script>
</head>
<body>
<form ng-controller="indexController">
<h2>I am Parent Page</h2>
<fieldset>
<legend>Getting data from controller</legend>
<input type="text" ng-model="name" />
</fieldset>
<a href="/#/firstPage">Call First Page</a>
<br />
<a href="/#/secondPage">Call Second Page</a>
<div ng-view></div>
</form>
</body>
</html>

But prior to the ng-view div you can see that I had created hyperlinks on which some path is defined which is having "#(hash)" with them, this # is playing the major role in this article, you can say that # is the HERO here, but why so! You will get the answer at the end of article.

Step 4:

We have created a container which will hold some pages but which pages! For that I again went back to Controller folder and added a new controller named as "RouteDemoController".

In this controller I created two ActionResult "First and Second".

namespace MVCWithAngularJS.Controllers
{
public class RouteDemoController : Controller
{
//
// GET: /RouteDemo/
public ActionResult First()
{
return View();
}
public ActionResult Second()
{
return View();
}
}
}

Again I right clicked on these Action Results and added View Pages, but this time these pages are partial pages.

Step 5:

After this I added a JavaScript file in Scripts folder, this file will work for AngularJS part.

Here I created a controller named "indexController" in which a scope object is defined, after creating the controller I came to main part i.e. Routing part.

var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.controller("indexController", function ($scope) {
$scope.name = "Anubhav";
})
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/firstPage', {
templateUrl: 'routedemo/first',
controller: 'routeDemoFirstController'
}).
when('/secondPage', {
templateUrl: 'routedemo/second',
controller: 'routeDemoSecondController'
})
})

You can see that in the routing section I had checked the URL and according to URL template and controller the template is assigned. These templates are those partial pages which we had created earlier, and these controllers are added after the routing is completed.

angualarModule.controller("routeDemoFirstController", function ($scope) {
$scope.FirstName = "Anubhav";
$scope.LastName = "Chaudhary";
})
angualarModule.controller("routeDemoSecondController", function ($scope) {
$scope.MobileNumber = "123456";
$scope.EmailID = "[email protected]";
})

Step 6:

After completing the routing part I went to the partial pages and bind the scope values to some textboxes.

First.cshtml:

<div>
<h3>First Page Displayed</h3>
</div>
<div>
<fieldset>
<legend>First Page Displayed</legend>
First Name:
<input type="text" ng-model="FirstName" />
<br />
Last Name:
<input type="text" ng-model="LastName" />
</fieldset>
</div>

Second.cshtml:

<div>
<h3>Second Page Displayed</h3>
</div>
<div>
<fieldset>
<legend>Second Page Displayed</legend>
Mobile Number:
<input type="text" ng-model="MobileNumber" />
<br />
Email ID:
<input type="text" ng-model="EmailID" />
</fieldset>
</div>

Step 7:

Now our application is created and it's time to execute it.

On running the application you can see our Index page is loaded, scope value is assigned in the textbox and two links are provided.

When I click on any of these links, this happens:

and,

Partial View is loaded for the link which we had clicked and it's textboxes are having the same value which we provided in the controller of these pages (remember routing part of Angular!).

Now just have a look at the URL.

and,

Now I'll tell why # is HERO here, prior to "#" MVC routing works and after the "#" Angular routing works i.e. first of all MVC checks which controller and which ActionResult is called and accordingly it takes you to that View page and after reaching that page when you clicked on any link our routing checks which partial view/page is called and accordingly supplies the page and controller, so # was making things separate for MVC and Angular. I hope now interview question is solved.