Angular UI Router – Nested States with multiple layouts

by

While there is no plunker showing your example, I will share one with you: working layout example. Please observe it to see in action what I will try to explain here

If our root state should be the only root state, injected into index.html, we do need a bit different defintion:

So for index.html

// index.html
<body>
    <div ui-view="layout">
    </div>
</body>

we would need this syntax:

$stateProvider
  .state('root', {
    url: '',
    views: {
      'layout': {
        templateUrl: 'partials/layout/1-column.html'
      },
      'header@root': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      'footer@root': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

What is this: 'header@root'? it is absolute naming. Check it here:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of 'viewname@statename', where viewname is the name used in the view directive and state name is the state’s absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

The same goes for other states definitions. Because the ‘root.signup’ has direct parent ‘root’, the existing syntax would be working

.state('root.signup', {
    url: '/signup',
    views: {
      'step-breadcrumb': { // working AS IS
      ...

But we could use absolute naming and it would work as well

.state('root.signup', {
    url: '/signup',
    views: {
      'step-breadcrumb@root': { // absolute naming
      ...

because this is how it works behind anyway.

Please, observe the layout example for more details

More Related Contents:

  1. AngularJS ui router passing data between states without URL
  2. AngularJS – UI-router – How to configure dynamic views
  3. Injecting $scope into an angular service function()
  4. How to reload the current state?
  5. Confusing $locationChangeSuccess and $stateChangeStart
  6. Set Page title using UI-Router
  7. How to send and retrieve parameters using $state.go toParams and $stateParams?
  8. Trying to Dynamically set a templateUrl in controller based on constant
  9. AngularJS UI Router – change url without reloading state
  10. angular-ui-router with requirejs, lazy loading of controller
  11. Angular UI Router Nested State resolve in child states
  12. AngularAMD + ui-router + dynamic controller name?
  13. Otherwise on StateProvider
  14. Using ui-router with Bootstrap-ui modal
  15. Angular UI-Router How to create a “layout” state?
  16. Angularjs ui-router. How to redirect to login page
  17. Clear History and Reload Page on Login/Logout Using Ionic Framework
  18. Difference between ui-sref and $state.go in AngularJS UI-Router
  19. What is the Angular ui-router lifecycle? (for debugging silent errors)
  20. Injecting $state (ui-router) into $http interceptor causes circular dependency
  21. stop angular-ui-router navigation until promise is resolved
  22. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  23. ui-router dynamic template path
  24. Angular-ui-router: ui-sref-active and nested states
  25. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  26. Two views in one AngularUI Router state sharing scope
  27. AngularJS UI router handling 404s
  28. Prepend optional attribute in angular ui-router URL
  29. Angularjs ui-router abstract state with resolve
  30. scope and controller instantiation with ui router

Leave a Comment