Post
Ask Question

MVC Routing With AngularJS Routing

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.

  1. namespace MVCWithAngularJS.Controllers  
  2. {  
  3.     public class HomeController : Controller  
  4.     {  
  5.         //  
  6.         // GET: /Home/  
  7.   
  8.         public ActionResult Index()  
  9.         {  
  10.             return View();  
  11.         }  
  12.     }  
  13. }  

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.

  1. <!DOCTYPE html>  
  2. <html ng-app="angualarModule">  
  3. <head>  
  4.     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>  
  5.     <script src="~/Scripts/AngularController.js"></script>  
  6. </head>  
  7. <body>  
  8.     <form ng-controller="indexController">  
  9.         <h2>I am Parent Page</h2>  
  10.         <fieldset>  
  11.             <legend>Getting data from controller</legend>  
  12.             <input type="text" ng-model="name" />  
  13.         </fieldset>  
  14.         <a href="/#/firstPage">Call First Page</a>  
  15.         <br />  
  16.         <a href="/#/secondPage">Call Second Page</a>  
  17.         <div ng-view></div>  
  18.     </form>  
  19. </body>  
  20. </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".

  1. namespace MVCWithAngularJS.Controllers  
  2. {  
  3.     public class RouteDemoController : Controller  
  4.     {  
  5.         //  
  6.         // GET: /RouteDemo/  
  7.   
  8.         public ActionResult First()  
  9.         {  
  10.             return View();  
  11.         }  
  12.   
  13.         public ActionResult Second()  
  14.         {  
  15.             return View();  
  16.         }  
  17.   
  18.     }  
  19. }  

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.

  1. var angualarModule = angular.module("angualarModule", ['ngRoute']);  
  2. angualarModule.controller("indexController", function ($scope) {  
  3.     $scope.name = "Anubhav";  
  4. })  
  5. angualarModule.config(function ($routeProvider) {  
  6.     $routeProvider.  
  7.     when('/firstPage', {  
  8.         templateUrl: 'routedemo/first',  
  9.         controller: 'routeDemoFirstController'  
  10.     }).  
  11.     when('/secondPage', {  
  12.         templateUrl: 'routedemo/second',  
  13.         controller: 'routeDemoSecondController'  
  14.     })  
  15. })  

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.

  1. angualarModule.controller("routeDemoFirstController", function ($scope) {  
  2.     $scope.FirstName = "Anubhav";  
  3.     $scope.LastName = "Chaudhary";  
  4. })  
  5. angualarModule.controller("routeDemoSecondController", function ($scope) {  
  6.     $scope.MobileNumber = "123456";  
  7.     $scope.EmailID = "[email protected]";  
  8. })  

Step 6:

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

First.cshtml:

  1. <div>  
  2.     <h3>First Page Displayed</h3>  
  3. </div>  
  4. <div>  
  5.     <fieldset>  
  6.         <legend>First Page Displayed</legend>  
  7.         First Name:  
  8.         <input type="text" ng-model="FirstName" />  
  9.         <br />  
  10.         Last Name:  
  11.         <input type="text" ng-model="LastName" />  
  12.     </fieldset>  
  13. </div>  

Second.cshtml:

  1. <div>  
  2.     <h3>Second Page Displayed</h3>  
  3. </div>  
  4. <div>  
  5.     <fieldset>  
  6.         <legend>Second Page Displayed</legend>  
  7.         Mobile Number:  
  8.         <input type="text" ng-model="MobileNumber" />  
  9.         <br />  
  10.         Email ID:  
  11.         <input type="text" ng-model="EmailID" />  
  12.     </fieldset>  
  13. </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.


Similar Articles