Angular JS Method GET inside RUN after CONFIG

Question

I need to do a request inside the RUN method to retrieve de user data from an api. The first page (home), depends on the user data.

This is the sequence of dispatchs in my console:

CONFIG
RUN
INIT GET USER DATA
SIDEBAR
HOME
SUCCESS GET USER DATA

My problem is, i need to wait user data before call sidebar and home (controller and view) and i don't know how can i do this.

UPDATE

I have this until now:

MY CONFIG:

    extranet.config(['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
         // My ROUTE CONFIG
         console.log('CONFIG');
    }]);

My RUN:

    extranet.run(function($rootScope, $location, $http, Cookie, Auth, Session) {
        console.log('RUN');
        var token = Cookie.get('token');

        // The login is done
        var success = function (data) {
            Session.create(data);
            console.log('USER DATA SUCCESS');
        };

        var error = function () {
            $location.path('/login');
        };

        // GET USER DATA
        Auth.isAuthenticated().success(success).error(error);
    });

MY CONTROLLER MAIN:

    extranet.controller('MainCtrl', function ($scope, $location) {
        console.log('MAIN CONTROLLER');
    });

Hey Fals, i added a update in my post to show you my code. I Have a CONFIG, RUN and CONTROLLER. Inside de RUN, i have the code to load user data. — Italo Borges, Jun 05 '14 at 22:29
I think, you need to broadcast an event after you have user data, only then you will have to load your sidebar and Home page. — Ammar Khan, Jun 05 '14 at 22:33
Another approach would be to use resolver in your route configs. That will be more efficient. — Ammar Khan, Jun 05 '14 at 22:34
@user3398887, i will search about resolver and broadcast. Do you have some example? Thanks for your help. — Italo Borges, Jun 05 '14 at 22:38

score 1 · Answer 1 · answered Jun 05 '14 at 22:43

By using resolver

extranet.config(['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
         // My ROUTE CONFIG
         $routeProvider.when('/', {
                   templateUrl: "/app/templates/sidebar.html",
                   controller: "siderbarController",
                   title: "EventList",
                   resolve: {
                        events: function ($q, Cookie,Session) {
                             var deffered = $q.defer();
                             Cookie.get('token').$promise
                                   .then(function (events) {
                                        Session.create(data);
                                        console.log('USER DATA SUCCESS');
                                        deffered.resolve(events);
                                     }, function (status) {

                                         deffered.reject(status);
                                    });

                                return deffered.promise;
                        }
                   }
    }]);

I hope you get some idea.

http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker has another example. You essentially want to load content before the page is displayed, and you would do that with the resolve object on the $routeProvider. — dspies, Jun 05 '14 at 22:45

score 0 · Answer 2 · answered Jun 05 '14 at 22:42

If you are using AngularJS methods for server requests you will get a promise. A promise gets resolved as soon as the response is recieved. All defined callbacks "wait" until the resolve.

Naive solution

So, you will use $http or even $resource if you have a REST-like backend:

var promise = $http.get(userDataUrl, params)
$rootScope.userDataPromise = promise;

After that you can use that promise whereever you need the data:

$rootScope.userDataPromise.then(myCallback)

Better solution

Using $rootScope for that purpose is not an elegant solution though. You should encapsulate the Userdata stuff in a service and inject it whereever you need it.

app.factory('UserData', ['$http',
    function($http) {
        var fetch = function() {
            return $http.get(userDataUrl, params)
        };

        return {
            fetch: fetch
        };
    }
]);

Now you can use that service in other modules:

app.controller('MainCtrl', ['$scope', 'UserService',
    function ($scope, UserService) {
        var update = function(response) {
            $scope.userData = response.userData;
        }

        var promise = UserService.fetch();
        promise.then(update)
    }
);

Angular JS Method GET inside RUN after CONFIG

2 Answers2

Naive solution

Better solution