Fatal编程技术网
  • javascript/
  • Javascript AngularJS应用程序架构/结构

Javascript AngularJS应用程序架构/结构

javascript angularjs architecture

Javascript AngularJS应用程序架构/结构,javascript,angularjs,architecture,angular-ui-router,Javascript,Angularjs,Architecture,Angular Ui Router,我正在开发具有以下结构的应用程序： |--------------------- header -------------------| | | |-----sidebar-----|-----------Main View----------| | | | | constraints | li

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

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

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

现在这一切都很好，但我已经到了我的应用程序变得越来越复杂的阶段

在某些情况下，我希望完全替换主视图中的内容，而不是显示主题列表，而是显示主题本身（呈现另一个模板，例如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>

$routeProvider.when（'/'，{templateUrl:'views/results.html'}）；
//views/results.html
//------------------------------------------------------
构建/构建我的应用程序的正确方法是什么？

（我已经看过ui router这是一种方式吗？如果是，我将如何构造我的路由/视图/控制器？

ui router可以通过两种方式处理此问题，嵌套视图和命名视图：

嵌套视图：

在本例中，视图从顶部开始嵌套，侧面嵌套在顶部，然后列表和项目嵌套在侧面

$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'
});
命名视图：

另一种方法是为视图定义命名占位符，然后将它们与状态上的视图定义一起插入。这些视图称为“多个命名视图”。

占位符是命名的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>
“side@”命名约定意味着插入名为“side”的ui视图，该视图存在于“”（根/空字符串）状态。这样，您就可以在其他模板中定义其他命名子视图，然后使用类似于details@top.item“

？非常棒的解释和示例，感谢您如此清晰地解释 
.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' }
  }
});