AngularJS transition to abstract state

Question

I'm working on an application built with AngularJS that has two different states:

1. App intro wizard
2. App pages (with a Navigation template and nested views)

I want to default to State 1 the first time someone access the app, once done the wizard, continue on to the App pages, State 2.

My "app" state (State 2) is an abstract state because it has nested views. So I cannot transition to this state.

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

  .state('intro', {
    url: '/',
    templateUrl: 'templates/intro.html',
    controller: 'IntroCtrl'
  })

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.playlists', {
    url: "/playlists",
    views: {
      'menuContent' :{
        templateUrl: "templates/playlists.html",
        controller: 'PlaylistsCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise("/");

})

Answer 1

I've got the same problem as you, here is a post about abstract state: angularjs ui-router default child state and ui-sref

It explains why you can't directly access abstract state

Hope it helps.

Answer 2

I have added $location service to the controller of the "intro" page and use the following to transit to app state which works for me.

$location.path('app/playlists');

The menu.html is loaded and navigated to playlists.