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.

EmptyProject

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

AddController

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

PartialView

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.

IndexCodeChange

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

Routing_OP

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: