Question

我正在开发一个具有以下结构的应用程序：

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

enter image description here

约束选择在侧栏中进行，影响主题列表显示在主视图区域中。

现在一切正常但是我已经到了我的应用程序变得越来越复杂的阶段。

在某些情况下，我想完全替换主视图中的内容而不显示主题列表但显示主题本身（渲染另一个模板，例如views / topic.html）但我仍然想要保留侧边栏而不是重新加载它。然后能够返回到主题列表。

主视图中的这个新主题视图还需要使用另一个控制器以及侧边栏的控制器，该控制器当前是“resultsController”。

目前我使用ng-route和以下结构：

$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-router这会是怎么回事？如果是这样我将如何构建我的路线/视图/控制器？）

Answer 1

UI-Router可以通过两种方式处理：嵌套视图和命名视图：

嵌套视图：

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-views：

<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: {
    "side@": { templateUrl: "side.html", controller: 'filterCtrl' },
    "content@": { templateUrl: "items.html", controller: 'listCtrl' }    
  }
})
.state('top.item', {
  url: "/:id",
  views: {
    "side@": { templateUrl: "side.html", controller: 'filterCtrl' },
    "content@": {  templateUrl: "item.html", controller: 'itemCtrl' }
  }
});

“side @”命名约定意味着插入名为“side”的ui视图，该视图存在于“”（根/空字符串）状态。这是使用的，因此您可以在其他模板中定义其他命名子视图，然后使用类似“details@top.item”的内容插入这些命名的ui视图。

AngularJS应用程序架构/结构

1 个答案: