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?](http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view) — , Jul 09 '14 at 06: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, Jul 09 '14 at 06:59

Meligy · Answer 1 · 2017-04-27T02:48:44.190

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 '17 at 02:48

answered Jul 09 '14 at 06:46

Meligy

32,897
11
79
103

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. – Iraklis Alexopoulos Jul 09 '14 at 07:01
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 Jul 09 '14 at 07:04
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. – Meligy Jul 09 '14 at 07:05
1

OK, I see, thanks Meligy, I will definitely give it a go and let you know how it goes. – Iraklis Alexopoulos Jul 09 '14 at 07:08

Dynamic page titles on AngularJS app

1 Answers1