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
– aet, Commented Apr 4, 2014 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
– Mark Kamyszek, Commented Apr 4, 2014 at 22:07
@MarkK got the same issue any fixed solution for this. I'm trying to integrate Ionic Intro Tutorial with Splashscreen(codepen.io/gwhickman/pen/zpDFG) with side menu application getting the problem. — Vinod Kumar Marupu
– Vinod Kumar Marupu, Commented May 19, 2016 at 17:15
@VinodKumarMarupu Unfortunately, not. I had scrapped that flow and reworked the onboarding to my app. — Mark Kamyszek
– Mark Kamyszek, Commented May 24, 2016 at 13:32

Community · Accepted Answer · 2020-08-01 01:21:35Z

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 1, 2020 at 1:21

CommunityBot

11 silver badge

answered Sep 16, 2014 at 11:14

Neaped

4455 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yang Zhang · Accepted Answer · 2015-01-16 21:33:08Z

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, 2015 at 21:33

Yang Zhang

4,5704 gold badges39 silver badges35 bronze badges

Comments

Zane · Accepted Answer · 2016-06-21 23:54:00Z

0

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>

answered Jun 21, 2016 at 23:54

Zane

4,7621 gold badge31 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS transition to abstract state

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related