Angular Tutorial – Part 7: Understanding Single page applications and Angular routing

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 places 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 back, I will try to explain this concept once again before talking about the 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 send 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 send back the appropriate response HTML to the browser. But from the browser perspective it is getting a new HTML page sent back to the 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 requests the new data and new HTML is pulled from the server using AJAX. This is give 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, lets us 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 first thing that we need to do is to include that file in our application.

Angular7_1

Next we need to inject the dependency of ngRouteinto our application.

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

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 lets us create these three view html files. These files will only contain the content of the page itself. So lets have a simple heading tag printing out the name of the view itself in these views.

Angular7_2

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

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 Microsoft site.

Angular7_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. Lets see how our layout view looks like.

Angular7_4

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

Angular7_5

And we have a sample application to see how routing works in angular. The Routing module do let 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.

Point 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 familiarity with how routing works. This has been written from beginner’s perspective. I hope it has been informative.

Download the sample code from here: SampleApp7