1

I'm creating an application and in the dashboard I have the header and the sidebar that will be in every single page of the dashboard, and for that reason I created partial files for them.

The problem is that if I access /dashboard/users I get the same thing that is in the /dashboard, I was wondering how to keep the header and sidebar but change the main content to the /views/dashboard/users.html file?

I created the states like this:

.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .state('dashboard', {
        url: '/dashboard',
        views: {
          '': {
            templateUrl: 'views/dashboard.html'
          },
          'header@dashboard': {
            templateUrl: 'views/dashboard/partials/header.html'
          },
          'sidebar@dashboard': {
            templateUrl: 'views/dashboard/partials/sidebar.html'
          }
        },
        controller: 'DashboardCtrl',
        controllerAs: 'dashboard'
      })
      .state('dashboard.users', {
        url: '/users',
        views: {
          '': {
            templateUrl: 'views/dashboard/users.html'
          }
        },
        controller: 'DashboardUsersCtrl',
        controllerAs: 'dashboard/users'
      });
});

/main.html

<p>main</p>

/index.html

<body ng-app="freelancerApp">
    <div ui-view></div>
</body>

/views/dashboard.html

<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>

/views/dashboard/users.html

<div ui-view="header"></div>
<p>users</p>
<div ui-view="sidebar"></div>

/views/dashboard/partials/header.html

</p>header</p>

/views/dashboard/partials/sidebar.html

<p>sidebar</p>
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
molunoluda
  • 13
  • 2

2 Answers2

0

Add abstract:true in this snippet 

.state('dashboard', {
    url: '/dashboard',
    abstract: true,
    views: {
      '': {
        templateUrl: 'views/dashboard.html'
      },
      'header@dashboard': {
        templateUrl: 'views/dashboard/partials/header.html'
      },
      'sidebar@dashboard': {
        templateUrl: 'views/dashboard/partials/sidebar.html'
      }
    },
    controller: 'DashboardCtrl',
    controllerAs: 'dashboard'
  })
Sasank Sunkavalli
  • 3,864
  • 5
  • 31
  • 55
0

I would say, that your parent template, is just missing place for a child (unnamed view target)

//views/dashboard.html
<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>

should be

//views/dashboard.html
<div ui-view="header"></div>
<div ui-view="">
  // we can keep it or remove the content
  <p>dashboard</p> // just visible in parent
</div>
<div ui-view="sidebar"></div>

Now, we have a target <div ui-view=""></div> for an unnamed child view, defined as views :{ '': {...}} in a .state('dashboard.users'...

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • The only problem now is that `

    dashboard

    ` is still appearing in the `/dashboard` router.     – molunoluda Sep 12 '16 at 13:17
  • Check my updated answer. We can have some content inside of unnamed placeholder ui-view... if we want... or it could be left empty... child will anyhow replace the complet `div` – Radim Köhler Sep 12 '16 at 13:19
  • @molunoluda any progress? I guess now you have it working right? ;) – Radim Köhler Sep 12 '16 at 13:35
  • Yay, it's working now. I was wondering if my approach is right or I can do that in a different way. I couldn't find any example on the internet that is using the way I'm doing and it made me wonder if I'm doing that right. – molunoluda Sep 12 '16 at 13:42
  • I would say, you are on a good way. really. There are my two favorites http://stackoverflow.com/q/28800644/1679310 and http://stackoverflow.com/q/25667660/1679310. If this answer helped you a bit.. do not forget to accept it ;) – Radim Köhler Sep 12 '16 at 13:44
  • 1
    I would forget, you helped me a lot. Thank you very much. – molunoluda Sep 12 '16 at 13:58
  • I'm having a problem... I'm trying to use `ui-sref-active="active"` using this approach in a menu, the thing is that the `/dashboard` keeps activated even if I'm in `/dashboard/users`. How to solve that? – molunoluda Sep 12 '16 at 19:09
  • I would strongly suggest: issue new question. That way you will get larger audience, and for sure you'll get the answer ;) Good luck with UI-Router – Radim Köhler Sep 13 '16 at 05:45