CODEWITHSUNDEEP
javascriptangularjs
jolacaleb
jolacaleb

Reputation: 59

AngularJS controller needs to have data from $http before initialized

I have a problem to initialize controller in AngularJS.

Below is the process which I want to implement.

  1. Get data from mongoDB by $http before DOM is ready.
  2. By Using the data, some div element should be created using ng-repeat.

But the problem is that the view is rendered before controller gets data from $http.

So I searched all over the stack-overflow and google, and found about ui-router's resolve function.

Below is my ui-router code.

            .state('floor', {
            url: '/floor/:domainId',
            templateUrl: 'modules/floor/views/floor.client.view.html',
            controller: 'FloorController',
            resolve: {
                initData: ['$http', '$stateParams', function($http, $stateParams) {
                    return $http.get('/users/getFloor/' + $stateParams.domainId).success(function(user) {
                        return $http.get('/users/' + user._id + '/data/get').success(function(data) {
                            return data;
                        });
                    });
                }]
            }
        })

The first $http is to get user id from domain id. (e.g. User can connect to /floor/my_personal_domain_address), and the second $http is what I need for initial data.

This is my Controller code.

angular.module('floor').controller('FloorController', ['$scope', 'initData',
    function($scope, initData) {
        console.log(initData);
}]);

Small tip or search keyword or anything will be very thankful for me. I'm still learning AngularJS so just give me a small tip please.. Thank you!

UPDATE

This was my misunderstanding of how controller works. As some people commented, I didn't have to use resolve to retrieve data before controller initialized. The problem was occurred because I declared array variable used in ng-repeat as [] for the first time and client shows error. If I declare the variable after I get value from database, controller data-bind it to view properly. So the problem is solved. Thank you all for valuable comments and answers.

UPDATE 2

Anyway, ui-router's resolve can return a value even though it is promise. I worked for it for some hours, and what I found out is that if I return $http promise in resolve, controller can get its data when successful. But if $http error is occurred in resolve, nothing can catch it. So if there's someone who wants to use resolve to send data to controller before it is initialized, I think it must be used with care.

Upvotes: 1

Views: 565

Answers (2)

Vlad Rudenko
Vlad Rudenko

Reputation: 2809

Get data from mongoDB by $http before DOM is ready.

In this case probably the simpler solution would be not to make any tricky $http requests before Angular initialization but instead just to embed your data as JavaScript global variable into the main HMTL page just before loading of angular.min.js script.

Upvotes: 1

m.brand
m.brand

Reputation: 658

I don't know if I get your question correctly, but this should help you:

(from the ui-router docs https://github.com/angular-ui/ui-router/wiki)

// Another promise example. If you need to do some 
// processing of the result, use .then, and your 
// promise is chained in for free. This is another
// typical use case of resolve.
promiseObj2:  function($http){
   return $http({method: 'GET', url: '/someUrl'})
      .then (function (data) {
          return doSomeStuffFirst(data);
      });
},

So you'd have to use .then() instead of .success() and it should work.

Upvotes: 0

Related Questions