Working with AngularJS Routing - (Project Tracking Website Part VI)

Before starting with our sixth article in the Project Tracking Website series built using AngularJS and ASP.NET Web API, we will first recap what we covered in our previous article – Working with AngularJS Services. We have seen how AngularJS services like $log and $http which is provided out-of-the-box, can help you build your applications. We have also seen how to build custom services in AngularJS and use it in our Project Tracking website.

In a large application, you never use a single controller to write the entire logic of your application. The same goes for Views. You never create a single view which will display the UI as per user preference.

Every large application will always have a number of controllers and views which perform a specific operation in your application and the user should be able to navigate between these views as per their preferences. This is where AngularJS Routing comes into the picture.

AngularJS Routing allows you to navigate between different views without refreshing the whole page and even maintains a history in the browser, so that you can go back and forth in the browser to switch across views without loading the whole page. Routing is based on Uniform Resource Locator [URL]. Routing engine captures the user request and renders the response based on the URL request which the user made. All this happens at the client side.

To work with routing, we will have to reconsider our design. We will first need a layout page, which will retain the common look and feel of all our views. This layout page may contain the header with log, menus and bread-crumbs. The footer section may contain links like Contact Us, Site Map, and Feedback etc. It can also contain the address and copyright notices of the application. We want to keep these things common so that every view in our project tracking site will have a common look and feel.

Routing in Project Tracking Application

First of all let’s configure routing in our Project Tracking site. To use AngularJS routing feature, we will have to add a reference of angular-route.js file in our layout page which will be our Home.html page. This is shown here:

Now open app.js file from the Scripts folder and modify the code as shown below –

var app = angular.module('ProjectTrackingModule', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Projects", {
        templateUrl: "ProjectManagement/ProjectDetails.html",
        controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Projects"})
});

In the above script, we are creating a module that depends on ngRoute module for routing. We are then adding a config block to configure AngularJS routing. We are injecting $routeProvider as a dependency to the function. The $routeProvider object provides the method when, using which we can define a route and assign a template URL and a controller to it. The template will be applied with data provided by the controller when specified route is encountered. The otherwise method is used when the URL is undefined, we will redirect the request to the default path which is our Projects path.

Once you are done with above configuration, we will now have to modify the ProjectDetails.html page. Let’s replace the ProjectDetails.html page with following code –

<h1>{{Title}}</h1>
<hr />
<a href="#NewProject" class="btn btn-primary">Add New Project</a>
<hr />
<table class="table table-striped table-hover">
    <thead>
        <tr class="info">
            <td>
                Project ID
            </td>
            <td>
                Project Name
            </td>
            <td>
                Start Date
            </td>
            <td>
                End Date
            </td>
            <td>
                Client Name
            </td>
            <td>
                Modify Project
            </td>
            <td>
                Delete Project
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="success" ng-repeat="proj in Projects">
            <td>
                {{proj.projectID}}
            </td>
            <td>
                {{proj.projectName}}
            </td>
            <td>
                {{proj.startDate | date:'short'}}
            </td>
            <td>
                {{proj.endDate | date:'short'}}
            </td>
            <td>
                {{proj.clientName}}
            </td>
            <td>
                <input type="button" value="Modify" class="btn btn-info" />
            </td>
            <td>
                <input type="button" value="Delete" class="btn btn-info" />
            </td>
        </tr>
    </tbody>
</table>

In the above code, we are not passing the controller. We are also not having any HTML, Body tags. It is just a template which we will be using in our layout page. We will now add the Layout.html page and write the following code:

<!DOCTYPE html>
<html lang="en" ng-app="ProjectTrackingModule">
<head>
    <title>Project Tracking Home Page</title>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <link href="CSS/amelia.bootstrap.min.css" rel="stylesheet" />
    <link href="CSS/Site.css" rel="stylesheet" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/app.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Services/ProjectsService.js"></script>
    <script src="Controllers/ProjectsController.js"></script>
</head>
<body>

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#Projects">Online Project Tracking Site</a>
        </div>
        <div class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#Projects">Projects</a>
                </li>
                <li class="active">
                    <a href="#UserStories">User Stories</a>
                </li>
                <li class="active">
                    <a href="#Employees">Employees</a>
                </li>
                <li class="active">
                    <a href="#Tasks">Tasks</a>
                </li>
                <li class="active">
                    <a href="#Comments">Manager Comments</a>
                </li>
            </ul>
            <img src="../Images/linkedin.png" alt="Linked In" style="float:right;margin-right:10px;margin-top:1%;height:30px;width:30px" />
            <img src="../Images/Twitter_bird_icon.png" alt="Twitter" style="float:right;margin-right:10px;margin-top:1%;height:30px;width:30px" />
            <img src="../Images/facebook-icon.png" alt="Facebook" style="float:right;margin-right:10px;margin-top:1%;height:30px;width:30px" />
        </div>
    </div>
    <div ng-view style="margin-left: 10%; margin-right: 10%;">
    </div>
    <div >
        <div>
            <footer>
                <div>
                    <a href="#">Site Map</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">Contact Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">Clients</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="#">Feedback</a>
                </div>
                &copy;All Rights Reserved by DotNetCurry.
                <address>
                    Ficticious Company,
                    Contact No - (222) - 5563369
                </address>
            </footer>
        </div>
    </div>
</body>
</html>

In the above Layout.html page, we have added all the common layout items like Project title, navigation menu, footer with few common links etc. Notice one thing in the code. We have added one <div> tag with the ng-view directive. This is the place where the templates of the views will be rendered when we navigate to a route.

Also notice that we are adding all the required scripts to render the ProjectDetails.html template with angular.js and angular-route.js file. Now run the page and you will see the following output:

Adding More Views

Now let’s configure other routes and change all the HTML pages similar to ProjectDetails.html page. Let’s start modifying app.js file to configure the routes –

var app = angular.module('ProjectTrackingModule', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
            templateUrl: "/Home.html",
            controller:"HomeController"
        })
        .when("/Projects", {
        templateUrl: "ProjectManagement/ProjectDetails.html",
        controller: "ProjectsController"
        })
        .when("/UserStories", {
            templateUrl: "UserStories/UserStoryDetails.html",
            controller: "UserStoriesController"
        })
        .when("/Employees", {
            templateUrl: "Employees/EmployeeDetails.html",
            controller: "EmployeesController"
        })
        .when("/Tasks", {
            templateUrl: "Tasks/ProjectTaskDetails.html",
            controller: "ProjectTasksController"
        })
    .otherwise({redirectTo:"Home"})
});

Now open UserStoryDetails.html page and modify it as shown below –

<h1>{{Title}}</h1>
<hr />
<a href="#NewUserStory" class="btn btn-primary">Add New User Story</a>
<hr />
<table class="table table-striped table-hover">
    <thead>
        <tr class="info">
            <td>
                User Story ID
            </td>
            <td>
                User Story
            </td>
            <td>
                Modify Story
            </td>
            <td>
                Delete Story
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="success" ng-repeat="stories in Stories">
            <td>
                {{stories.userStoryID}}
            </td>
            <td>
                {{stories.story}}
            </td>
            <td>
                <input type="button" value="Modify" class="btn btn-info" />
            </td>
            <td>
                <input type="button" value="Delete" class="btn btn-info" />
            </td>
        </tr>
    </tbody>
</table>

Now open EmployeeDetails.html page and replace with the code shown here –

<h1>{{Title}}</h1>
<hr />
<a href="#NewEmployee" class="btn btn-primary">Add New Employee</a>
<hr />
<form name="searchEmployeeForm" ng-submit="SearchEmployees(EmployeeName)">
    <table>
        <tr>
            <td>Enter Employee Name Or Character To Search - </td>
            <td><input type="text" required placeholder="Enter Employee Name" ng-model="EmployeeName" class="form-control" style="width:300px" /></td>
            <td><input type="submit" value="Search Employee" class="btn btn-primary" /></td>
        </tr>
    </table>


</form>
<table class="table table-striped table-hover" ng-show="Employees">
    <thead>
        <tr class="info">
            <td>
                Employee ID
            </td>
            <td>
                Employee Name
            </td>
            <td>
                Designation
            </td>
            <td>
                Contact No.
            </td>
            <td>
                EMailID
            </td>
            <td>
                Skill Sets
            </td>
            <td>
                Modify Employee
            </td>
            <td>
                Delete Employee
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="success" ng-repeat="emp in Employees | limitTo:10 | orderBy:'-employeeName'">
            <td>
                {{emp.employeeID}}
            </td>
            <td>
                {{emp.employeeName}}
            </td>
            <td>
                {{emp.designation}}
            </td>
            <td>
                {{emp.contactNo}}
            </td>
            <td>
                {{emp.eMailID}}
            </td>
            <td>
                {{emp.skillSets}}
            </td>
            <td>
                <input type="button" value="Modify" class="btn btn-info" />
            </td>
            <td>
                <input type="button" value="Delete" class="btn btn-info" />
            </td>
        </tr>
    </tbody>
</table>

Open ProjectTaskDetails.html page and replace it with the following code:

<h1>{{Title}}</h1>
<hr />
<a href="#NewTask" class="btn btn-primary">Add New Task</a>
<hr />
<table class="table table-striped table-hover">
    <thead>
        <tr class="info">
            <td>
                Project Task ID
            </td>
            <td>
                Start Date
            </td>
            <td>
                End Date
            </td>
            <td>
                Task Completion (%)
            </td>
            <td>
                Modify Task
            </td>
            <td>
                Delete Task
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="success" ng-repeat="task in Tasks">
            <td>
                {{task.projectTaskID}}
            </td>
            <td>
                {{task.taskStartDate}}
            </td>
            <td>
                {{task.taskEndDate}}
            </td>
            <td>
                {{task.taskCompletion}} &nbsp;%
            </td>
            <td>
                <input type="button" value="Modify" class="btn btn-info" />
            </td>
            <td>
                <input type="button" value="Delete" class="btn btn-info" />
            </td>
        </tr>
    </tbody>
</table>

Open ManagerCommentDetails.html and replace it with the code shown below –

<h1>{{Title}}</h1>
<hr />
<a href="#NewComment" class="btn btn-primary">Add New Comment</a>
<hr />
<table class="table table-striped table-hover">
    <thead>
        <tr class="info">
            <td>
                Comment ID
            </td>
            <td>
                Comments
            </td>
            <td>
                Modify Comment
            </td>
            <td>
                Delete Comment
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="success" ng-repeat="comment in Comments">
            <td>
                {{comment.managerCommentID}}
            </td>
            <td>
                {{comment.comments}}
            </td>
            <td>
                <input type="button" value="Modify" class="btn btn-info" />
            </td>
            <td>
                <input type="button" value="Delete" class="btn btn-info" />
            </td>
        </tr>
    </tbody>
</table>

We will now change our Home page and render in our Layout.html page. Please replace the Home.html page code with the following code –

<div style="margin-left: 10%; margin-right: 10%;">
    {{Message}}
</div>
<div style="margin-left: 10%; margin-right: 10%;">
    <div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel" style="height: 250px;">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item" style="margin-left: 15%; margin-right: 15%">
                <h2>Manage Your Projects !!</h2>
                <p>This site is used for managing projects. A single Tool to manage your project!!</p>
                <br />
                <br />
                <p style="text-align: right"><a class="btn btn-primary">More Details</a></p>
            </div>
            <div class="item" style="margin-left: 15%; margin-right: 15%">
                <h2>Add User Stories !!</h2>
                <p>You can add different user stories as a Business Administrators. Your Stories will be form your project tasks.</p>
                <br />
                <p style="text-align: right"><a class="btn btn-primary">User Stories</a></p>
            </div>
            <div class="item" style="margin-left: 15%; margin-right: 15%">
                <h2>Manager Comments !!</h2>
                <p>Manager can add comments for the tasks which are going on under your project!!</p>
                <br />
                <br />
                <p style="text-align: right"><a class="btn btn-primary">Manager Comments</a></p>
            </div>
            <div class="item" style="margin-left: 15%; margin-right: 15%">
                <h2>Employees List !!</h2>
                <p>
                    You can see all the employees details with their skill sets to assign the appropriate tasks and do efficient project management.
                </p>
                <br />
                <p style="text-align: right"><a class="btn btn-primary">Let Me Try !!</a></p>
            </div>
            <div class="item" style="margin-left: 15%; margin-right: 15%">
                <h2>Track Project Progress !!</h2>
                <p>You can track Project Progress of all employees who are working under that project. You can also see the report for individual employee and his/her performance.</p>
                <br />
                <p style="text-align: right"><a class="btn btn-primary">Try It !!</a></p>
            </div>
            <div class="item" style="margin-left: 15%; margin-right: 15%">
                <h2>Add New Projects !!</h2>
                <p>Your company can add different projects into this site and manager can assign the tasks to the users for the project.</p>
                <br />
                <p style="text-align: right"><a class="btn btn-primary">Check Out Snaps!!</a></p>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right "></span>
        </a>
    </div>
    <div class="btn-group btn-group-justified" style="margin-left:2%;margin-right:2%;">
        <div class="panel panel-primary" style="width: 30%; height: 170px; margin-top: 3%; margin-right: 20px; float: left;">
            <div class="panel-heading">
                <h3 class="panel-title">Our Mission</h3>
            </div>
            <div class="panel-body">
                Build the web application to manage the projects online through out the organization.
            </div>
        </div>

        <div class="panel panel-primary" style="width: 30%; height: 170px; margin-top: 3%; margin-right: 20px; float: left;">
            <div class="panel-heading">
                <h3 class="panel-title">Managers</h3>
            </div>
            <div class="panel-body">
                The Managers can manage and track their project progress using this site.
            </div>
        </div>
        <div class="panel panel-primary" style="width: 30%; height: 170px; margin-top: 3%; float: left;">
            <div class="panel-heading">
                <h3 class="panel-title">Purpose</h3>
            </div>
            <div class="panel-body">
                Make developers learn and build the complete website using HTML 5, CSS 3, CSS Bootstrap and Angular JS.
            </div>
        </div>
    </div>
</div>

Now run the website and see the various page outputs. You can also try using back and forward button of the browser and see the output. In the next article, we will perform the Insert/Update/Delete operations on our various pages.

Summary – In this article, we have seen how to use Angular JS routing. We have seen how to configure different routes with the help of $routeProvider and when method.

Download the entire source code of this article (Github)

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com