Wednesday, August 29, 2018

angularjs - Angular app initialization with asynchronous data




I need to initialize my Angular with some User data that the whole app depends on. Therefore I need the initialization to be resolved before the router kicks in and controllers are initialized.



Currently, I wrote the initialization code in a run() block of the angular module. The initialization involves an asynchronous http request to get user data and the rest of the application relies upon the user data.
How can I ensure that the http request is resolved before the router kicks-in initializing the controllers?



I am using the ui-router.



The initialization consists in the following:
1) get cookie 'userId'
2) get User from server (asynchronous http request, the whole app depends upon the User)

3) set authService.currentUser



this is a sample of the code



.run(['$cookies', 'userApiService', 'authService', 
function($cookies, userApiService, authService){

var userId = $cookies.get('userId');
userId = parseCookieValue(userId);


userApiService.getOne(userId).then(function(user){
authService.currentUser = user;
});
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {

$locationProvider.html5Mode(true);

$urlRouterProvider.when('/', '/main');


$stateProvider
.state('login', {
url: '/login',
views: {
'header': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'content': {

templateUrl: 'views/login.html',
controller: 'LoginCtrl'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
.state('main', {
url: '/main',

views: {
'content@': {
template: '',
controller: function($state, authService) {
if(!authService.isAuthenticated()) {
$state.go('login');
}
if(authService.isStudent()) {
$state.go('student');
}

if(authService.isAdmin()) {
$state.go('admin');
}
}
}
}
})
.state('student', {
url: '/student',
views: {

'header@': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'content@': {
templateUrl: 'views/student.html',
controller: 'StudentCtrl'
},
'footer@': {
templateUrl: 'views/footer.html',

}
}
})
.state('admin', {
url: '/admin',
views: {
'header@': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},

'content@': {
templateUrl: 'views/admin.html',
controller: 'AdminCtrl'
},
'footer@': {
templateUrl: 'views/footer.html',
}
}
})
}])


Answer



Expanding on someone's comment, you can create a root state that is a parent to all of your other app's states (children to the root). The root state resolves all the user data and then you can inject the user data to any controller or store it in a service.



$stateProvider
.state('root', {
url: '',
abstract: true,
template: '', // some template with header, content, footer ui-views
resolve: {

// fetch user data
}
})
.state('root.login', {
url: '/login',
views: {
'header': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},

'content': {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
.state('root.main', {

url: '/main',
views: {
'content@': {
template: '',
controller: function($state, authService) {
if(!authService.isAuthenticated()) {
$state.go('login');
}
if(authService.isStudent()) {
$state.go('student');

}
if(authService.isAdmin()) {
$state.go('admin');
}
}
}
}
})

... // your other states



The key is that all of your app states must be a child of your root state i.e. root. in your state declaration. This will ensure that no other controller starts until your user data is available. For more information on resolve and how to use it read here. Also, parent and child states.


No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...