How to do multiple views with Angular to support header and sidebar?

Question

I'm using AngularJS for the first time. I've successfully implemented a single ng-view in my index.html page which contains a header.html template. So it looks like below

But now I'm creating a dashboard (dashboard.html). So, I have a left side menu in-addition to header.html so it looks like this:

My index.html is similar to this:

<div  ng-include="'templates/header.html'"></div>
<div class="main" id="main-no-space" >
  <div id="main-page">
    <div id="wrapper" class="container">
      <div class='container'>
        <div ng-view></div>
      </div>
    </div>
  </div>
<div  ng-include="'templates/footer.html'">

My dashboard.html is similar to this:

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav">
      <li class="active">
        <a ng-href="#/link1">Link 1</a>
      </li>
      <li>
        <a ng-href="#/link2">Link 2</a>
      </li>
      <li>
        <a ng-href="#/link3">Link 3</a>
      </li>
    </ul>
  </div>

Halfdan

Answer 1

Try this:

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

function DashboardCtrl() {

}

* {
    box-sizing: border-box;
}
#main:after {
    content: "";
    display: block;
    clear: both;
}
#header {
    padding: 20px;
    border: 1px solid #000;
}
#main {
    padding: 20px;
    border: 1px solid #000;
}
#sidebar {
    padding: 20px;
    border: 1px solid #000;
    float: left;
    width: 20%;
}
#content {
    padding: 20px;
    border: 1px solid #000;
    float: right;
    width: 78%;
}
#footer {
    padding: 20px;
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<div ng-app="app">
    <div ng-include="'header.html'" id="header"></div>
    <div class="main" id="main-no-space">
        <div id="main-page">
            <div id="wrapper" class="container">
                <div class="container">
                    <div ng-view id="main">loading...</div>
                </div>
            </div>
        </div>
        <div ng-include="'footer.html'" id="footer"></div>
    </div>
    <script type="text/ng-template" id="dashboard.html">
        <div ng-include="'sidebar.html'" id="sidebar"></div>
        <div id="content">dashboard</div>
    </script>
    <script type="text/ng-template" id="header.html">
        header
    </script>
     <script type="text/ng-template" id="sidebar.html">
        sidebar
    </script>
    <script type="text/ng-template" id="footer.html">
        footer
    </script>
</div>

JSFiddle http://jsfiddle.net/mcVfK/928/

Biblio

Thanks for the detailed answer. but I'm a bit confused. In the fiddle there are no links. In my example there are links in the header and in the side bar. When a link in the sidebar is clicked then the content area will change based on that link while the header still remains as it is. – Halfdan

I was able to take your fiddle and update it to my needs. jsfiddle.net/mcVfK/929 It works as it is however, to be efficient, how can I avoid including sidebar.html on every sidebar link? – Halfdan

@Halfdan oh okay, I misunderstood your question. See this jsfiddle.net/mcVfK/933 – Biblio

Answer 2

One option would be to look at ui-router as it allows you to such customization easily.

The second option is to create a leftNav control separate from dashboard and then include it in the index.html. Show and hide it based on the active view.

See one of my old answers Slicing an SPA into several components and use AngularJS

Orvie

I see. So dashboard.html will be a separate template (similar to header.html). How would I show/hide it? I didn't see that in the answer you pointed to – Halfdan

there could be a dashboard-leftnav.html. This would contain view specific to left nav shown with dashboard. The dashboard.html would be the main view, that is loaded in ng-view like other views. The area that you have marked content – Orvie

The problem is that that way I have to include dashboard-leftnav.html in index.html. But then it will be shown for all pages. I only want it to show when Dashboard link gets clicked in the header navigation. – Halfdan

If you look at my answer. There is a RootController. This controller can subscribe to route change and set the correct template by looking at the route. If no template is set, you can hide the left nav using ng-if – Orvie