Question

使用angular 1.6，这是我需要的组件：

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

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

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

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

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

赞赏任何其他标准架构。

Answer 1

正如评论中所提到的，可以通过多种架构和框架选择来实现您正在寻找的模板类型。我将提供一个基于我过去使用过的角色的基本示例，使用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（为简单起见使用bootstrap）：

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

您可以将此页面视为布局的根目录。使用引导列将页面拆分为左侧和右侧部分。左侧包含所有内容视图的列表。你可以使用li，我只是喜欢div。右侧将是页面的动态部分，其中内容将根据侧栏中选择的项目进行更改。每个组件视图都是着陆页的子级，它继承了父级的所有功能，然后将自己的内容添加到ui视图中，类似于landing.html将其内容添加到 main 中的方式用户界面视图。现在让我们来看看使所有这些工作的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 。然后，每个孩子的网址路径将解析为 / landing / content1 ， / landing / content2 ， landing / content3 。因此，现在只要您导航到这些位置，只有该特定孩子的内容将嵌套在着陆页中，并且＃34;内容＆＃34; ui-view和页面的剩余布局保持不变。

为了完成，这就是着陆控制器的外观：

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

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

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

1 个答案: