AngularJS Resolve

Question

I'm creating my frist AngularJS application.

I have a kind of problem with my Index page. There can be two different templates depending if User is authenticated or not.

My idea is to have a MainController defined before ng-view and a view controller (indexController, aboutController, ...) depending which view is displayed.

I've made a service UserService which mission is to get user's data from my server and serve them to controllers.

The problem is I want my MainController to get the user's data.

I've read things about resolve and promise but it only works with view controllers because it's defined in $routeProvider.

My question is how can I initialize my MainController data before executing my app routes ?

PS : A bit of code to help

index.html

<div id="page" ng-controller="MainController as Main"> 
    <div id="navbar-container" class="shadow1">
        <navbar></navbar>
    </div>
    <div class="row">
        <div id="page-container" class="large-12 columns">
            <div ng-view></div>
        </div>
    </div>
</div>

mainController.js

...
define([], function()
{
    return angular.module('MyApp.controllers', []).controller('MainController', ['$scope', '$http', 'UserService', function($scope, $http, UserService)
    {
        // I want this to be defined before executing the app //
        $scope.currentUser = UserService.getCurrentUser();
    }]);
});
...

userService.js

define(['angular'], function (angular)
{
    return angular.module('MyApp.services', []).service('UserService', ['$http', function($http)
        {
            var _currentUser = null;
            var _promise = (_currentUser !== null) ? _currentUser : $http.get('/api/user').success(function(data)
            {
                _currentUser = data.result;
            });
            return {
                promise : _promise,
                getCurrentUser : function()
                {
                    return _currentUser;
                },
                isAuthenticated : function()
                {
                    return (_currentUser !== null);
                },
            };
        }
    ]);
});

Maybe there is another way to do what I expect but i'm really a noob with AngularJS. I really would appreciate some help.

Thank you in advance.

Niralee Patel · Accepted Answer · 2014-09-24 10:46:54Z

1

I think you have to write $scope.currentUser = UserService.getCurrentUser(); line in run() method of angular js which is first fire when application load

answered Sep 24, 2014 at 10:46

Niralee Patel

1517 bronze badges

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

2 Comments

T00rk Over a year ago

I tried this. That worked yesterday but it was because of luck. Today i noticed my data are loaded after page started rendering. Is there a way to wait for data before rendering ?

Niralee Patel Over a year ago

For that try to write that line in $rootScope.$on method which is define inside the run method

Himmel · Accepted Answer · 2014-11-11 19:10:20Z

0

Actually Config blocks run before run blocks. This is only relevant if you are trying to resolve in ng-route or ui-router.

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

Line 122

answered Nov 11, 2014 at 19:10

Himmel

3,7098 gold badges44 silver badges78 bronze badges

Collectives™ on Stack Overflow

AngularJS Resolve

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related