Góc ui-router: chế độ xem lồng nhau so với nhiều chế độ xem

Question

ui-router là giải pháp thay thế tuyệt vời cho bộ định tuyến chuẩn của angular; nó hỗ trợ nested states and views và multiple views.

Tôi hơi bối rối một chút, bởi sự khác biệt giữa hai yếu tố này. Dường như với tôi rằng nhiều lượt xem hầu như luôn có thể được suy nghĩ và triển khai dưới dạng chế độ xem lồng nhau của thành phần "bậc cao hơn". Ví dụ: nếu chúng tôi xem xét một ứng dụng có hộp bên và hộp nội dung, chúng tôi có thể mô hình hóa chúng dưới dạng hai chế độ xem "song song" hoặc làm cho thanh bên chế độ xem cha và khung nội dung của chế độ xem con của nó phụ thuộc vào mục thanh bên đã chọn .

Các readme bản thân dường như cho thấy bộ phận là không thực sự rõ ràng:

Pro Mẹo: Trong khi nhiều quan điểm song song là một tính năng mạnh mẽ, bạn sẽ thường xuyên có thể quản lý các giao diện của bạn một cách hiệu quả hơn bằng cách lồng ghép các chế độ xem của bạn và ghép nối các chế độ xem đó với các trạng thái lồng nhau.

Khi nào tôi nên sử dụng nhiều chế độ xem và khi xem lồng nhau? Có một số tiêu chí có thể giúp bạn chọn hầu hết thời gian đó là cách chính xác để mô hình hóa các trạng thái, lồng nhau so với nhiều?

Answer 1

Trong sự hiểu biết của tôi, nhiều quan điểm là chủ yếu cho bố trí mục đích, trong khi quan điểm lồng nhau là dành cho mẹ-trẻ em quan điểm phân cấp. Sử dụng trường hợp bạn nêu là một ví dụ:

Thanh bên và các nội dung có thể được sắp xếp như hai quan điểm khác biệt:

$stateProvider.state('main', { 
     abstract: true, 
     url: '/main', //base url for the app 
     views: { 
     '': { 
       //this serves as a main frame for the multiple views 
       templateUrl: 'path/to/the/main/frame/template.html' 
     }, 
     'sideBar@main': { 
      templateUrl: 'path/to/the/sidebar/template.html' 
      }, 
     'content@main': { 
      templateUrl: 'path/to/the/content/template.html' 
     } 
     } 
}); 

Các path/to/the/main/frame/template.html mẫu có thể chứa các khung sau:

<div class="row"> Header section </div> 
<div class="row> 
    <div class="col-sm-4"><div ui-view="sideBar"></div></div> 
    <div class="col-sm-8"><div ui-view="content"></div></div> 
</div> 

Sau đó, trong sideBar hoặc các mẫu nội dung, bạn có thể lồng con cái của họ subview/partials.

Answer 2

Trạng thái lồng nhau có thể được sử dụng với cả chế độ xem lồng nhau và song song.

Chỉ cần lưu ý điều gì đó về lồng nhau tiểu bang.

Điều gì làm cho lồng nhau trạng thái tuyệt vời là bạn có thể dễ dàng chia sẻ/kế thừa dữ liệu từ chế độ xem cha hoặc con.

ví dụ:.

phép nói rằng bạn có một số trang yêu cầu người dùng đã đăng nhập

$stateProvider 
.state('admin', { 
    url: '/admin' 
    resolve: { authenticate: authenticate } 
}) 
.state('admin.users', { 
    url: '/users' 
}) 

function authenticate(Auth) { 
    if (Auth.isLoggedIn()) { 
     // Resolve the promise successfully 
     return $q.when(); 
    } else { 
     $timeout(function() { 
      // This code runs after the authentication promise has been rejected. 
      // Go to the log-in page 
      $state.go('login', {}, {reload:true}); 
     }); 
     // Reject the authentication promise to prevent the state from loading 

    return $q.reject(); 
}  

Bây giờ mỗi trạng thái đó là một trạng thái con của quản trị viên phải vượt qua authenticate dịch vụ (ngay cả khi bạn điều hướng trực tiếp đến admin/users/).

Vì vậy, về cơ bản trong giải quyết, bạn có thể đặt bất kỳ thứ gì và tất cả các trạng thái con sẽ thừa hưởng từ đó.

Đối với chế độ xem song song, bạn có toàn quyền kiểm soát bố cục của mình.
@TonyGW 's dụ là rất tốt

Bạn thể sử dụng chúng cả trong ứng dụng của bạn cùng một lúc, Ý tôi là tiểu bang lồng nhau và quan điểm song song và bạn cũng có thể có tầm nhìn song song lồng nhau. Nó thực sự phụ thuộc vào cấu trúc bố trí bố trí của bạn.

Nếu bạn muốn trạng thái con xuất hiện bên trong html của trạng thái gốc, bạn phải sử dụng chế độ xem lồng nhau.