Routing in AngularJs (Part 7)

In this article we will see how to implement the client side routing features in asp.net 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 asp.net 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>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

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>
</fieldset>

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



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

    <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) {
    $routeProvider
        .when('/RouteOne', {
            templateUrl: 'RoutDemo/One'
        })
        .when('/RouteTwo', {
            templateUrl: 'RoutDemo/Two'
        })
        .when('/RouteThree', {
            templateUrl: 'RoutDemo/Three'
        });
}
configFunction.$inject = ['$routeProvider'];

app.config(configFunction);

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.