AngularJS Routing using UI-Router with Example

By | November 19, 2017

We have already covered how the routing works in AngularJS using ng-Route. In this article, we will go through another approach i.e using UI-Router. Before you step into UI-Router you may want to go through ng-Route to better understand this.

What is Angular UI-Router?

The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on the state of the application and not just the route URL.  UI-Router is the best approach over ng-Route because it provides two most important features: nested views and multiple views. As with ng-Route, with this approach views and routes have not tied to the browser URL. You can change the view even if the browser URL does not change.

Suggested read:

Nested Views:

As the name suggests, Nested Views contain one view inside the other view like parent and child connection. To explain in a simple way, having a list of animals in one view. When you click on any animal you will get to see its features in another view.

To understand it well, take a look at the below image.

Nested Views in AngularJS using UI-Router

When the user selects an animal, the details are shown on right side. The details are displayed when you select another animal.

This requirement can even be achieved with ng-Route by having a single view with two different controllers for each list and detail. But the result is not ideal as the view has both responsibilities of showing the list of animals and displaying/hiding its detail according to the selected animal. So it’s better to have separate view and controller for each list and detail.

Multiple Views:

Having more than one view in common or in a single page is referred to as Multiple views. Usually, in any application we will have multiple parts associated with the single page, for example on the home page we display multiple different things of an application called a dashboard. To have each one of these parts we need to add a separate view for each. The following image explains it well.

Multiple Views in AngularJS using UI-Router

Here, Users, Popular Posts, and Recent Posts are 3 different views displayed at the same time on a single page. Each will have a separate controller.

UI-Router Installation

To use angular UI-Router with version 1.2.x or 1.3.x you can follow the following steps.

  1. bower install:


    OR

npm install:
$ npm install angular-ui-router

  1. Include ‘angular-ui-router.js’ and ‘angular-ui-router.min.js’ script tags in the index.html page after angular script tag.
  2. Include ‘ui.router’ dependency in main AngularJS main module.

UI-Router as State Machine

UI-Router introduces a state machine design pattern. Unlike ng-Route, it does not work based on URL change rather it works on the state. Routes are referred to as states where URL becomes simply a property of it.

Look at below to understand how to configure routes using UI-Router. 

Let us understand the configurations.

  • The angularJS service $routeProvider with ng-Route becomes $stateProvider when using UI-Router.
  • $urlRouterProvider is used for two main reasons.

 

  • To establish default route when URL does not meet with any route or does not have specific routes.

  • To allow developers to listen for a window location change and redirect to a route that has a state defined.

In summary, $urlRouterProvider lets you handle the requests when state design pattern does not make any sense.

How to navigate to a page?

  • In a controller, to navigate to a page we use the $state as below.

  • In an HTML page, we use ui-sref where ui is an AngularUI project’s directive is used as prefix and sref is stated reference.

Example for AngularJS Routing using UI-Router

Let’s understand UI-Router with a sample application. It explains both Nested Views and Multiple views.

The application has the following structure.

Example for UI-Router explaining Nested Views and Multiple views

The index.html page as looks as given below.

Here, we are using bootstrap for styling and also we are loading Angular UI Router script after the angular script.

In this page, we have two simple links called Home and About. We use ui-View as ng-view in ng-Route to load a particular view as the user clicks on any link.

<div ui-view></div>

Now we will have all our routes configuration in config file i.e. app.js

Here we have configured routes for home and about page. Routes are represented as states as explained above.

Controllers are defined in route definition itself as it has less content.

Nested Views with UI-Router

The Home page introduces Nested Views.

We have two views: partial-home.html(main) and partial-home-list.html(child). The main view displays the list of animals.  As the user clicks on any animal, the child view is shown which displays the animal description.

So let’s have partial-home.html(main) and partial-home-list.html(child) views.

The output of an above-nested view is shown as below.

Output of Nested Views in AngularJS Routing using UI-Router

Output of Nested Views

Multiple Views with UI-Router

The About page introduces Multiple views.

Here, we have main page “partial-about.html” and two views defined in route definition in app.js file I.e ‘columnOne@about’ & ‘columnTwo@about’.

Both views are displayed at once as the main page is loaded.

Let’s have the main page as shown below.

  1. For ‘columnOne@about’ template, please refer app.js file(about state).
  2. For ‘columnTwo@about’, which point to the file shown below.

The output of Multiple views is shown as below.

Output of Multiple views in AngularJS using UI-Router

Output of Multiple Views

Note: You can view the application output in http://run.plnkr.co/preview/cj98vsfy900093c5w9f0mpkir/#/home

 

How to define State Name?

Understanding the state name as shown above I.e columnOne@above is very difficult. So this syntax of state name can be understood as below.

  1. The name before “@” is the name of the view that we are going to replace with the template(where ui-view is defined) when this route is requested. So this name becomes the value of the ui-view directive.

Ex.  <div ui-view=”columnOne”></div>

  1. The name after “@” indicates that where the ui-view with the value view name can be found. The location is represented as a state which contains URL instead of defining URL directly as with ng-Route.

So view name + “@” + state name become state name to point to view.

Conclusion:

This approach is the best and robust as the application is seen in states rather than URL. You can use UI-Router instead of ng-Route to make your application more robust and reusable.




Suggested articles for you:

Did it help? Comment here..