CODEWITHSUNDEEP
javascriptjqueryangularjshtml
Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

$http.get() takes time to load. need better way to write this

i am new to angular. i try to build a sample site. i used below code

in my 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>

in my 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'
})
});

in my 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;
     });
     });

when i click above link. it will take some time to load the content. how can i avoid this. or what is better way to do this??

look sample

Upvotes: 1

Views: 103

Answers (1)

Ariel Henryson
Ariel Henryson

Reputation: 1346

You can cache your data so it will be available after the first request for example you can put the content of the template in the head of the page (load it to the head using server side code) like that

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

that why Angular will not load the external file. You can also do the same for your JSON data like that

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

so you will not need to use $http to load your data you can read more about this system here https://docs.angularjs.org/api/ng/directive/script

Upvotes: 1

Related Questions