AngularJS: How can I populate data from server before rendering?

[Harit Himanshu]

My `HTML` is 

    <div id="categories" ng-controller="AddTransactionCtrl">

        <tr ng-repeat="category in categories">

            <td><a href="{{category.name}}" target="_blank">{{category.name}}</a></td>

            <td>{{category.description}}</td>

        </tr>

    </div>

I want to populate this list from Controller that fetches the data from server. My controller looks like  

    function AddTransactionCtrl($scope, $http) {

      $scope.transaction = {};

      $scope.transaction.categories = [];

      $http({

        method: 'GET',

        url: '/categories'

      }).success(function(data, status, headers, config) {

          console.log('/categories succeeded. - ' + data.length);

          $scope.transaction.categories = data;

        }).error(function(data, status, headers, config) {

          console.log('/categories failed.');

        });

    

      console.log($scope.transaction.categories.length);

    

      $scope.save = function() {

        console.log('will add transaction');

        console.log('name:' + $scope.transaction.name);

        console.log('date:' + $scope.transaction.date);

        console.log('desc:' + $scope.transaction.desc);

      }

    }

When I refresh my page and see on Chrome console, I see

    0

    /categories succeeded. - 151

- Which means that `$scope.transaction.categories` is not assigned

- Also as I see logs `0` is printed before the http log, which means the call is asynchronous and explains why the length is `0`

**Question**  

a.) How can I make sure that the categories are populated by HTTP before anything related to rendering on page or console is printed out

[Rick Jolly]

There is a "resolve" property that you can use when configuring your routes in the $routeProvider. If you add your $http requests there, they will complete before your controller is called and you can inject the result into your controller. Note that If the $http request fails, then the promise won't resolve and your controller won't display (unless you use some trickery and wrap $http with another promise using the $q library). John Lindquist has a nice video on resolve: http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp

[Harit Himanshu]

This is really helpful. Thanks a lot!

On Wed, Apr 24, 2013 at 8:43 PM, Rick Jolly <joll...@gmail.com> wrote:

There is a "resolve" property that you can use when configuring your routes in the $routeProvider. If you add your $http requests there, they will complete before your controller is called and you can inject the result into your controller. Note that If the $http request fails, then the promise won't resolve and your controller won't display (unless you use some trickery and wrap $http with another promise using the $q library). John Lindquist has a nice video on resolve: http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4l0DjdJxS-g/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.