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:
homeCtrlcontactCtrlaboutCtrl
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.
