After starting to work with Angular Routes recently, I encountered a situation where data was getting lost on refresh. The solution suggested to me was to use resolve, which seemed promising but I am struggling to implement it successfully.
.config(['$routeProvider', function($routeProvider) {
//determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file
$routeProvider
.when('/MG', {
controller: 'teammateController',
templateUrl: './assets/departments/department.html',
resolve: {
activeDepartment: function() {
return 'Management'
}
}
})
.when('/PO', {
controller: 'teammateController',
templateUrl: './assets/departments/department.html',
resolve: {
activeDepartment: function() {
return 'Programs Office'
}
}
})
.when('/SM', {
controller: 'teammateController',
templateUrl: './assets/departments/department.html',
resolve: {
activeDepartment: function() {
return 'Sales And Marketing'
}
}
})
.when('/', {
controller: 'teammateController',
templateUrl: 'home.html',
resolve: {
activeDepartment: function() {
console.log("working");
return 'home';
}
}
})
.otherwise({
controller: 'teammateController',
templateUrl: 'home.html',
resolve: {
activeDepartment: function() {
console.log("working");
return 'home';
}
}
})
}]);
app.controller('teammateController', function teammateController($scope, $http, $rootScope, $timeout, Idle, $location) {
$scope.deptName = activeDepartment();
});I am encountering the error "ReferenceError: activeDepartment is not defined". Despite seeing "working" in the console log, indicating that resolve is being executed, I cannot seem to figure out why this error is occurring. Any insights or guidance would be greatly appreciated.