Rendering of template before a response from API in AngularJs

Question

I am using angular-slick library to display items on a slide via ng-repeat. The items do I get with an asynchronous call to a API. The problem I have is that the template is rendered before a response from the API.

This is my controller

    angular.module('myApp')
  .controller('homepageCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
    $http({method: 'GET', url: 'https://myapi.com/xxxxxx'}).
    success(function(data, status, headers, config) {
            $scope.articlesSlide = data.articles
    });
  }]);

This is my template

<slick infinite="true" dots="true" arrows="true">
          <div ng-repeat="articleSlide in articlesSlide">

          <a href="/{{articleSlide.cat}}/articulo/{{articleSlide.slug}}" class="dentro" title="Ver noticia">
            <div class="imagen"><img ng-src="{{articleSlide.image}}" alt="{{articleSlide.title}}" /></div>
            <div class="texto">
              <div class="inner">
                <div class="cat">{{articleSlide.0.cat}}</div>
                <h2>{{articleSlide.title}}</h2>
              </div>
            </div>
          </a>

          </div>
          </slick>

V31 · Accepted Answer · 2014-07-07 12:17:45Z

1

You need to make use of promise in order to wait for the http call to fetch the response from the server. After the promise is resolved then only it should populate the articlesSlide scope variable. In the template have a ng-show check on the articlesSlide variable so that when it is null then nothing is displayed (till the time promise is resolved)

DOCUMENTATION:

Angular Promise

Example

answered Jul 7, 2014 at 12:17

V31

7,6643 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering of template before a response from API in AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related