1
我是Angular的新手，刚刚学习了具体细节。我正在构建一个数据仪表板并链接到我自己的REST界面。目前我的应用程序非常慢。当选项卡处于活动状态时加载角模板
基本上我所拥有的是加载为标签内容的一些不同的“视图”。
我使用角度路线将视图模板映射到每个选项卡点击时的内容。我试过不同的其他结构 - 控制器&指令，但我认为路线是最有效的。
每个选项卡的内容都会抓取一堆数据并将其填充到每个选项卡下的表格中。即每个表具有不同的数据，只有当该标签被激活/点击时才需要访问该数据。
我担心的是，在我当前的设置中，所有数据（对于每个表）都会在初始页面加载时调用，从而显着减慢初始应用程序的加载速度。我在想这个吗？
我该如何优化当前的设置以仅根据需要加载视图/数据？
的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: '/'
});
});
的我的视图之一的样品 - 的数据被直接这里装载到自举表 - 每个视图具有不同数据来自一个单独的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>