what is the purpose of use abstract state?

Question

I am working on my tutorial AngularUI project. I read all about states, nested states and abstract states. The problem is that I can't understand why and when I should use abstract state?  

Answer 1

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: we need to prepend a url to all the child state urls we need to insert a template with its own ui-view that the child states will fill we need to provide resolved dependencies (via resolve) in order to be used by child states we need to provide inherited custom state data in order to be used by child states or events Abstract states are defined specifying the abstract key in the state configuration object set to true.

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})

Answer 2

If you don't want a state that can be hit\transitioned to then you can make it an abstract state. Example

\A
\A.B
\A.B.C

If you don't want the user to simply go to \A, you should make it abstract.

Answer 3

Basically, abstract states help you to move common functionality from different states into a parent abstract state.

A typical example is a state that handles the loading of user name, localization settings, meta data. You don't want the user to redirect to a state that will load just that. You want that to be loaded always, when redirected to every state

/session would be abstract but /session/main, /session/detail would not. Through the dependencies, session data would be loaded when going to both main and detail states but you don't want the user to go to session state.

Answer 4

Abstract state does mean the state that you wrote can't be accessible directly. Abstract states still need their own for their children to plug into.

It gets called when we load its child's state. You can use abstract state to define some initial pattern of your page, suppose you can take an example of Any social media site, where you wanted to show user profile & social page. For that you could have one abstract state, which will have url: "" & have basic layout of your page. Like header, content & footer named views. header & footer named view will be filled up by the abstract state & then child will define the what the content is depends on which module is displayed. /profile will show the userProfile.html & /social will show the social page of an user social.html.

Config

app.config(function($stateProvider){
  $stateProvider.state("app":
  {
    url: "", //you can have the default url here..that will shown before child state url
    abstract: true,
    views: {
       '': {
          templateUrl: 'layout.html',
          controller: 'mainCtrl'
       },
       'header': {
          templateUrl: 'header.html'
       },
       'footer': {
          templateUrl: 'footer.html'
       }
    },
    resolve: {
       getUserAuthData: function(userService){
           return userService.getUserData();
       }
    }

  })
  .state("app.profile": {
      'content@app': {
          templateUrl: 'profile.html',
          controller: 'profileController'
      }
  })
  .state("app.social": {
      'content@app': {
          templateUrl: 'social.html',
          controller: 'socialController'
      }
  })
})

Other main feature of abstract is you can have common resolve on it, provide inherited custom data via data for use by child states or an event listener. Also you can have OnEnter & OnExit on it to making sure things before loading state & while leaving from state