CODEWITHSUNDEEP
angularjsangular-ui-routerangular-ui
Milos Bejda
Milos Bejda

Reputation: 435

Angular UI Router is not updating the layout view

I have been stuck on this for hours. The 2 column layout loads but the state views do not. All the view paths are correct and I'm not getting any errors. I googled for answers and I couldn't find anything.

angular.module('App', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'firebase',
    'firebase.ref',
    'firebase.auth',
    'ui.router'
  ])
    .config(['$stateProvider',
        function($stateProvider) {

            $stateProvider
                .state('root', {
                    url: '',
                    abstract: true,
                    views: {
                        'layout': {
                            templateUrl: 'views/partials/layout/1-column.html'
                        }
                    }
                }).state('root.home', {
                    url: '/',
                    views: {
                        'layout@': {
                            templateUrl: 'views/partials/layout/2-column.html'
                        },
                        'header': {
                            templateUrl: 'views/partials/layout/sections/header.html'
                        },
                        'sidebar': {
                            templateUrl: 'views/partials/layout/sections/sidebars/loginSidebar.html'
                        },
                        'main': {
                            templateUrl: 'views/partials/layout/sections/main.html'
                        },
                        'footer': {
                            templateUrl: 'views/partials/layout/sections/footer.html'
                        }
                    }
                })
    }])

Here is the html code :

index.html 

 <div class="container">
        <div ui-view="layout"></div>
  </div>

1-column.html

<div>
  layout 1
  <section class="col-md-12">
    <div ui-view="header"></div>
  </section>



    <section class="main col-md-12">
      <div ui-view="main"></div>
    </section>

    <section class="col-md-12">
    <div ui-view="footer"></div>
  </section>
</div>

2-column.html

<div>
  layout2
  <section class="col-md-12">
    <div ui-view="header"></div>
  </section>


    <section class="sidebar col-md-2">
      <div ui-view="sidebar"></div>
    </section>


    <section ngclass="main col-md-10">
      <div ui-view="main"></div>
    </section>

    <section class="col-md-12">
    <div ui-view="footer"></div>
  </section>
</div>

Upvotes: 0

Views: 74

Answers (1)

Boris Parnikel
Boris Parnikel

Reputation: 863

You have to add relative path to your views in .state('root.home'):

'header' -> '[email protected]'
'sidebar' -> '[email protected]'
'main' -> '[email protected]'
'footer' -> '[email protected]'

See doc: https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

Also keep in mind that in state 'root' your application have no information about child views like 'footer' and 'header'. In 'root.home' state it does, but your 'layout' view from 'root' state will overrided by view with the same name from 'root.home' state. So anyway, with your current approach you will not get 2-column layout :)

P.S. Also in your case you should to do one state with 2 views - one for first column and one for second.

Upvotes: 1

Related Questions