angularjs - 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 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