Angular ui-router debugging

Question

I have the following arrangement:

$stateProvider.state('home', {
        url: '/',
        template: ''
    })

    .state('profile', {
        url: '/profile/view',
        templateUrl: 'static/templates/profile.tpl.html'
    })

    .state('profile.view', {
        url: '',
        templateUrl: 'static/templates/profile-view.tpl.html',
        controller: 'profileController',
        controllerAs: 'pc'
    })

    .state('profile.edit', {
        url: '/edit',
        templateUrl: 'static/templates/profile-edit.tpl.html',
        controller: 'editProfileController',
        controllerAs: 'editCtrl'
    })
    ;

What I intend to do is - I have some common partial content between the profile.view and the profile.edit states.

The common part is supposed inside the profile state. But the current arrangement is failing and /profile/view DOES NOT render any of the partials.

No errors reported to console.

Edit: Here is profile.tpl.html

<div flex flex-gt-sm="50" flex-offset-gt-sm="25" layout="row" layout-align="center">
    <div ui-view>
    </div>
</div>

Edit 2:

After adding abstract: true the profile.view state started working fine. But profile.edit state keeps redirecting to /. Sort of following the .otherwise('/') rule

are you trying to load view and edit inside another ui-view which is in profile.tpl.html? — S4beR
– S4beR, Commented Mar 28, 2016 at 17:04
Or asked more directly, does your template for the "profile" state include a ui-view directive? It's required b/c the "view" and "edit" states are child states of "profile". — Sunil D.
– Sunil D., Commented Mar 28, 2016 at 17:06

Ishan Khare · Accepted Answer · 2016-03-29 18:25:03Z

1

I'll answer my own question:

All I was missing was abstract: true in the profile state

Edit:

following things completely solved it for me:

abstract: true in profile state
url: '/profile' in profile state
url: '/view' in profile.view state
url: '/edit' in profile.edit state

edited Mar 29, 2016 at 18:25

answered Mar 28, 2016 at 20:55

Ishan Khare

1,7574 gold badges31 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Angular ui-router debugging

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related