Question

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

基本上我拥有的是一些不同的观点＆＃34;加载为tab-content。

我使用有角度的路线将视图模板映射到每个标签的内容，当它被点击时。我尝试过不同的其他结构 - 控制器和放大器。指令，但我认为路由是最有效的。

每个标签的内容都是抓取一堆数据并将其填充到每个标签下的表格中。即每个表具有不同的数据，只有在激活/单击选项卡时才需要访问这些数据。

我担心在我当前的设置中，在加载初始页面时会调用所有数据（对于每个表），从而显着降低初始应用程序负载。我是否正确地想到了这一点？

如何优化当前设置以仅加载视图/数据？

的index.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>

我的app.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 /视图/ 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()

的适当路径

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

1 个答案: