AngularJS應用架構/結構

我開發具有以下結構的應用程序：AngularJS應用架構/結構

|--------------------- header -------------------| 
|            | 
|-----sidebar-----|-----------Main View----------| 
|     |        | 
| constraints |  list of topics   | 
|     |        | 
|     |        | 
|     |        | 
|_________________________________________________

enter image description here

約束選擇在側邊欄做主題列表在主視圖區中顯示其效果。

現在，這一切工作正常，但我已經到了我的應用程序變得越來越複雜的階段。

在某些情況下，我想更換什麼是在主視圖完全和不顯示的主題列表，但顯示主題本身（渲染另一個模板如視圖/ topic.html），但我還是想保留側邊欄，不重新加載它。然後能夠返回到主題列表。

在Main View中的這個新的主題視圖也需要使用另一個控制器，以及當前爲'resultsController'的側欄控制器。

目前我使用NG-路線和結構如下：

$routeProvider.when('/', { templateUrl: 'views/results.html' }); 

<ng-view></ng-view> 

// views/results.html 
//------------------------------------------------------ 
<div data-ng-controller="resultsController"> 
    <div ng-include src="'views/header.html'"></div> 
    <div ng-include src="'views/sidebar.html'"></div> 
    <div id="Main View"> 
     <div ng-repeat="topic in topics"></div> 
    </div> 
</div>

是什麼正確的方法來組織/建築師我的應用程序？

（我已經看過UI路由器這會不會要走的路？如果是的話我會怎麼構建我的路線/視圖/控制器？）

來源

2014-03-24 Tom

http://angular-route-segment.com/？ – Tom

UI，路由器可以通過兩種方式，嵌套視圖處理這和命名視圖：

嵌套視圖：

http://plnkr.co/edit/ngpVmjsxRaCmLYx3wbA5?p=preview

在此示例中，視圖巢，從頂部開始，帶側嵌套在頂部，然後列表和項目嵌套在一邊。

$stateProvider.state('top', { 
    url: "", 
    templateUrl: "header.html", 
    controller: 'topCtrl' 
}) 
.state('top.side', { 
    url: '/app', 
    templateUrl: "side.html", 
    controller: 'filterCtrl' 
}) 
.state('top.side.list', { 
    url: "/items?query", 
    templateUrl: "items.html", 
    controller: 'listCtrl' 
}) 
.state('top.side.item', { 
    url: "/:id", 
    templateUrl: "item.html", 
    controller: 'itemCtrl' 
});

命名視圖：

另一種方法是定義一個名爲佔位符的意見，然後在狀態狀態視圖定義插入他們進來。這些被稱爲「多個命名視圖」。 http://plnkr.co/edit/lz00GAXowMGTAba3dc8a?p=preview

佔位符被命名爲UI的觀點：

<body ng-app="nested"> 
    <div id="header" ui-view="header"></div> 
    <div id="side" ui-view="side"></div> 
    <div id="content" ui-view="content"></div> 
</body>

這些佔位符得到填補與從狀態定義訪問量：

.state('top', { 
    url: "", 
    views: { 
    header: { templateUrl: "header.html" }, 
    } 
}) 
.state('top.list', { 
    url: "/items?query", 
    views: { 
    "[email protected]": { templateUrl: "side.html", controller: 'filterCtrl' }, 
    "[email protected]": { templateUrl: "items.html", controller: 'listCtrl' }  
    } 
}) 
.state('top.item', { 
    url: "/:id", 
    views: { 
    "[email protected]": { templateUrl: "side.html", controller: 'filterCtrl' }, 
    "[email protected]": { templateUrl: "item.html", controller: 'itemCtrl' } 
    } 
});

的「側@」命名約定是指插入以「」（根/空字符串）狀態存在的名爲「side」的ui-view。這是用來在其他模板中定義額外的命名子視圖，然後使用諸如「[email protected]」之類的命令插入到那些命名的ui-views中。

來源

2014-03-26 13:13:49

非常好的解釋和例子，謝謝你讓它變得如此清晰 – Tom

AngularJS應用架構/結構

回答

相關問題