Wie können mehrere Ansichten mit Angular ausgeführt werden, um Header und Sidebar zu unterstützen?

Question

Ich benutze AngularJS zum ersten Mal. Ich habe erfolgreich eine einzelne ng-view in meiner index.html Seite implementiert, die eine header.html Vorlage enthält. So sieht es aus wie unten

Aber jetzt bin ich die Schaffung eines Armaturenbretts (dashboard.html). Also, ich habe eine linke Seitenmenü-neben header.html so dass es wie folgt aussieht:

Meine index.html ist ähnlich wie diese:

<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'"> 

Mein Armaturenbrett .html ist ähnlich zu diesem:

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

Answer 2

Eine Option wäre, um ui-router zu betrachten, wie es Ihnen solche Anpassung leicht ermöglicht.

Die zweite Option besteht darin, ein leftNav-Steuerelement separat vom Dashboard zu erstellen und es dann in die index.html einzufügen. Zeigen und verbergen Sie es basierend auf der aktiven Ansicht.

Siehe einen meiner alten Antworten Slicing an SPA into several components and use AngularJS