Understanding AngularJS Routes And Views With An Example

Routing in AngularJS enables us to load multiple views within a single page application.

As an application grows in size, so does the number of views and it becomes increasingly difficult to manage them. It helps in organizing the views into separate folders, based on their functionality. Routing can then be used to load different parts of the app into the single page application’s app container.

Routing helps you in dividing your application in to logical views and bind them to their corresponding controllers. Thus, we can create different URLs  for different views. Each such URL is called a route.

routing-in-angularjs

$routeProvider

AngularJS provides the magic of routing by making use of an inbuilt service called $routeProvider. Application routes in AngularJS are declared using $routeProvider, which basically is the provider of $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser.

AngularJS routes enables you to show different content depending on what route is chosen. A route is specified in the URL after the hash(#) sign. Thus, the following URL’s all point to the same AngularJS application, but each point to different routes:

When the browser loads these links, the same AngularJS application will be loaded (located at http://myapp.com/index.html), but AngularJS will look for the route (the part of the URL after #) and decide what HTML template to show. Let’s try to understand this using an example.

In the above code, we created an app called routeApp along with three routes “customers”, “orders” and “login”. We were able to do that using the inbuilt $routeProvider in the application’s config method. $routeProvider provides  two methods .when() and.otherwise().

If you were to read this configuration in plain English, it is like telling AngularJS that when ever you come across “/customers” route, load the template from the following location “templates/customers.html” and bind “CustomersController” to it. Same is the case with Orders and Login routes. And finally, if you come across any URL that is not defined in the config, redirect the user to “Login” page. Isn’t that simple?

Lets put the above code into the context of a simple application and understand how it works:

Including the AngularJS Route Module

The first thing to observe in the above code is the extra JavaScript file included inside the head section.

The AngularJS Route module is contained in its own JavaScript file. To use it we must include in our AngularJS application.

Adding dependency on the AngularJS Route Module

The second thing to observe is that, the applications’ AngularJS module (called routeApp) declares a dependency on the AngularJS route module.

The application’s module needs to declare this dependency in order to use the ngRoute module.

The ngView Directive

The third thing to observe is the use of the ng-view directive. Inside the div with the ngView directive, the HTML template specific to the given route will be displayed. ng-view acts as a container for the HTML template to be loaded.

Links to Routes

The final thing to observe in the above example are the two links in the HTML page:

Notice how the part of the URLs after the # matches the routes configured on the $routeProvider. When one of these links is clicked, the URL in the browser window changes, and the div with the ngView directive will show the HTML template matching the route path.

That is all about routing and how different views are loaded along with their controllers. The next important thing to learn in Routing is passing of parameters.

Route Parameters

Imagine you are developing an e-commerce app and you have a page that displays a list of products. Now when ever a user clicks on any of those products, you would need to take them to a product page where you would provide more details about the product and possibly allow the user to add product to the cart.

In a scenario like above, you would have a single view called may be “product.html” which is bound to a controller called “productController“. The controller would expect a product id from the previous page so it can fetch details of that product and display them in the view. To deal with situations like this, AngularJS allows you to add parameters to the URL. Lets understand that using an example.

Below is an example of a route path with parameter. This is how you would link to a specific product.

In the code above, the parameter part is 12345 which is specific to the product the URL points to.  Along with the code above, we need to configure the route to take parameters. It is done as below:

Notice “:param” in the route definition. This is how AngularJS knows that 12345 is a parameter and add it to $routeParams. When a parameter is added to $routeParams, we can easily extract the value in the controller using the following code:

Notice that we would need to inject $routeParams as a dependency to extract the value from it. Also, the name “param” should match with route configuration and it can be any string like “productID”.

Here is a full AngularJS route parameter example:

 

Top