Angularjs routing asp.net mvc example

In this article I try to make a simple example about how to apply angularjs routing for asp.net mvc application. After this you can know how to use angularjs routing and angularjs routing for MVC. Beside that you can know how to rout with parameter, how to use ng-view.
agenda:

• Add MVC application
• Reference angularjs to MVC application
• Add angularjs router and angularjs controller
• Modify _Layout.cshtml and some mvc view to use angularjs.
• Run and see result

Add MVC application

Step 1:
From your visual studio File=> New project => Visual c# => ASP.Net Web Application=> input AngularJs_MVC_Routing to “Name:” => OK

=>  Choose MVC and then OK
Step 2:
-  Add AngularTemplates folder to root of project, this folder will be contains angularjs template of views
-  Add AngularJsRouting and AngularJsControllers folder to Scripts folder, this folders will be contains of angularjs routing and angularjs controllers

Your project structure look like as below:

 

Reference  angularjs library to MVC application

In this step add want to add angular.min.js and angular-route to my mvc application.
I dot it by add following code to header of View/Shared/_Layout.cshtml

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>  
   <script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>  

Add angularjs router and angularjs controller

Step 1: add angularjs routing 
Right click Scripts\AngularJsRouting folder add Routing.js will following code:

 var app = angular.module('MyApp', ['ngRoute']);  
 app.config([  
   '$locationProvider', '$routeProvider',  
   function ($locationProvider, $routeProvider) {  
     $locationProvider.html5Mode({  
       enabled: true,  
       requireBase: false  
     }).hashPrefix('!');  
     $routeProvider  
     .when('/', { // For Home Page  
       templateUrl: '/AngularTemplates/Home.html',  
       controller: 'HomeController'  
      })  
     .when('/Home/Contact', { // For Contact page  
       templateUrl: '/AngularTemplates/Contact.html',  
       controller: 'ContactController'  
     })  
     .when('/Home/About', { // For About page  
       templateUrl: '/AngularTemplates/About.html',  
       controller: 'AboutController'  
     })  
     .when('/Home/User/:userid', { // For User page   
       templateUrl: '/AngularTemplates/User.html',  
       controller: 'UserController'  
     })  
     .otherwise({  // This is when any route not matched => error  
       controller: 'ErrorController'  
     })  
   }]);  

Description: above code I use $routeProvider to make rounting for 4 views (Home, Contact, About, User), note that I use templateUrl for each routing, we will add that templates later. Next step we must create angularjs controllers for each.

Step 1: add angularjs controllers
Based on routing code above we must add HomeController, ContactController, AboutController, UserController and ErrorController.

Right click Scripts\AngularJsControllers folder add Controllers.js will following code: 

 var app = angular.module('MyApp');  
 app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {  
   $scope.Message = "This is User Page with query string id value = " + $routeParams.userid;  
 }]);  
 app.controller('HomeController', function ($scope) {  
   $scope.Message = "This is HOME page";  
 })  
 app.controller('AboutController', function ($scope) {  
   $scope.Message = "This is ABOUT page";  
 })  
 app.controller('ContactController', function ($scope) {  
   // $routeParams used for get query string value  
   $scope.Message = "This is Contact Page ";  
 })  
 app.controller('ErrorController', function ($scope) {  
   $scope.Message = "404 Not Found!";  
 });  

Modify _Layout.cshtml and some mvc view to use angularjs.

- Step 1: Add templates for Home, About, User and Contact

Right click AngularTemplates add
+ About.html as following

 <h2>About Page</h2>  
 <p>{{Message}}</p>   

+ Contact.html as following

 <h2>Contact Page</h2>  
 <p>{{Message}}</p>   

+ Home.html as following

 <h2>Home Page</h2>  
 <p>{{Message}}</p>   

+ User.html as following

 <h2>User Page</h2>  
 <p>{{Message}}</p>   

 
- Step 2: open HomeController.cs add controller for User by following code

  public ActionResult User(int id)  
     {  
       ViewBag.Message = "Your user page.";  
       return View();  
     }  

Right click User controller method to add User view for it

- Step 3: open View/Shared/_Layout.cshtml and modify it by add Routing.js and Controllers.js and actionlink for User view

 <!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>@ViewBag.Title - My ASP.NET Application</title>  
   @Styles.Render("~/Content/css")  
   @Scripts.Render("~/bundles/modernizr")  
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>  
   <script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>  
 </head>  
 <body ng-app="MyApp">  
   <div class="navbar navbar-inverse navbar-fixed-top">  
     <div class="container">  
       <div class="navbar-header">  
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
           <span class="icon-bar"></span>  
           <span class="icon-bar"></span>  
           <span class="icon-bar"></span>  
         </button>  
         @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })  
       </div>  
       <div class="navbar-collapse collapse">  
         <ul class="nav navbar-nav">  
           <li>@Html.ActionLink("Home", "Index", "Home")</li>  
           <li>@Html.ActionLink("About", "About", "Home")</li>  
           <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
           <li>@Html.ActionLink("User", "User/100", "Home")</li>  
         </ul>  
         @Html.Partial("_LoginPartial")  
       </div>  
     </div>  
   </div>  
   <div class="container body-content">  
     @RenderBody()  
     <hr />  
     <footer>  
       <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>  
     </footer>  
   </div>  
   @Scripts.Render("~/bundles/jquery")  
   @Scripts.Render("~/bundles/bootstrap")  
   @RenderSection("scripts", required: false)  
   <script src="~/Scripts/AngularJsRouting/Routing.js"></script>  
   <script src="~/Scripts/AngularJsControllers/Controllers.js"></script>  
 </body>  
 </html>  

Run and see result

 

 

Download AngularJs MVC Routing source code at GitHub.



Thanks for your time reading!

angularjs routing asp.net mvc

angularjs mvc example

angularjs mvc 5

angularjs mvc example download

angularjs mvc c#

angularjs mvc web api

angularjs mvc or mvvm