Here is the code snippet I have been working on:
spa.factory("linkFactory", function() {
var linkFactoryObject = {};
linkFactoryObject.currentLink = "home";
return linkFactoryObject;
});
This piece of code essentially serves as a global variable that allows me to set and read values between different controllers. It specifically helps in determining which link should be marked as active.
While my code functions effectively, there is a minor issue I encountered. If an initial value is not set in the factory when someone first enters my webpage, the 'home' link will not be set as active. On the other hand, if I do set an initial value, upon refreshing the page, the value resets to the original one, causing the home link to appear as active even though the user may be on a different page.
In an attempt to tackle this challenge, I explored using $location.path() to retrieve the path and create a function based on that value. However, due to its static nature, $location.path() proved ineffective for this purpose.
Furthermore, the route snippet below dictates the content loading process:
spa.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: '/partials/home.html'
})
.when('/about', {
templateUrl: '/partials/about.html'
})
.when('/skills', {
templateUrl: '/partials/skills.html'
})
.when('/experience', {
templateUrl: '/partials/experience.html'
})
.when('/resume', {
templateUrl: '/partials/resume.html'
})
.when('/contact', {
templateUrl: `/partials/contact.html'
})
.otherwise({
redirectTo: '/home'
});
});
If there was a way for me to establish a variable within this section that can be accessed in my controllers, it would solve my dilemma. Unfortunately, I am unsure how to go about achieving this. Any suggestions or guidance on how to accomplish this would be greatly appreciated.
Can anyone provide insight on how I could address this challenge?