6

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">Link 1</a>
      </li>
      <li>
        <a ng-href="#/link2">Link 2</a>
      </li>
      <li>
        <a ng-href="#/link3">Link 3</a>
      </li>
    </ul>
  </div>
birdy
  • 9,286
  • 24
  • 107
  • 171

2 Answers2

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/

Miguel Mota
  • 20,135
  • 5
  • 45
  • 64
  • 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. – birdy Mar 18 '15 at 12:11
  • I was able to take your fiddle and update it to my needs. http://jsfiddle.net/mcVfK/929/ It works as it is however, to be efficient, how can I avoid including sidebar.html on every sidebar link? – birdy Mar 18 '15 at 13:53
  • 2
    @birdy oh okay, I misunderstood your question. See this http://jsfiddle.net/mcVfK/933/ – Miguel Mota Mar 18 '15 at 16:44
0

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

Community
  • 1
  • 1
Chandermani
  • 42,589
  • 12
  • 85
  • 88
  • 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 – birdy Mar 18 '15 at 05:58
  • 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` – Chandermani Mar 18 '15 at 06:01
  • 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. – birdy Mar 18 '15 at 06:08
  • 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` – Chandermani Mar 18 '15 at 07:30