Developing Book My Seat Application In AngularJS And ASP.NET - Usage Of Routing And RouteParams

Sachin Kalia
Oct 18, 2016
12k
0
6
Article

Here, I’ve thought to write my thoughts about hands-on Angular. This is the fourth article of the series which explains how you can manage the database and stored procedures.

This article elaborates about managing routing, and fetches the essential values from URl route using route params. Routing is managed by RouteProvider given by AngularJS and RouteParams.

Main sections of attraction here are _Layout.cshtml and main JavaScript file, where we have managed routing using RouteProvider. Kindly open this file and make the required changes as shown in the code snippet below. Also, refer to the image to locate _layout.cshtml file under solution.

Paste the following code into _Layout.cshtml and remove the existing one, as depicted below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Application/Routing.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script data-require="ui-bootstrap" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<style>
.color-me
{
color: blue;
}
</style>
}
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<section id="login">
</section>
<nav>
</nav>
</div>
</div>
</header>
<div id="body" ng-app="routingApp" class="float-center">
<nav class="navbar bg-primary navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://dotnetpiper.com/">BookYourSeat !! </a>
</div>
<ul class="nav navbar-nav navbar-dark bg-primary">
<li class="color-me"><a href="#/Home"><b>Home</b></a></li>
<li class="color-me"><a href="#/SeatBooking/100PM"><b>Slot 1.00PM</b></a></li>
<li><a href="#/SeatBooking120/120PM"><b>Slot 1.20PM</b></a></li>
<li><a href="#/SeatBooking140/140PM"><b>Slot 1.40PM</b></a></li>
<li><a href="#/SeatBooking200/200PM"><b>Slot 2.00PM</b></a></li>
<li><a href="#/ShowBookSeatDetail"><b>ShowBookSeatDetail</b></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
</div>
</nav>
<ng-view></ng-view>
@RenderSection("featured", required: false)
@RenderBody()
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<b>
<p style="text-align: left">© @DateTime.Now.Year - BookMySeat by www.DotnetPiper.com</p>
</b>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

Now, press F5 and run your application. You should get the output of home page as shown below.

Create a JavaScript file with your preferred name like I have created a main JS file with the name routing.js, under the solution. It is always a good practice if you keep your main file under different folder ( like I placed it in Application folder).

Open Routing.js file and paste the following code in that.

routingApp.config(['$routeProvider', function ($routeProvider) {
//alert("Route Initiated");
$routeProvider.
// when('/Home', { templateUrl: '/Application/login.html', controller: 'DotnetPiperController' }).
when('/SeatBooking/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).
when('/SeatBooking120/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).
when('/SeatBooking140/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).
when('/SeatBooking200/:slotNumber', { templateUrl: '/Application/booking.html', controller: 'BookingController' }).
when('/ShowBookSeatDetail', { templateUrl: '/Application/showBookingData.html', controller: 'ShowBookingDetailController' }).
when('/CustomDirective', { templateUrl: '/Application/CustomDirective.html', controller: 'OlympicController' }).
otherwise({ redirectTo: '' });
}]);

Now, open you Routing.js file and write the below code segment in order to get values from route URL.

var routingApp = angular.module('routingApp', ['ngRoute', 'ui.bootstrap']);
routingApp.controller("BookingController", ['$scope', 'dataService', '$routeParams', '$modal', '$log', function ($scope, dataService, $routeParams, $modal, $log) {
$scope.GetIndex = function (Index) {
$scope.lastIndex = Index;
}
var slotNum = $routeParams.slotNumber.substring(0, 3);
}]);

As soon as you run an application and hit the URL, http://localhost:51309/#/SeatBooking/100PM, you should get the route value as 100. Kindly refer to the image below.