AngularJS transition to abstract state

Question

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

App intro wizard
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("/");

})

So transition to one of the child states? And/or do something like this: $urlRouterProvider.when('/app', '/app/playlists'); — aet, Apr 04 '14 at 18:01
@aet I tried this, but since my app State is using a side menu template, going directly to app/playlists didn't load in the menu. — Mark Kamyszek, Apr 04 '14 at 22:07
@MarkK got the same issue any fixed solution for this. I'm trying to integrate Ionic Intro Tutorial with Splashscreen(http://codepen.io/gwhickman/pen/zpDFG/) with side menu application getting the problem. — Vinod Kumar Marupu, May 19 '16 at 17:15
@VinodKumarMarupu Unfortunately, not. I had scrapped that flow and reworked the onboarding to my app. — Mark Kamyszek, May 24 '16 at 13:32

score 14 · Answer 1 · edited Aug 01 '20 at 01:21

14

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.

edited Aug 01 '20 at 01:21

Community

1
1

answered Sep 16 '14 at 11:14

Neaped

445
5
19

score 3 · Answer 2 · answered Jan 16 '15 at 21:33

3

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.

answered Jan 16 '15 at 21:33

Yang Zhang

4,540
4
37
34

score 0 · Answer 3 · answered Jun 21 '16 at 23:54

In a service:

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' })
);

Or in a template ($state must be available in the local or global $scope):

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a>

AngularJS transition to abstract state

3 Answers3