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应用架构/结构

回答

相关问题