I am facing a challenge where I need to retrieve certain data before the page renders to prevent it from appearing empty initially. However, I am encountering difficulties in getting my resolve function to work as intended.
The issue lies in the line where I call states.getAuth() as it throws an error stating that states.getAuth() is undefined. Strangely enough, this function successfully returns authentication information about the user when used in my controllers but fails to do so within this resolve block.
Could it be that my approach to this problem is incorrect? Since I have never had to implement a resolve in this manner before, I am seeking guidance on the best way to proceed.
Please advise me if you require additional information about my services or if the provided route snippet is sufficient for resolving the issue.
.when('/programs/:program', {
templateUrl: 'views/pages/single-program.html',
resolve: {
'isAuth': ['fbRefs', function(fbRefs) {
return fbRefs.getAuthObj().$requireAuth();
}],
'programData': ['$route', 'fbRefs', 'states', function($route, fbRefs, states) {
// Extract the program key from $routeParams
var key = $route.current.params.program;
// Retrieve the unique user id
var uid = states.getAuth().uid; // This line is causing an error
// Define the path to fetch program data
var path = uid + '/programs/' + key;
// Fetch the program data from Firebase
var program = fbRefs.getSyncedObj(path).$loaded();
return program;
}]
}
})
Below is the states service code as requested:
auth.service('states', [function() {
var auth;
return {
getAuth: function() {
return auth;
},
setAuth: function(state) {
auth = state;
}
};
}]);