Angular Ui router multiple named views and nested states

Question

I have a question about the Angular UI router when I am using multiple named views in nested states. Basically I have an abstract state with a template that points to two named views. Those two named views are defined in both the sub states. I want to keep the URL fixed to /test.

When transitioning to either of the sub states, I see the view corresponding to the first sub state only. Why is that? I really hope someone can clarify the concept for me so I can learn

JSFiddle is here: https://jsfiddle.net/adeopura/e2c5n14o/16/

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
function ($stateProvider, $routeProvider) {
    $stateProvider
        .state('test', {
            abstract: true,
            url: '/test',
            views: {
                'main': {
                     template:  '<h1>Hello!!!</h1>' +
                                '<div ui-view="view1"></div>' +
                                '<div ui-view="view2"></div>'
                }
            }
        })
        .state('test.subs1', {
            url: '',
            views: {
                'view1': {
                    template: "Im 1View1"
                },
                'view2': {
                    template: "Im 1View2"
                }
            }
        })
        .state('test.subs2', {
            url: '',
            views: {
                'view1': {
                    template: "Im 2View1"
                },
                'view2': {
                    template: "Im 2View2"
                }
            }
        });
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $state.transitionTo('test.subs1');//I see the data corresponding to the test.subs1
    // Assume here that there are lots of different state transitions in between unrelated to the test1 state
    $state.transitionTo('test.subs2');//I still see the data corresponding to the test.subs1, why is that?

}]);

your 'new' fiddle is missing it's external references

beauXjames
– beauXjames

2016-03-30 13:24:54 +00:00
Commented Mar 30, 2016 at 13:24 — beauXjames
– beauXjames, Commented Mar 30, 2016 at 13:24
Updated the fiddle for reference.

AshD
– AshD

2016-03-30 21:19:36 +00:00
Commented Mar 30, 2016 at 21:19 — AshD
– AshD, Commented Mar 30, 2016 at 21:19

beauXjames · Accepted Answer · 2016-03-29 19:51:35Z

0

It's actually the order by which you've defined them. Swap the order so that you define test.sub2 before test.sub1 and you'll see it'll start @ test.sub2.

answered Mar 29, 2016 at 19:51

beauXjames

8,4283 gold badges53 silver badges68 bronze badges

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

1 Comment

AshD Over a year ago

That is the trouble, right. Why should it go to test.sub1? When I try to transition to test.sub2, I always end up in state1, or so it seems.Updated the code slightly to clearly indicate the problem.

Gary · Accepted Answer · 2016-03-29 20:39:17Z

0

I think it's because you don't have a url assigned to either of the sub-states. I would try giving them their own url paths, and seeing if you can then reference the states that way.

answered Mar 29, 2016 at 20:39

Gary

4434 silver badges15 bronze badges

1 Comment

AshD Over a year ago

I do not want to change the URLs. More user facing URLs imply more error messages I need to account for.

AshD · Accepted Answer · 2016-03-30 21:17:27Z

0

One of my colleagues explained what is happening in this case. Explained as below:

state.transitionTo('test.subs2') causes the application to go to state 'test.subs2'
Once in state 'test.subs2', the URL is changed to /test
This causes the Angular UI Router to fire a change to the appropriate state.
The appropriate state is the first one that matches the URL /test, which would be the state 'test.subs1'

Hope this helps someone

answered Mar 30, 2016 at 21:17

AshD

1,2042 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular Ui router multiple named views and nested states

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related