In order to create a nested state, we can use . to write the name of the child state after the parent state. If the parent state is named as homeView, we can register a nested state menu by naming it .state ('homeView.menu', {}). The Angular UI Router module by default sets the state before the dot operator as the parent of the state object.

Nested states can also be created by using a parent property on the state object passed as a second argument to the state method of $stateProvider. The name of the parent state can be set as a string value to the parent property:

$stateProvider.state('menu',{
  parent: 'homeView',
  templateUrl:'homeView.menu.html',
  controller: 'MenuController'
}

We can use objects instead of strings to set the parent property of the state object:

var homeView = { name:'homeView', ... };
var menu = { name: 'homeView.menu',
             parent: homeView,
             templateUrl:'homeView.menu.html'
           }

States can be registered in any order and a child state can be registered before the parent state. It will queue the child state registration until the parent is registered.

No two state names can be the same. With the dot notation or without dot notation, the names of the states need to be different even if the two states have different parents.

If the application is in a particular state, and the state is active, then all its ancestor states are active by default. The child states will load their templates into their parents' <ion-nav-view> directives.

In order to transition to a specific state or make any state active, there are multiple ways available.

You can use an anchor tag and set the href attribute to # followed by the URL for the state. For example, if the URL is set to /home/main, then the href attribute value should be #/home/main:

<a href="#/home/main"> Main Link </a>

Another way to link states in HTML is to use the ui-sref directive, which allows the developer to pass in the state name instead of state URL:

<a ui-sref="homeView.main"> Main Link </a>

If we want to transition to a particular state from JavaScript, then we can use a method on the $state object that can be injected into any controller. Please note that in ui.sref you give the value starting from the parent template. For example, if you are giving a link in index.html then you should give ui-sref='homeView.main' but if the link is in homeView.html then give ui-sref='main':

<a ui-sref="homeView.main"> Main Link </a>

We will be working with a new Ionic Project using a blank starter project template and use the code snippets given along with the chapters to build the BookStore e-commerce sample app.

In the UI router, there is a provision to define an abstract state, which can have child states but it cannot be activated itself. This state cannot be transitioned to and it is activated automatically when one of its descendants is activated. The use cases for using an abstract state is when we want to use a state for layouts only, when a URL needs to be appended to all states, and to provide common data or resolved dependencies to all child states.

Abstract states would still require a <ion-nav-view/> directive in the template:

.state('homeView',{
  abstract: true,
  url: '/home',
  templateUrl: 'homeView.html'
});

In the previous example, by default the named view is expected on the parent state. If we want to reference a specific named view of any ascendant state, then we can use @ to write the exact view like <view-name>@<state-name>.

The URL can have dynamic parts, which can contain any value, and the controller should be able to access the value passed. You can use a : character or { } to define a dynamic URL part, which is called a basic parameter:

$stateProvider
.state('homeView.books.detail', {
  url: "/books/:bookId",
  templateUrl: 'books.detail.html',
  controller: function ($stateParams) {
    // If we got here from a url of /contacts/42
    expect($stateParams).toBe({bookId: "42"});
    // expect() is a method of Jasmine Framework Unit Testing Code
  }
})

Alternatively, the basic parameter can also be defined using curly braces:

url: "/books/{bookId}"

We can restrict the values passed in the url parameters by using a regular expression inside curly brackets in the url value of the state. For example:

url: "/books/{bookId:[0-9]{1,8}}"

The previous line specifies that the bookId parameter can be digits only and its length can vary from 1 to 8.

Query parameters are similar to the HTML query string parameters commonly used. You can send parameters in the URL itself after the ? symbol as key value pairs.

url: "/books?bookId" // will match to url of /books?bookId=value

url: "/books?bookId&category" // will match to /books?bookId=v1&category=c1

// If url is of type 'books/:bookId/details?section'
// Actual Url hit is  /books/23/details?section=4
console.log($stateParams);
// Console Output:
{ bookId: 23, section: 4}

Each and every state can have a property resolve, which is helpful to provide content or data to the controller. resolve is an optional map of dependencies that should be injected to the controller.

A useful feature of resolve is that it can also contain promises, which can help us to get data using AJAX requests. Also, the controller is not initialized for a state before all the resolve dependencies. The resolve object contains key and value pairs. The key can be any string whereas the value can be a function or a string. If the value of resolve is a string, it represents a service in the same module, and if it is a function, it should return a value or any promise.

The code for an example resolve block in a state definition looks like this:

$stateProvider.state('homeView',{
  url:'/home',
  resolve: {
    information: function(infoService) {
      return infoService.getInfo();
    },
    about: 'aboutService'
  }
});