Question

我有很多相对相同的页面，因此我尝试使用AngularJS和JSON文件加载页面，以减少我必须编写的html数量。这是我现在的代码：

HTML：

<a class="btn home-link one" ng-click="caseindex.number=(1)" ng-href="#/case_study/" ></a>
<a class="btn home-link two" ng-click="caseindex.number=(2)" ng-href="#/case_study/" ></a>

JS：

.controller('CaseCtrl', function($scope, $http ,caseindex, passString, resourceCache) {
    $scope.caseindex = caseindex;
      var case_select = $http({method:"GET", url:'json/case'+ caseindex.number +'.json', cache:resourceCache})
           .then(function(res){
              $scope.case_select = res.data;
                console.log(res);   

            });
})
 .config(function($routeProvider) {
    $routeProvider.when('/case_study/', {
    controller : 'CaseCtrl',
     // activetab: 'apps',
      templateUrl : './case_study.html'
    }
    }

加载页面html：

<div ng-repeat="case in case_select | filter:'equipmentCs'" class="case-header">
    <img  ng-src="{{case.header}}"/>
</div>
<h1>Customer Profile</h1>
<div class="cs-profile">
    <ul>
      <li bindonce ng-repeat="case in case_select| filter:'custprof'"><span>{{case.profTitle}}&nbsp;&nbsp;&raquo;</span> {{case.prof}}</li>
    </ul>
    </div>
    <h2>Situation</h2>
<div class="cs-situationCs">
    <ul>
      <li bindonce bo-text="case.sitCs"  ng-repeat="case in case_select | filter:'situationCs'"></li>
    </ul>

case1.json：

[{"category":"cat","catTitle":"equipmentCs", "header":"images/cs_header_prod@2x.png"},
{"listType":"custprof", "profTitle":"Customer", "prof":"Commercial Developer"},
 {"listType":"custprof", "profTitle":"Company", "prof":"Heavy Construction"},
 {"listType":"custprof", "profTitle":"Location", "prof":"Southwestern United States"},
 {"listType":"situationCs","sitCs":"Customer working to increase productivity"},
 {"listType":"situationCs", "sitCs":"Looking to add two scrapers to fleet"},
 {"listType":"situationCs","sitCs":"Uncertain about technology as a  means to boost productivity"},
 {"imageType":"csSitImage", "csImage":"images/customer_stories/Situation.png"},
 {"listType":"actionCs", "act":"dealer proactively integrates scrapers with Grade Control, single GPS and sequence assist."},
 {"listType":"actionCs", "act":"Customer receives 40 hours of hands-on job site training."},
 {"imageType":"csActImage", "csImage":"images/customer_stories/Action.jpg"},
 {"quoteType":"resultsQuote", "quote":"This technology is not just an add-on-it is truly the lifeblood of the machine","author":"Person Southwest"},
 {"listType":"csResults","resTitle":"Productivity increase:", "res":"up to 30%"},
 {"listType":"csResults","resTitle":"Site safety:", "res":"operators can be more aware of what’s going on around them, and safety has increased"},
 {"listType":"csResults","resTitle":"Purchasing more systems for greater gains", "res":""}]

它可以工作，但我现在的问题是它正在非常缓慢地加载一些页面，我认为这是因为它试图在每次加载时获取并解析所有JSON并减慢它的速度。

我尝试使用bindonce来加快速度，并尝试缓存JSON以便加载速度更快，但它仍然会非常缓慢地加载某些页面。有更好的方法吗？

AngularJS缓慢加载JSON文件

0 个答案: