Click here to Skip to main content
15,122,083 members
Articles / Web Development / HTML
Article
Posted 17 Jul 2015

Stats

47.1K views
1.7K downloads
32 bookmarked

Angular Tutorial - Part 7: Understanding Single Page Applications and Angular Routing

Rate me:
Please Sign up or sign in to vote.
4.97/5 (27 votes)
17 Jul 2015CPOL6 min read
Routing in Angular and how we can create single page applications using Angular routing module

Introduction

In this article, we will discuss how about routing in Angular and how we can create single page applications using Angular routing module.

Link to complete series:

  1. Angular Tutorial - Part 1: Introduction to Angular.js
  2. Angular Tutorial - Part 2: Understanding Modules and Controllers
  3. Angular Tutorial - Part 3: Understanding and Using Directives
  4. Angular Tutorial - Part 4: Understanding and Implementing Filters
  5. Angular Tutorial - Part 5: Understanding and Implementing Services
  6. Angular Tutorial - Part 6: Building and Validating Data Entry Forms
  7. Angular Tutorial - Part 7: Understanding Single Page Applications and Angular Routing

Background

It is very rare that we have an application that contains only one single page. When I first heard the term "Single Page Application", I was rather baffled by it that how can we have everything placed in one single page of our application (yes, I was that lame once). So assuming that there could be some readers who are still at that stage where I was four years ago, I will try to explain this concept once again before talking about Angular routing.

From a traditional web development perspective, a page is a single HTML file. So if we have a static website, we essentially have a set of HTML pages linked to each other. Whenever a user navigates from one page to another, a request for the new page is sent to the server and the new requested HTML page is sent back to the client.

When we look the same concept from the server side technology perspective like ASP.NET web forms and PHP, we still find that these frameworks have a notion of pages, i.e., .ASPX, .PHP. Whenever user requests for a page, the server generates an HTML from these server pages and sends back the response HTML to the browser. Also, if we consider the MVC web frameworks like ASP.NET MVC and Ruby on Rails, these frameworks don't have a concept of physical pages but rather they invoke an action whenever a user requests for a page and then sends back the appropriate response HTML to the browser. But from the browser perspective, it is getting a new HTML page sent back to it.

So all these technologies can be said to contain multiple pages or multiple page web applications. These applications make a postback to the server on each user request and get back a new HTML page for the user. Now if we try to understand what a single page application is, it can simply be defined as an application that will load a single HTML page in the browser and on each subsequent request, the new data and new HTML is pulled from the server using AJAX. This gives the user an impression that only a single page is loaded in the browser and the needed app areas are getting refreshed/reloaded on his requests.

With this understanding of single page applications, let's try to see what Angular routing provides us. If we are using Angular routing module, we can have multiple HTML views/templates where each view is dedicated for some specific functionality. The routing module will facilitate the loading of these views asynchronously without causing any postback of the complete page. The route module will look for the routes in the URL, it will then capture the URL and check which view/template is configured to handle that route and finally, it will render that view on browser.

Using the Code

Let us now see how we can configure and use routing module in our application. The first important thing to note here is that the routing engine lives in a separate module and is also contained in a separate JavaScript file. So the first thing that we need to do is to include that file in our application.

Image 1

Next, we need to inject the dependency of ngRoute into our application.

JavaScript
myModule = angular.module('myAngularApplication', ['ngRoute']);

Next thing that we need to do is to configure the routing rules using the $routeProvidor. Let's say we want to create an application that will have three views: Home, About and Contact. We will show a simple menu bar on top of the page and three navigation links to navigate to these links. So let's first configure three routes home, about and contact using the $routeProvidor.

JavaScript
myModule = angular.module('myAngularApplication', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {

        $routeProvider
        .when("/home", {
            templateUrl: "home.html",
            controller: "homeController"
        })
        .when("/about", {
            templateUrl: "about.html",
            controller: "aboutController"
        })
        .when("/contact", {
            templateUrl: "contact.html",
            controller: "contactController"
        }).
        otherwise({
            redirect: '/home'
        });
    }]);

What the above code will do is that it will configure three routes and associate the specified view and controller for that route. Whenever a matching route is requested, the specified view will be loaded. The important thing to notice here is that I am also attaching the controller with the route too. This would mean that the specified controller will get associated with the specified view automatically and I don't have to put a ng-controller in my view itself. We are also specifying an otherwise condition so that if there is any unknown route in the URL, we push the user to our default route.

Now let us create these three view html files. These files will only contain the content of the page itself. So let's have a simple heading tag printing out the name of the view itself in these views.

Image 2

Once this is done, let's have the controllers for the respective views. For now, the controllers will only be empty. In a real world scenario, they will contain the logic for rendering the view.

JavaScript
(function () {

    var homeController = function ($scope) {

    }

    angular.module('myAngularApplication').controller('homeController', ["$scope", homeController]);

}());

(function () {

    var contactController = function ($scope) {

    }

    angular.module('myAngularApplication').controller
             ('contactController', ["$scope", contactController]);

}());

(function () {

    var aboutController = function ($scope) {

    }

    angular.module('myAngularApplication').controller('aboutController', ["$scope", aboutController]);

}());

So we have three dummy views and three dummy controllers ready with us. Now before we could use these views, we need to have the layout view of our application defined. The layout view is like the master page from the ASP.NET analogy. It defines the skeleton of my application and the common UI elements that should be present on all the pages. All the other views will be injected in this layout view by the routing engine based on the selected route.

To explain this layout view, I will use this image that I found on the Microsoft site.

Image 3

In this image, the Angular layout view is like the master page. The views that we created in the previous section are just the content pages. Based on the route, the views will get injected in the layout view and the complete tailored view will be rendered to the user. So for our application, the layout view simply contains the top level menu. The area where the child view will be injected in the layout view will be created by the ng-view directive. Let's see how our layout view looks like:

Image 4

Now we have all the required pieces in place, let's run the application and see how the routing works.

Image 5

And we have a sample application to see how routing works in Angular. The Routing module lets us create single page applications and define some basic routing for the application, but for more complex scenarios, it is not very much recommended. There is one more module UI Router from Angular where the routing is more state based rather than URL based. For complex routing scenarios, I highly recommend using UI router instead of this vanilla routing engine. But with this basic routing knowledge in place, perhaps understanding UI router will be much easier.

Points of Interest

In this article, we looked at the basics of routing in Angular and looked at how we can configure and use routing in Angular. The main intention of the article was to get familiar with how routing works. This has been written from a beginner's perspective. I hope it has been informative.

History

  • 17th July, 2015: First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rahul Rajat Singh
Architect
India India

I Started my Programming career with C++. Later got a chance to develop Windows Form applications using C#. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce/e-governance Portals and Data driven websites.

My interests involves Programming, Website development and Learning/Teaching subjects related to Computer Science/Information Systems. IMO, C# is the best programming language and I love working with C# and other Microsoft Technologies.

  • Microsoft Certified Technology Specialist (MCTS): Web Applications Development with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Accessing Data with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Windows Communication Foundation Development with Microsoft .NET Framework 4

If you like my articles, please visit my website for more: www.rahulrajatsingh.com[^]

  • Microsoft MVP 2015

Comments and Discussions

 
GeneralAngular 8 CRUD Pin
KrunalLathiya14-Oct-19 1:04
MemberKrunalLathiya14-Oct-19 1:04 
Questionhow to run Pin
kavita Dixit7-Jun-17 6:23
Memberkavita Dixit7-Jun-17 6:23 
AnswerRe: how to run Pin
charles9225-Feb-18 13:18
Membercharles9225-Feb-18 13:18 
kavita Dixit asked: How to run this project?

One way to run this is to copy this tutorial (SampleApp7) to the BooksApi ASP.NET application from Part 5. Note that in the screenshot above, the port is 52601, but for the BooksApi app it is 57386.

So run the BooksApi app from Visual Studio using F5, then when Chrome starts, paste this into address bar:
http://localhost:57386/SampleApp7/index.html#


You should see the "Angular Routing Demo" page with "Home", "About us" and "Contact us", and clicking on those will take you to the appropriate page.
GeneralMy vote of 5 Pin
Manoj Kumar Choubey2-Aug-16 6:29
professionalManoj Kumar Choubey2-Aug-16 6:29 
GeneralMy vote of 5 Pin
D V L17-Mar-16 9:22
professionalD V L17-Mar-16 9:22 
QuestionIs this book writed completely? Pin
Member 118834078-Aug-15 5:10
MemberMember 118834078-Aug-15 5:10 
QuestionError in Code? Pin
Aaginor28-Jul-15 5:25
MemberAaginor28-Jul-15 5:25 
QuestionNeed your advise on some points. Pin
Pratik Bhuva24-Jul-15 1:47
professionalPratik Bhuva24-Jul-15 1:47 
AnswerRe: Need your advise on some points. Pin
Rahul Rajat Singh24-Jul-15 1:58
professionalRahul Rajat Singh24-Jul-15 1:58 
GeneralRe: Need your advise on some points. Pin
Pratik Bhuva24-Jul-15 5:30
professionalPratik Bhuva24-Jul-15 5:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.