Come fare più viste con Angular per supportare l'intestazione e la barra laterale?

Question

Sto usando AngularJS per la prima volta. Ho implementato con successo un singolo ng-view nella mia pagina index.html che contiene un modello header.html. Quindi sembra che sotto

Ma ora sto creando un cruscotto (dashboard.html). Così, ho un menu a sinistra in aggiunta a header.html in modo che assomiglia a questo:

mio index.html è simile a questo:

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

mio dashboard .html è simile a questo:

<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

Prova questa:

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

Un'opzione sarebbe di guardare ui-router in quanto consente facilmente tale personalizzazione.

La seconda opzione consiste nel creare un controllo leftNav separato dal dashboard e quindi includerlo nell'index.html. Mostralo e nascondilo in base alla vista attiva.

vedere uno dei miei vecchi risposte Slicing an SPA into several components and use AngularJS