Làm cách nào để thực hiện nhiều chế độ xem với Angular để hỗ trợ tiêu đề và thanh bên?

Question

Tôi đang sử dụng AngularJS lần đầu tiên. Tôi đã triển khai thành công một trang ng-view trong trang index.html của mình chứa mẫu header.html. Vì vậy, nó trông giống như dưới đây

Nhưng bây giờ tôi đang tạo ra một bảng điều khiển (dashboard.html). Vì vậy, tôi có một menu bên trái trong-ngoài header.html để nó trông như thế này:

index.html của tôi là tương tự như sau:

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

bảng điều khiển của tôi .html tương tự như vậy:

<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

Hãy thử điều này:

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

Một tùy chọn sẽ xem xét ui-router vì nó cho phép bạn tùy biến dễ dàng như vậy.

Tùy chọn thứ hai là tạo điều khiển tráiNav tách khỏi bảng điều khiển và sau đó đưa nó vào index.html. Hiển thị và ẩn nó dựa trên chế độ xem đang kích hoạt.

Xem một trong những câu trả lời cũ của tôi Slicing an SPA into several components and use AngularJS