State provider in AngularJS

Introduction
AngularJS is a well-known Javascript framework nowadays. It provides a great support to create SPA (Single Page Applications), easing some of the tedious stuff needed when writing client-side Javascript applications (boilerplate code, DOM bindings, URL routing, etc).

AngularJS is shipped with all the necessary things to build expressive applications without depending on third-party libraries. Nevertheless, in very short time, AngularJS has created a great and very active community around it, creating different AngularJS components over well-known Javascript libraries, like Bootstrap, jQuery UI, etc. These new components are very useful to improve and maximize the potential of our applications.

One of the key points when creating single page applications is the routing mechanism used. The main objective of routing mechanism is to achieve that the user navigates the application like a normal site, but also avoiding or reducing the annoying waiting time due to a page change (page transition).

AngularJS already provides support for routing through the ngRoute module. ngRoute is a basic routing library where we can specify just one view and controller for any route (URL).
But there are situations when we need more control over routes or we need composite or nested views and we can’t achieve it easily with ngRoute.

The AngularJS community has created the AngularUI library. It provides different components which can be used in our AngularJS applications. This library has been broken down into several modules, so that, we can choose only the components we are interested in, instead of including the whole library.

AngularJS UI-Router

The UI-Router is a routing framework for AngularJS built by the AngularUI team, providing a different approach than ngRoute. Unlike ngRoute, it allows us to change the application views based on the state of the application and not just the URL route. In other words, it converts the parts of the application interface into a state machine.

As stated before, UI-Router is organised around states, which may optionally have routes, as well as other kind of behaviours attached. States are bound to named, nested and parallel views, allowing powerfully managing the application’s interface. With this approach, views and routes aren’t tied to the site URL, so we can change the parts of the site using the routing even if the URL does not change.

The library provides a lot of extra control in views: nested views, multiple views on the same page, etc. In order to have a finer grain control over the application routing, UI-Router is a great library to take advantage of.

States VS URL Routes

One of the drawbacks of routes is that we have to tie a route with an URL, having to use ngInclude or other method to change different parts of the page managed by this route. Using states, we are not tied to the URLs to modify parts of the application. States allows us to change parts of the pages using its routing process even when we don’t need to change the URL. Like ngRoute, uiRoute allows to configure the states, routing, controllers and views using the .config() command of AngularJS but there are some reasons because uiRoute has some advantages over the features provided by ngRoute:

UI-Router allows nested views and multiple views in each state. States are bound to named, nested and parallel views. It allows to manage the application’s interface in a more powerful way

With states you can access different information about the states and pass information between them

You can determine in which state you are on each moment, so you can act over the UI accordingly, for example, putting an active class to the navigation element for that state. States can be bound to URLs or not but states bound to URLs will be updated every time the URL changed using the custom uiRouter element ui-sref. Very handy for URLs based applications

State decorators can be used to modify dynamically the states configuration. It can be used to add custom functionality to ui-router, for example inferring template URLs based on the state name instead of configure them on each state beforehand

Components

As stated in the introduction to this routing library, the AngularJS UI-Router is built around states which allow us to have states bound to URLs like ngRoute module, but also leave us to have nested states and states with multiple views which is a very powerful feature we can take advantage in our applications. This is thanks to ui-router is based on states, not just a URL.

AngularJS Ui-Router provides a set of components we can use to create powerful, maintainable and well-structured applications:

1. $state/$stateProvider: Manages state definitions, the current state, and state transitions. This includes triggering transition-related events and callbacks, asynchronously resolving any dependencies of the target state, and updating $location to reflect the current state. For states that have URLs, a rule is automatically registered with $urlRouterProvider that performs a transition to that state
2. ui-sref directive: Equivalent to href or ng-href in <a /> elements except the target value is a state name. Adds an appropriate href to the element according to the state associated URL\ui-view directive: Renders views defined in the current state. Essentially ui-view directives are (optionally named) placeholders that gets filled with views defined in the current state
3. $urlRouter/$urlRouterProvider: Manages a list of rules that are matched against $location whenever it changes

State Manager

To deal with the states creation, AngularJS UI-Router provides the $stateProvider component. It works similar to AngularJS $routeProvider, but it is focused on states. A state corresponds to a part of  the application in terms of the UI and navigation. A state describes (using the controller, template and view properties) the looks of that part if the UI and what is done there. States usually have things in common, so state hierarchies are used to leverage these relationships (parent/child states are known as nested states)

Define states

To define states, we use the .config method (as we already knew), but instead of setting our routes on $routeProvider, we set our states on the $stateProvider

.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider
   .state('home', {
     url: '/home',
     templateUrl: 'partials/home.html'
  })
});

The lines above create a state named home using the state configuration object provided. This object has similar options to the one used when creating routes using $routeProvider in ngRoute module.

When an URL is specified in the state configuration object, this state is bound to an URL. When a state is activated, its template is inserted into the HTML tag containing the ui-view attribute of its parent state’s template.When a state is activated, its templates are automatically inserted into the ui-view of its parent state’s template. If the state is a top-level state (it does not have a parent state), then its parent template is the index.html of the application.

<!-- index.html -->
<body ng-controller="MainController">
 <section ui-view></section>
</body>

Templates

As we have already seen, templates are configured in the state configuration object when creating a state. There are different ways to define the template for a specific state:templates on each

1. template: A string of HTML content or a function that returns HTML
2. templateUrl: A string containing the URL path to a template or a function that returns a URL path string.
3. templateProvider: A function that returns an HTML content string. This function can be injected and has access to local.
4. Controllers: We can assign a controller to the template of a state. Just like in ngRoute, we can either associate an already registered controller with a URL using the string function name or we can create a controller function that operates as the controller for the state. It should be noted that if there is no template defined, then the controller will not be created. The controllers are specified using the controller key of the state configuration object and there are different ways to do this:

* Using function to create the controller*/
$stateProvider.state('home', {
  template: '<h1>{{welcome}}</h1>',
  controller: function($scope){
    $scope.welcome = 'Hello World';
  }
})
/* Using controller name if you already have a controller defined on the module */
$stateProvider.state('home', {
  template: ...,
  controller: 'HomeController'
})
14
 
/* Using controller as syntax */
$stateProvider.state('home', {
  template: '<h1>{{home.welcome}}</h1>',
  controller: function(){
    this.welcome = 'Hello World';
  },
  controllerAs: 'home'
})

If you need to resolve a list of dependencies which have to be injected to the controller before changing to the state, the resolve key of the state configuration object must be used. Check this to know more about this functionality.

State parameters
Like routes in ngRoute, When defining the URL of our states we can specify some placeholders in the URL and they will be converted as parameters which can be accessed in the controller through the $stateParams object:

$stateProvider
  .state('orders', {
    url: '/order/:orderId',
    template: '<div><h1>Welcome to your order history</h1>
               <div>Showing order id {{orderId}}</div>
               </div>',
    controller: function($scope, $stateParams) {
      $scope.orderId = $stateParams.orderId;
    }
 })

We can also use curly braces to specify parameters in the URL: /order/{orderId}.
Take into account that in state controllers, the $stateParams object will only contain the parameters that were registered with that state. So we will not see the parameters registered on other states, including ancestors. To avoid that, we should create a resolve in the parent state to add the parent state parameter in order to be available in child states. Check this to see how to do it.


Activating states
There are three main ways to activate a state of our application:Navigate to the url associated with the state.

1. Click a link containing the ui-sref directive (we will learn more about this later)
2. Using $state.go method

Nested states
To leverage all the power provided by the Ui-Route library, we will have to use undoubtedly the nested states. States can be nested within each other which means that the child state will be rendered inside the ui-view of the parent state. Child states, in turn, can have nested states and so on.
In order to define child states, we can use the dot notation in the state name when defining a new state with $stateProvider:

$stateProvider
  .state('home', {
    url: '/home'
    template: '<div>Home</div><div ui-view></div>'
  })
  .state('home.main', {
    url: '/main',
    template: '<div>Main News</div>'
  });
  .state('home.news', {
    url: 'news',
    template: '<div>List of News</div><ul><li ng-repeat="new in news"><a>{{new.title}}</a></li></ul>',
    controller: function($scope){
      $scope.news = [{ title: 'First News' }, { title: 'Second News' }];
    }
});

The example above creates a “home” state bound to the “/home” URL and two child states, “main” bound to “/home/main” URL and “news” bound to “/home/news” URL. When activating one of the child states, the specific template will be rendered inside the ui-view element of the parent (home) state.
Child states can inherit some of the information contained in the parent state like resolved dependencies and custom state data properties.

Abstract states
There are situations where we need to have some common information available in several states.For this purpose UI-Router provides the possibility to specify abstract states.
Abstract states can have child states but they can not be activated itself neither transitioned to. An abstract state is implicitly activated when one of its child states are activated.
This is useful when:

1. we need to prepend a url to all the child state urls
2. we need to insert a template with its own ui-view that the child states will fill
3. we need to provide resolved dependencies (via resolve) in order to be used by child states
4. we need to provide inherited custom state data in order to be used by child states or events
5. Abstract states are defined specifying the abstract key in the state configuration object set to true.

$stateProvider
.state('home', {
     abstract: true,
     templateURL: 'home.html'
})

Multiple named views
Besides to provide parent/child relationship in states, UI-Router gives us the capability to have multiple named views inside states which will not be bound to any URL.
Having multiple views in our application can be very powerful. For example, maybe you have a sidebar on your site that has things like tweets, recommended items, advertising banner, popular posts, recent posts, users or whatever. These different blocks can all be separated and injected into our template. Each view will have its own controller and template, so our application will be better organized and cleaner.
This feature allows us having our application modular and also lets us reuse data in different templates to reduce the amount of duplicate code. In order to specify named views in states, we have to make use of the views property of state configuration object.
For example, if we have a view like this:

<!-- partial-aside.html -->
<div>
  <div ui-view="tweets"></div>
  <div ui-view="recommendations"></div>
  <div ui-view="users"></div>
</div>

/*We can create named views to fill each of these templates:*/

$stateProvider
  .state('aside', {
    views: {
      '': { templateUrl: 'partial-aside.html' },
      'tweets': { ... templates and/or controllers ... },
      'recommendations': {},
      'users': {},
    }
})

As stated in the official documentation, if we set the views parameter, then the state’s templateUrl, template, and templateProvider will be ignored. If we want to include a parent template in our routes, we’ll need to define an abstract state that contains a template, and a child state under the layout state that contains the ‘views’ object

Relative vs Absolute Naming
When using multiple views, UI-Router assigns every view to an absolute name. The structure for this is viewName@stateName, where viewname is the name used in the view directive and state name is the state’s absolute name, e.g. aside. You can also choose to write your view names in the absolute syntax. Remember that if an @ is used then the view path is considered absolute.
The next example has been taken from the documentation and it explains really well how to define relative and absolute names and how they are resolved:

1. Relative Naming
Relatively targets the 'detail' view in this state's parent state, 'contacts'.
<div ui-view='detail'/> within contacts.html for example,
"detail" : { },


Relatively targets the unnamed view in this state's parent state, 'contacts'.
<div ui-view/> within contacts.html for example,
"" : { },










Absolute Naming
Absolutely targets the 'info' view in this state, 'contacts.detail'.

within contacts.detail.html for example,

"info@contacts.detail" : { }


Absolutely targets the 'detail' view in the 'contacts' state.
<div ui-view='detail'/> within contacts.html for example,
"detail@contacts" : { }


Absolutely targets the unnamed view in parent 'contacts' state.
<div ui-view/> within contacts.html for example,
"@contacts" : { }


Absolutely targets the 'status' view in root unnamed state.
<div ui-view='status'/> within index.html for example,
"status@" : { }


Absolutely targ8ets the unnamed view in root unnamed state.
<div ui-view/> within index.html for example,
"@" : { }

$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html'  
})
.state('contacts.detail', {
    views: {
        "detail" : { },           
        "" : { },
        "info@contacts.detail" : { }
        "detail@contacts" : { }
        "@contacts" : { }
        "status@" : { }
        "@" : { }
});

$state
$state service is responsible for representing states as well as transitioning between them. It also provides interfaces to ask for current state or even states you’re coming from.
To see all the properties and methods of $state, check the documentation.
Link to other states using ui-sref
When creating a link with UI-Router, we will use ui-sref directive. The href will be generated from this and we can link to a certain state of our application.