Jak wykonać wiele widoków za pomocą Angular, aby obsługiwać nagłówek i pasek boczny?

Question

Używam AngularJS po raz pierwszy. Pomyślnie zaimplementowałem pojedynczą ng-view na mojej stronie index.html, która zawiera szablon header.html. Wygląda więc na to poniżej

Ale teraz tworzę deski rozdzielczej (dashboard.html). Tak, mam lewy bok w menu, oprócz header.html więc wygląda to tak:

Moja index.html jest podobny do tego:

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

Moja deska rozdzielcza .html jest podobny do tego:

<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

Spróbuj tego:

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

Jedna opcja będzie wyglądać na ui-router, ponieważ pozwala na takie dostosowanie łatwo.

Druga opcja polega na utworzeniu kontrolki leftNav oddzielonej od deski rozdzielczej, a następnie uwzględnieniu jej w pliku index.html. Pokaż i ukryj na podstawie aktywnego widoku.

Zobacz jeden z moich starych odpowiedzi Slicing an SPA into several components and use AngularJS