如何 bootstrap 基于组件的 angular 1 个应用程序？

Question

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

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

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

当用户单击侧边栏的每个列表 <li> 时，它会更新视图。只有视图 content/model 会改变。不是 html 模板。

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

边栏会动态更新，因此我无法在 config() 中为每个栏指定状态。

感谢任何其他标准架构。

Answer 1

如评论中所述，可以选择多种体系结构和框架来实现您正在寻找的模板类型。我将提供一个基于我过去在 angular 中使用过的东西的基本示例，使用 ui-router 和 child/nested 视图。

假设您有一个 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>

索引页只有最高层视图的布局，即页眉、内容和页脚。如果您不需要页眉和页脚，您可以 ignore/remove 。现在，您正在寻找的布局（左侧是侧边栏，右侧是内容）将放置在 main 视图中。为此，让我们声明另一个将定义此结构的页面，将其命名为 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>

您可以将此页面视为布局的根。使用 bootstrap 列将页面分成左右两部分。左侧包含所有内容视图的列表。你可以使用 li，我只是更喜欢 div。右侧将是页面的动态部分，内容将根据侧栏中选择的项目而变化。每个组件视图都是一个 child 的着陆页，它继承了 parent 的所有功能，然后将自己的内容添加到 ui-view 中，类似于 landing.html 添加的方式其内容进入mainui-view。现在让我们看一下使所有这些工作正常的 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 个主要视图（页眉、主要视图和页脚）的配置。 url 路径将是 /landing。然后将 content1、content2 和 content3 定义为 children，方法是使用圆点表示法将它们嵌套在 landing 中：landing.content1。每个 child 的 url 路径将解析为 /landing/content1、/landing/content2， landing/content3。因此，现在无论何时您导航到这些位置，只有特定 child 的内容将嵌套在着陆页 "content" ui-view 中，页面的其余布局保持不变。

为了完整起见，着陆控制器可能是这样的：

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

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

如何 bootstrap 基于组件的 angular 1 个应用程序？

How to bootstrap component based angular 1 application?

javascript

architecture

angularjs

single-page-application

ng-view