当选项卡处于活动状态时加载角度模板

Question

我是Angular的新手，所以只是学习细节。我正在构建一个数据仪表板并链接到我自己的 REST 接口。目前我的应用程序非常慢。

基本上，我拥有的是几个不同的"视图"，这些视图作为选项卡内容加载。

我正在使用角度路线将视图模板映射到单击每个选项卡的内容。我尝试了不同的其他结构 - 控制器和指令，但我认为路由是最有效的。

每个选项卡

的内容是抓取一堆数据并将其填充到每个选项卡下的表中，即每个表都有不同的数据，只有在选项卡处于活动状态/单击时才需要访问。

我担心在我当前的设置中，加载初始页面时会调用所有数据（每个表），从而显着减慢初始应用程序加载速度。我这样想是对的吗？

如何优化当前设置，使其仅在需要时加载视图/数据？

索引.php

<div ng-app="myApp" class="row-fluid">
   // Lods the controller which isn't really being used
   <div class="right-container" ng-controller="MainController">
      // Loads the clickable tabs
      <ul class="nav nav-tabs nav-justified">
          <li class="active"><a data-toggle="tab" href="#inventory" >Inventory</a></li>
           <li><a data-toggle="tab" href="#orders" >Orders</a></li>
           <li><a data-toggle="tab" href="#products" >Products</a></li>
       </ul>
       // Loads the tab content & ng-view for the Angular Routes
       <div class="tab-content">
           <div ng-view></div>
       </div>
   </div>
</div>

我的应用.js文件：

var app = angular.module("myApp", ['ngRoute']);
app.config(function ($routeProvider) { 
  $routeProvider 
    .when('/', { 
      controller: 'MainController', 
      templateUrl: 'js/views/inventory.php' 
    })
    .when('/inventory', { 
      templateUrl: 'js/views/inventory.php' 
    }) 
    .when('/orders', { 
      templateUrl: 'js/views/orders.php' 
    }) 
    .when('/products', { 
      templateUrl: 'js/views/products.php' 
    }) 
    .otherwise({ 
      redirectTo: '/' 
    }); 
});

我的一个视图示例 - 数据直接加载到此处的 boostrap 表中 - 每个视图都有来自单独 API 的不同数据，但我认为在我当前的设置中（因为它非常慢），当加载主页时，所有数据都在每个视图中下降。

js/views/inventory.php

<div id="inventory" class="tab-pane active">
    <table class="col-xs-12 text-center" id="inventoryTable" data-url="http://myrestapi.com/api/v1/inventory">
        <thead>
            <tr>
                <th data-field ="name">Name</th>
                <th data-field="modifiedTime">Last Modified</th>
                <th data-field="stockCount">Current Stock</th>
                <th data-field="cost">Cost Price</th>
                <th data-field="price">Price</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

Answer 1

如果您使用不同的路线，请不要将选项卡视为切换内容...只需将选项卡HTML视为不需要JavaScript的导航选项卡即可

因此，您不需要他们的data-toggle。

您需要的是一种基于路由设置活动类的方法。

对于其中的几个，您可以使用ng-class并将其设置为活动状态以获取适当的路径$location.path()