AngularJS controller needs to have data from $http before initialized

Question

I have a problem to initialize controller in AngularJS.

Below is the process which I want to implement.

Get data from mongoDB by $http before DOM is ready.
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.

I could be wrong but im pretty sure you should be able to do all of your http requests in your controller (should use a service before instantiated in your controller). — Joe Lloyd
– Joe Lloyd, Commented Aug 25, 2015 at 10:43
Yes, you can either inject $http or (better) use a service. I don't understand why you need the data before the controller gets initialized. Is it a UX requirement? because if not, by the magic of databinding, you can fetch the data later and have it displayer in your ng-repeat — user1334319
– user1334319, Commented Aug 25, 2015 at 10:45
possible duplicate of AngularJS - Running a function once on load — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Aug 25, 2015 at 10:48
Thank you for reading my question. As Sphaso said, I have to search more to use service instead of resolve for router can't catch $http error. — jolacaleb
– jolacaleb, Commented Aug 25, 2015 at 10:48
in "resolve" you need to return promise and angular will inject resolved value. — webduvet
– webduvet, Commented Aug 25, 2015 at 13:07

Vlad Rudenko · Accepted Answer · 2015-10-08 08:40:30Z

1

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.

answered Oct 8, 2015 at 8:40

Vlad Rudenko

2,9372 gold badges29 silver badges24 bronze badges

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

Comments

m.brand · Accepted Answer · 2015-08-25 10:54:11Z

0

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.

answered Aug 25, 2015 at 10:54

m.brand

6585 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS controller needs to have data from $http before initialized

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related