Base solution for your next web application
Open Closed

State Routing in SPA is not working for 3-Level Routing #844


User avatar
0
mengvisal created
Support Team

Hi!

I am trying to do a create page which is a sub state of "project", a sub state of tenant (tenant.projects.create) as following:

$stateProvider.state('tenant.projects', { url: '/projects', templateUrl: '~/App/tenant/views/projects/index.cshtml', menu: 'Sale.Projects.Tenant' });

    $stateProvider.state('tenant.projects.create', {
        url: '/create',
        templateUrl: '~/App/tenant/views/projects/create.cshtml',
        menu: 'Sale.Projects.Tenant'
    });

When I try to use "state.go('tenant.projects.create')" on button click or use "ui-sref='tenant.projects.create'" on a link in the Project page to load the "Create Project" page, the URL in the browser is rewritten correctly to: "http://localhost:6240/Application#/tenant/projects/create" but the view does not change. It still views the "Project Page" rather than "Create Project Page".

On the other hand, if I rewrite the state route with only two level deeps as following, it works:

$stateProvider.state('tenant.projects', { url: '/projects', templateUrl: '~/App/tenant/views/projects/index.cshtml', menu: 'Sale.Projects.Tenant' });

    $stateProvider.state('tenant.projectsCreate', {
        url: 'projects/create',
        templateUrl: '~/App/tenant/views/projects/create.cshtml',
        menu: 'Sale.Projects.Tenant'
    });

2 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    If you create 3 levels, first 2 level routes should be abstract. This is about angular's routing system. You can see it's documentation to understand it better: <a class="postlink" href="https://github.com/angular-ui/ui-router/wiki">https://github.com/angular-ui/ui-router/wiki</a>

  • User Avatar
    0
    mengvisal created
    Support Team

    Thanks!