Following the guidelines here, I am setting a page title in my state object.
$stateProvider
.state('project', {
url: '/projects/:origin/:owner/:name',
template: '<project></project>',
data : { pageTitle: 'Project page title'},
});
In order to access it later on, I utilize this method:
$state.current.data.pageTitle
My goal now is to dynamically set the pageTitle based on one of the stateParams.
Note: The following example does not work as intended, but demonstrates how I want it to function.
$stateProvider
.state('project', {
url: '/projects/:origin/:owner/:name',
template: '<project></project>',
data : { pageTitle: $stateParams.name},
});
An alternative approach could involve using the resolve attribute:
resolve: { title: 'Project page title' },
To incorporate stateParams values, I can do the following:
resolve:{
pageTitle: ['$stateParams', function($stateParams){
return $stateParams.name;
}]
}
However, when calling console.log($state.current.resolve.pageTitle); in my controller, the entire function is returned rather than the desired result.
What would be the most effective way to achieve this?
UPDATE:
I should mention that I am working with AngularJS and ES6 within a modular architecture. Each component has its own scope.
You can refer to my previous post for further insight into my modular architecture implementation.
I am creating a breadcrumb by referencing parent states (using the defined pageTitle). Therefore, defining the page title within each module would be ideal.
This allows me to choose between a fixed value like "My page title" or a stateParams value.
If this approach is incorrect, please provide guidance on a better method.