Angularjs Routing Recipe with classic asp.net mvc application

Introduction

In the last two years, I have been learning angular js Module Pattern. The power of the AngularJS Framework, It’s really amazing and the good stuff is that you can do quickly. One of the thing in AngularJS is impressed me is the routing Framework. Now I want to try and share some of the knowledge that I have found what is Routing and how to configure and work with classic asp.net mvc application.

Source Code Here 

Background

In a classic ASP.NET MVC application, stepping between parts of the application usually requires a trip to the web server to refresh the entire contents of the page. However, in a Single Page Application (SPA), only elements within the page are updated giving the user a better, more responsive experience.
In classic asp.net mvc implementation may still make transitions to other sections of the application with a full page refresh,but generally a single page manages the application’s functionality through dynamic views and web service (AJAX) calls.AngularJS supports dynamic views through routes and the ngView directive and your MVC application would provide the partial views that the ngView directive will dynamically load.

Using the code

In this example, the views, called Home, About, and Contact, are simple partial views rendered by the MVC controller.

 public class HomeController : Controller  
   {  
     public ActionResult Index()  
     {  
       return View();  
     }  
     public ActionResult Home()  
     {  
       return PartialView();  
     }  
     public ActionResult About()  
     {  
       return PartialView();  
     }  
     public ActionResult Contact()  
     {  
       return PartialView();  
     }  
   }  

App.js this is the file which is going to have the AngularJS application module declared in it. Also the state navigation declared.Ok, let us see the configurations one by one.

Routes are used by the ngView directive which has the responsibility of loading the route’s content. As the routes change, the content gets automatically updated.

<div ng-view></div>.

 'use strict';  
 var app = angular.module('App',['ngRoute']);  
 app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {  
     $routeProvider.when('/', {  
       templateUrl: '/Home/Home',  
       controller: 'homeCtrl',  
     });  
     $routeProvider.when('/About', {  
       templateUrl: '/Home/About',  
       controller: 'aboutCtrl',  
     });  
     $routeProvider.when('/Contact', {  
       templateUrl: '/Home/Contact',  
       controller: 'contactCtrl'  
     });  
     $routeProvider.otherwise({  
       redirectTo: '/'  
     });  
   }]);  

This line delcares the AngularJS module and the 'ngRoute' module injected into it.

 App.config(function ($stateProvider, $urlRouterProvider) {  
 }  

The above line is the state routing configuration which will be declared using the .config function
the $routeProvider and $locationProviderare the services which are available to handle the state navigation. The state navigation declaration has the following parameters,
stateName, Template or TemplateURL and the Controller

Hide   Copy Code