How to make multiple views using Angular to support title and sidebar?

Question

I am using AngularJS for the first time. I have successfully implemented one ng-view on my index.html page that contains the header.html template. Therefore it looks lower

But now I am creating a dashboard ( dashboard.html ). So, I have a menu on the left 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 like 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> 

Answer 1

Try the following:

 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/

Answer 2

One option is to look at ui-router , as this allows you to easily configure such a setting.

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

See one of my old answers slicing SPA into multiple components and using AngularJS