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

All we need is an easy explanation of the problem, so here it is.

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

enter image description here

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:

enter image description here

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" rel="nofollow noreferrer noopener">Link 1</a>
      </li>
      <li>
        <a ng-href="#/link2" rel="nofollow noreferrer noopener">Link 2</a>
      </li>
      <li>
        <a ng-href="#/link3" rel="nofollow noreferrer noopener">Link 3</a>
      </li>
    </ul>
  </div>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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/

Method 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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply