Introduction

This article demonstrates routing in AngularJS with MVC in a single page App. Here, we are going to create a simple SPA, which will explain you that how to do routing to HTML page and routing through Controller action.

Application structure

Here, we have placed all our AngularJS (libraries and controllers) files inside Scripts folder.

Angular

What we are going to do in this example

Define an Application module

We actually start our Application by defining an Application module SampleApp in app.js file. We will use this module in our view, using the directive ng-app.

ngRoute is a dependent module, which helps for routing in AngularJS.

  1. var SampleApp = angular.module('SampleApp', ['ngRoute']);

Routing

In the view, we have used three links for home, details and contact. Path has been mentioned in the href attribute of an anchor tag. Thus, when we click on the link, redirection will be performed by the code section given below of our app.js file.

  1. var SampleApp = angular.module('SampleApp', ['ngRoute']);
  3. SampleApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  5. $routeProvider.when("/home", {
  6. templateUrl - "/Templates/HtmlPage.html" //Load a HTML template
  7. })
  8. .when("/details", {
  9. templateUrl - "/Home/TestRedirect", //Redirect to action
  10. controller - "TestCntrl"
  11. })
  12. .when("/contact", {
  13. template - "<h2>Contact</h2><br/><div>Marimuthu Karuppaiah<br/>India</div>" //Render custom design
  14. })
  15. .otherwise({
  16. redirectTo - "/home"
  17. })
  19. $locationProvider.hashPrefix('');
  20. }]);

Config function is used to configure $routeProvider.

$routeProvider

The routing will be taken care by the Angular Service provider $routeProvider. This feature helps us to implement deep linking, which lets us utilize the Browser’s history.

$routeProvider provides two methods when() and otherwise(). These methods are used to define routing of our Angular app.

  • when() - It takes a path and a route as the parameters. Routing will be happened on matching the given patch.
  • Otherwise() - Default routing path can be configured here.
  • Path - Part of the URL (which is mentioned in View) after the # symbol.
  • route - It contains two properties - templateUrl and controller.
  • templateURL - HTML template(or controller’s action method) configured here will be loaded.
  • Controller - It defines which controller should be used with HTML template.
  • $locationProvider - HTML5 mode and hashbang mode can be enabled by this service provider. In our example, I have removed hasPrefix and set it as empty (‘’).

In our example, we have used three types of routing.

Using module in View

Here, we've mentioned an Application module, using ng-app directive and Controller, using ng-controller Directive. We've imported app.js and TestController.js in the main view.

  1. <div id="body" ng-app="SampleApp" ng-controller="TestCntrl">
  3. <ul>
  4. <li>
  5. <a href="/#/home">Home</a>
  6. </li>
  7. <li>
  8. <a href="/#/details">Details</a>
  9. </li>
  10. <li>
  11. <a href="/#/contact">Contact</a>
  12. </li>
  13. </ul>
  14. <br />
  16. <div ng-view>
  17. </div>
  18. </div>

When you click on hyperlink, config method will be called and redirected to the corresponding HTML template/view.

ng-view

We have defined a div with the Directive ng-view. This Directive helps to create a place holder, which will display our content of view.

Summary

In this article, I discussed how we do routing in different ways in AngularJS with MVC. We also saw how to create module and controller. Afterwards, we saw routes configuration in depth. In the end of this article, we went through how to display the content in the View. Along with this article, I have attached the source code of this example, which will help you to know more about routing practically.