Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Angularjs Routing Recipe with Classic ASP.NET MVC Application

0.00/5 (No votes)
9 Dec 2015 1  
This tip describes the angularJs routing and how to configure and work 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 is really amazing and the good stuff is that you can do it quickly. One of the things in AngularJS that 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.

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 is the file which is going to have the AngularJS application module declared in it. Also, the state navigation declared. Now, let us see the configurations one by one.

   '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: '/'
    });
  }]);

Routes are used by the ngView "<div ng-view></div>" directive in Layoute.cshtml page which has the responsibility of loading the route’s content. As the routes change, the content gets automatically updated.

In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and be made available as an injectable parameter to the Controller's constructor function as $scope.

There are three controllers that I have declared:

  • homeCtrl
  • contactCtrl
  • aboutCtrl

Sample code is shown below:

'use strict';
var homeCtrl = function ($scope) {

    $scope.message = "Welcome to Home Page!";
};

angular.module('App')
        .controller('homeCtrl', homeCtrl);

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here