Dynamic page titles on AngularJS app

Question

We are building a big AngularJS/NodeJS app and we came across a problem. It has to do with the page titles. On our app, we want to have dynamic pages titles for each state (we are using ui-router). I know that we can add custom fields to any state (like pageTitle):

.state('app.home', {
    url: "",
    templateUrl: '/templates/home.html',
    controller: 'HomeController',
    pageTitle: "Home"
})

and then we could retrieve that on $stateChangeSuccess and set it to the $scope

.run([
    '$rootScope', function ($rootScope) {
      'use strict';

      $rootScope.appState = $rootScope.appState || {};

      $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) {

      //TODO: We need to update the title and meta here, and then retrieve it and assign it to appState
      $rootScope.appState.pageTitle = toState.pageTitle;

});

}]);

, and then on our index.html do:

<title ng-bind="appState.pageTitle">Page Title before the dynamic title kicks in</title>

However, in our case, the page title has to come form the DB, via calling our Node.js REST API. For example, imagine, you go on a product page, you have to get the product, to get the title of the product to set the page title. Any ideas how we could do that?

Cheers,
Iraklis

possible duplicate of How to dynamically change header based on angularjs partial view? — user3559224
– user3559224, Commented Jul 9, 2014 at 6:54
I am actually doing this already, I have a PageService with getters/setters for the page title, the problem is that when the setter method of the service is called in the controller (on a product page for example), the state has already changed. So, that's why, when I call the getter on $stateChangeSuccess, my page title is always one state behind. — Iraklis Alexopoulos
– Iraklis Alexopoulos, Commented Jul 9, 2014 at 6:59

Meligy · Accepted Answer · 2017-04-27 02:48:44Z

1

You should be able to use the $document service.

Like:

function SampleController($document) {
    $document.title = "Updated from Angular.JS";
}

Official documentation:

https://docs.angularjs.org/api/ng/service/$document

edited Apr 27, 2017 at 2:48

answered Jul 9, 2014 at 6:46

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Iraklis Alexopoulos Over a year ago

Thanks Meligy, perhaps we could do this yes. Is it good practise though? Because the approach we are going for, is $emit-ing a appStateChange right after we call the setter method.

Meligy Over a year ago

Well, the documentation for $document does pretty much that anyway. I haven't done it alot myself, but when you get issues with that, usually running it after the change solves it, either in controller loaded in from the router based on new change, or listening to state change success event, or even using $timeout. I don't expect it to be an issue though.

Meligy Over a year ago

You can always wrap it in your own service if you don't want to mix the document with your code as well. You can even make it an event, and make the service or directive for example listen to the event and change the title based on it.

Iraklis Alexopoulos Over a year ago

OK, I see, thanks Meligy, I will definitely give it a go and let you know how it goes.

Collectives™ on Stack Overflow

Dynamic page titles on AngularJS app

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related