javascript - $http.get() 需要时间来加载。需要更好的方式来写这个

Question

我是 Angular 新手。我尝试建立一个示例网站。我使用下面的代码

在我的index.html

    <a href="#/offer" ng-repeat="menus in menulist" ><div class="menuname" ng-class="{blue:hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" >{{ menus.menu }}</div></a>

在我的routeprovider.js中

angular.module('techzeek').config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
    controller: 'RouteController',
    templateUrl:'assets/views/mypageview.html'
})
.when('/:id', {
    controller: 'RouteController1',
    templateUrl:'assets/views/mypageview.html'
})
});

在我的 Offercontroller.js 中

angular.module('techzeek').controller('RouteController',function($scope,$http){   $http.get('http://techzeek.com/assets/files/rechargecontrollerdetails.json').success(function(data){
     $scope.offerdetails=data;
     });
     });


angular.module('techzeek').controller('RouteController1',function($scope,$http,$routeParams){
$http.get('http://techzeek.com/assets/files/'+$routeParams.id+'.json').success(function(data){
     $scope.offerdetails=data;
     });
     });

当我点击上面的链接时。加载内容需要一些时间。我怎样才能避免这种情况。或者什么是更好的方法来做到这一点？

look sample

Answer 1

您可以缓存数据，以便在第一次请求后可用例如，您可以将模板的内容放在页面的头部(使用服务器端代码将其加载到头部)，就像这样

<script type="text/ng-template" id="assets/views/mypageview.html">
  Content of the template.
</script>

这就是 Angular 不会加载外部文件的原因。您也可以对 JSON 数据执行相同的操作

<script>
   var JSON_DATA = ....
</script>

所以你不需要使用 $http 来加载你的数据您可以在这里阅读有关该系统的更多信息 https://docs.angularjs.org/api/ng/directive/script