0

I'm trying to nest my routes by three level with ui-router.

I'll include just peace of my routes that is causing an issue, because my routes are kind of big and don't want to include everything here. Might be pain to read it. But if you think I should include more, please let me know.

app.js

.state('elements', {
      url: '/elements',
      views: {
        nav: {
          templateUrl: 'components/directives/main-nav.html'
        },
        content: {
          templateUrl: 'views/main-nav/elements.html'
        },
        localFooter: {
          templateUrl: 'views/footer/elements-subnav.html'
        },
        globalFooter: {
          templateUrl: 'views/footer/global-footer.html'
        }
      },
      ncyBreadcrumb: {
        label: 'elements'
      } 
    })
    .state('elements.elements-library', {
      url: '/elements-library',
      views: {
        nav: {
          templateUrl: 'components/directives/main-nav.html'
        },
        content: {
          templateUrl: 'views/elements-subnav/elements-library.html'
        },
        localFooter: {
          templateUrl: 'views/footer/elements-subnav.html'
        },
        globalFooter: {
          templateUrl: 'views/footer/global-footer.html'
        }
      },
      ncyBreadcrumb: {
        label: 'elements library'
      } 
    })
    .state('elements.elements-library.neutral-colors', {
      url: '/neutral-colors',
      views: {
        nav: {
          templateUrl: 'components/directives/main-nav.html'
        },
        content: {
          templateUrl: 'views/elements-library/neutral-colors.html',
          controller: 'pageslideController'
        },
        globalFooter: {
          templateUrl: 'views/footer/global-footer.html'
        }
      },
      ncyBreadcrumb: {
        label: 'neutral colors'
      } 
    })

I'm showing just peace of elements-library.html file that has link to go third level nested route.

elements-library.html

<div class="row">
  <div class="col-xs-12">

    <h2 class="evo-header-10-bold" id="neutral-colors">Neutral Colors<a ui-sref="elements.elements-library.neutral-colors" href="javascript: void(0);" class="evo-icon-10 evo-icon-circle-chevron-right" style="float: right; margin-top: 5px;"></a></h2>

    <div class="evo-space-15"></div>

  </div>
</div>

below is neutral-colors.html page that I want to be loaded in View when clicking from elements-library.html

neutral-colors.html

<div class="container">

 <div class="row">
  <div class="col-xs-12">
   <div ncy-breadcrumb></div>
  </div>
 </div>

 <div class="row">
  <div class="col-xs-12">
   <h2 class="evo-header-15-bold no-line">Neutral Colors</h2>
  </div>
 </div>

</div>

And from index.html file I'm just showing that I have included data-ui-view="content"

index.html

 <div data-ui-view="content" class="container" ng-cloak></div>

When I click on link "a ui-sref="elements.elements-library.neutral-colors ..." from elements-library.html, my URL address updates to http://localhost:3000/#/elements/elements-library/neutral-colors and my ncy-breadcrumb also updates to "elements / elements library / neutral colors" but the rest of the page (content) doesn't update.

On third level nesting ".state('elements.elements-library.neutral-colors'" I even try to change content: to content@elements: but then I'm getting this error:

Uncaught SyntaxError: Unexpected token ILLEGAL

Uncaught Error: [$injector:nomod] Module 'evolution' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Daniel T.
  • 369
  • 2
  • 6

1 Answers1

0

I found solution.

I forgot to include 'view' in my elements-library.html file.

<div data-ui-view="content" ng-cloak></div>

Take a look at this post Three level nested routes in angular-ui-router

Community
  • 1
  • 1
Daniel T.
  • 369
  • 2
  • 6