How to update content based on sidebar in AngularJS

Question

I asked a question yesterday How to do multiple views with Angular to support header and sidebar? and based on that question I was able to make some progress in having a header and a sidebar for my AngularJS App.

I've got a working fiddle here: http://jsfiddle.net/mcVfK/929/

The JS looks like this:

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/header1', {
        templateUrl: 'header1.html',
        controller: DashboardCtrl
    })
    .when('/header2', {
        templateUrl: 'header2.html',
        controller: DashboardCtrl
    })
    .when('/dashboard',{
        templateUrl: 'dashboard.html',
        controller: DashboardCtrl
    })
    .when('/sidebar1',{
        templateUrl: 'sidebarlink1.html',
        controller: DashboardCtrl
    })
    .when('/sidebar2',{
        templateUrl: 'sidebarlink2.html',
        controller: DashboardCtrl
    })
    .otherwise({
        redirectTo: '/header1'
    });
}]);

function DashboardCtrl() {

}

This seems to work, however, I want to find out whether there is a way to avoid including sidebar.html on every link in the sidebar?

If you notice on the fiddle, I'm doing this:

<script type="text/ng-template" id="sidebarlink1.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    sidebar link 1 content - including sidebar
</script>
<script type="text/ng-template" id="sidebarlink2.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    sidebar link 2 content - including sidebar
</script>

So I'm including sidebar.html on every link in the sidebar. I'm wondering if there is a way to avoid this? Also, is there an Angular way to highlight which sidebar link is currently active?

This is my secondday with AngularJS. I'm not sure what that means. I'll go look it up. If possible, would be great if you can edit the fiddle to show me what you mean. — birdy, Mar 18 '15 at 13:59

score 0 · Answer 1 · edited May 23 '17 at 12:02

I recomend to use ui-router (What is the difference between angular-route and angular-ui-router?) instead of ngRoute. Lear about it if you are interested. And then use some ng-switch like this:

//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    <div ng-switch="$state.current.name">
        <div ng-switch-when="sidebar1" ng-include="'sidebarlink1.html'"></div>
        <div ng-switch-when="sidebar2" ng-include="'sidebarlink2.html'"></div>
    </div>
</script>

//template sidebar 1
<script type="text/ng-template" id="sidebarlink1.html">
    sidebar link 1 content - including sidebar
</script>

//template sidebar 2
<script type="text/ng-template" id="sidebarlink2.html">
    sidebar link 2 content - including sidebar
</script>

Then change your templateUrl in route config to go at the parent template sidebarlinkparent.html on /sidebar1 and /sidebar2

Aswell you can use your actual ngRoute and change the ngSwitch condition with a controller scope var setted on routes or something like that

EDIT:

OPTION 2:

//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
    <div ng-include="'sidebar.html'" id="sidebar"></div>
    <div ng-include="$state.current.name +'.html'"></div>
</script>

OPTION 3:

//Parent template
<script type="text/ng-template" id="sidebarlinkparent.html">
     <div ng-include="'sidebar.html'" id="sidebar"></div>
     <div ng-include="$state.params.include +'.html'"></div>
</script>

etc etc..

score 0 · Accepted Answer · answered Mar 18 '15 at 14:17

0

You can move the sidebar include out and use a variable to determine in what route you want to see it. Check out this jsfiddle:

http://jsfiddle.net/mcVfK/931/

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
     when('/header1', {
        templateUrl: 'header1.html',
        controller: DashboardCtrl,
    resolve: {
      hasSidebar: function($rootScope) { 
          $rootScope.hasSidebar = false;
          return false; }
    }
})

answered Mar 18 '15 at 14:17

jarz

732
7
20

Ideally you wouldn't use the $rootScope like this but since you don't have the angularjs controllers wired yet, I did it this way just to illustrate you could set a resolve on the routeProvider and use that value on the controller/view. – jarz Mar 18 '15 at 14:21

How to update content based on sidebar in AngularJS

2 Answers2