Làm cách nào để thiết lập chế độ xem lồng nhau trong AngularJS?

Question

Tôi có một ứng dụng có nhiều màn hình khác nhau. Mỗi màn hình được gán một URL, chẳng hạn như #, mails, contacts, v.v.

Trong tệp HTML chính của tôi, tôi có phần tử ng-view cập nhật theo tuyến đường mà người dùng chọn. Càng xa càng tốt.

Bây giờ, một số màn hình này có điều hướng phụ. Ví dụ: #mails không có hộp thư đến và thư mục đã gửi. Họ trình bày themselfes với hai cột: Điều hướng phụ ở bên trái, thư của thư mục thích hợp ở bên phải.

Khi bạn điều hướng đến #mails thì chuyển hướng bạn đến #mails/inbox, do đó về cơ bản inbox là mặc định sub-view cho mail.

Tôi có thể thiết lập điều này bằng cách nào?

Cách tiếp cận duy nhất tôi có thể nghĩ đến (Tôi khá mới với AngularJS, do đó tha thứ cho tôi nếu câu hỏi này hơi ngây thơ) có hai chế độ xem, một cho #mails/inbox và một cho #mails/sent.

Khi bạn chọn tuyến đường, các chế độ xem này sẽ được tải. Khi bạn chọn #mails, nó chỉ chuyển hướng bạn đến #mails/inbox.

Nhưng điều này có nghĩa là cả hai chế độ xem phải sử dụng ng-include cho điều hướng phụ. Bằng cách nào đó điều này cảm thấy sai với tôi.

Điều tôi muốn có nhiều hơn là có chế độ xem lồng nhau: Phần trên cùng chuyển giữa các màn hình như thư, danh bạ, v.v. và phần dưới cùng thay đổi giữa các chế độ xem phụ như hộp thư đến, đã gửi, v.v. .

Làm cách nào để giải quyết vấn đề này?

Answer 1

AngularJS ui-router giải quyết vấn đề của tôi :-)

Answer 2

thư viện khác để kiểm tra: http://angular-route-segment.com

Bạn có thể sử dụng nó thay vì tích hợp ng-view và $route.

tuyến đường mẫu cấu hình trông như thế này:

$routeSegmentProvider. 

when('/section1',   's1.home'). 
when('/section1/prefs', 's1.prefs'). 
when('/section1/:id',  's1.itemInfo.overview'). 
when('/section1/:id/edit', 's1.itemInfo.edit'). 
when('/section2',   's2'). 

segment('s1', { 
    templateUrl: 'templates/section1.html', 
    controller: MainCtrl}). 

within(). 

    segment('home', { 
     templateUrl: 'templates/section1/home.html'}). 

    segment('itemInfo', { 
     templateUrl: 'templates/section1/item.html', 
     controller: Section1ItemCtrl, 
     dependencies: ['id']}). 

    within(). 

     segment('overview', { 
      templateUrl: 'templates/section1/item/overview.html'}). 

     segment('edit', { 
      templateUrl: 'templates/section1/item/edit.html'}). 

     up(). 

    segment('prefs', { 
     templateUrl: 'templates/section1/prefs.html'}). 

    up(). 

segment('s2', { 
    templateUrl: 'templates/section2.html', 
    controller: MainCtrl});