如何引导基于组件的角1应用程序？

采用了棱角分明1.6，这里有我需要的组件：如何引导基于组件的角1应用程序？

+-------------------+ 
|side|    | 
|bar |    | 
|... |  view  | 
|... |    | 
|... |    | 
+-------------------+

边栏：放置在左侧。使用ng-repeat并动态更新。
查看：其余的应用程序。模板是静态的，但点击侧栏时内容会发生变化。

当用户点击侧栏的每个列表<li>时，它更新视图。只有查看内容/模型会改变。不是html模板。

重要说明：我只是不想在<body>中编写代码。希望在一个HTML文件中有侧边栏，并在另一个与其控制器关联的视图中显示，并通过<body>中的ng-view呈现整个应用。

侧栏动态更新，因此我无法在config（）中为每个指定状态。

赞赏其他任何标准体系结构。

来源

2017-04-18 DragonKnight

这是真的堆栈溢出过于宽泛。你试过什么了？ –

@DavidL我只需要关于体系结构的指导。还没有开始，因为我不想在体内编写代码。我正在删除进度条部分。 – DragonKnight

可以理解，但这不是Stack Overflow的用处。这是为了具体的问题。这受到意见的影响（因为架构总是如此），并且太宽泛而无法提供***具体的答案。 –

正如评论中提到的那样，可以通过多种体系结构和框架选择来实现您正在寻找的模板类型。我将使用ui-router和子/嵌套视图提供一个基于过去角度使用的基础示例。

比方说你有这样一个index.html：

<body> 
    <div ui-view="header" class="header"></div> 
    <div ui-view="main" class="main"></div> 
    <div ui-view="footer" class="footer"></div> 
</body>

索引页只对最高层视图，即标题，内容和页脚的布局。如果您不需要页眉和页脚，则可以忽略/删除它。现在，您正在寻找的布局（左侧的侧栏和右侧的内容）将被放置在主要的视图中。要做到这一点，您声明另一个网页，其中将规定这种结构，称之为landing.html上（使用引导为简单起见）：

<div class="container-fluid"> 
    <div class="row landingContainer"> 
    <div class="col-md-2 col-sm-4 col-xs-3 sidebarSection"> 
     <div class="row item" ng-click="landing.changePage('content1')"> 
     <span>Show Content 1</span> 
     </div> 
     <div class="row item" ng-click="landing.changePage('content2')"> 
     <span>Show Content 2</span> 
     </div> 
     <div class="row item" ng-click="landing.changePage('content3')"> 
     <span>Show Content 3</span> 
     </div> 
    </div> 
    <div class="col-md-10 col-sm-8 col-xs-9 contentSection"> 
     <div ui-view="content"></div> 
    </div> 
    </div> 
</div>

你可以把这个页面作为布局的根。该页面使用引导列分成左侧和右侧部分。左侧包含所有内容视图的列表。你可以使用李，我只是喜欢div。右侧将是页面的动态部分，其中内容将根据侧栏中选择的项目进行更改。每个组件视图都是着陆页的子视图，它继承父级的所有功能，然后将其自己的内容添加到UI视图中，类似于landing.html将其内容添加到UI视图中的方式。现在让我们看看使所有这些工作成功的ui-router配置。

function routerConfig($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('landing', { 
     url: '/landing', 
     views: { 
     'header': { 
      templateUrl: 'app/components/header/headerPrivate.html', 
      controller: 'HeaderController', 
      controllerAs: 'header' 
      }, 
      'main': { 
      templateUrl: 'app/landing/landing.html', 
      controller: 'LandingController', 
      controllerAs: 'dashboard' 
      }, 
      'footer': { 
      templateUrl: 'app/components/footer/footer.html', 
      controller: 'FooterController', 
      controllerAs: 'footer' 
      } 
     } 
     }) 
     .state('landing.content1', { 
     url: '/content1', 
     views: { 
     'content': { 
      templateUrl: 'app/content1/content1.html', 
      controller: 'Content1Controller', 
      controllerAs: 'content1' 
      } 
     } 
     }) 
     .state('landing.content2', { 
     url: '/content2', 
     views: { 
     'content': { 
      templateUrl: 'app/content2/content2.html', 
      controller: 'Content2Controller', 
      controllerAs: 'content2' 
      } 
     } 
     }) 
     .state('landing.content3', { 
     url: '/content3', 
     views: { 
     'content': { 
      templateUrl: 'app/content3/content3.html', 
      controller: 'Content3Controller', 
      controllerAs: 'content3' 
      } 
     } 
     }) 
    $urlRouterProvider.otherwise('/'); 
}

这里您会注意到，登录页面路由定义了3个主视图，页眉，主页和页脚的配置。网址路径为/landing。然后，content1，content2和content3通过使用点符号将它们嵌套在着陆点中定义为儿童：landing.content1。然后，每个孩子的url路径将解析为/landing/content1,/landing/content2,landing/content3。因此，无论何时，只要您导航到这些位置，该特定子项的内容就会嵌套在着陆页“content”ui-view中，而页面的其余布局保持不变。

完成的缘故，这是着陆器的外观：

function LandingController($state) { 
    var vm = this; 

    vm.changePage = function(page){ 
     $state.transitionTo('landing.'+page, null, null); 
    }  
}

来源

2017-04-18 20:38:41 Sasang

这是一个非常好的解释。谢谢。这不包含的是侧边栏用ng-repeat填充并且是动态的。我不知道如何在config（）中设置动态状态，我不认为这是角度推荐的。你也有解决办法吗？谢谢。 :) – DragonKnight

边栏中的动态列表如何影响内容视图？你是否也动态获取HTML，以显示在内容区域？ – Sasang

侧栏的每个项目都有一个ID和一些夏季信息。当你点击它应该更新基于该项目的视图。该视图包含更多的信息，包括一些图表，其他表格等等，而且没有什么是静态的。基本上每次点击左侧的侧栏时，我必须拨打一个新电话。由于视图是动态的，我无法在config（）中为每个视图提供状态。所以答案是肯定的，我想。 – DragonKnight

如何引导基于组件的角1应用程序？

回答

相关问题