Routing in AngularJs (Part 7)

In this article we will see how to implement the client side routing features in MVC application using angularJs.

It is one of the cool features of AngularJs Framework.
Now we will see how to implement it by step by step

Step1: Create the blank MVC 5 application using Visual Studio 2015/2013/2012.


Step 2: Add the “HomeController“ in Controller folder.


Step3: Now generate the index view from the Home Controller. Write the code as given below

    Layout = null;

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />

Step 4: Add the “RoutDemoController “ in RoutDemo folder and keep the following code to generate the partial view


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Routing_Demo1.Controllers
    public class RoutDemoController : Controller
        // GET: RoutesDemo
        public ActionResult One()
            return PartialView();

        public ActionResult Two()
            return PartialView();

        public ActionResult Three()
            return PartialView();

Step 5: Generate the 3 separate partial views like this

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Partial View Page1</legend>
    <p>This is the dummy Text. </p>
    <p>This is the dummy Text. </p><p>This is the dummy Text. </p><p>This is the dummy Text. </p><p>This is the dummy Text. </p>

Step 6: Now keep the below code in index.cshtml file

        <li><a href="/#/RouteOne">Route One</a></li>
        <li><a href="/#/RouteTwo">Route Two</a></li>
        <li><a href="/#/RouteThree">Route Three</a></li>

    <div ng-view></div>

Note:” ng-view” is the angular directive, which is used to render the partial view in given location.
Step 7: Download the angularJs and angular-route.js from Google and kept in Scripts folder.
Step 8: Add you own javascript file in MyScript Folder and write the code like this

var app = angular.module('AngularTest', ['ngRoute']);
var configFunction = function ($routeProvider) {
        .when('/RouteOne', {
            templateUrl: 'RoutDemo/One'
        .when('/RouteTwo', {
            templateUrl: 'RoutDemo/Two'
        .when('/RouteThree', {
            templateUrl: 'RoutDemo/Three'
configFunction.$inject = ['$routeProvider'];


Step 9: Call all JavaScript library file in index page and donot forget to include “ng-view” angular directive to render the partial view. The complete code will be as given below.


Step 10: Now run the application, you will see output like given below.


In this post you learn that how to use angularJs routing features in MVC application.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.