Dynamic Page Title AngularJS – The Missing Tutorial

Changing page titles on your websites allow users to easily figure out where they are on your page at what point in time, by just simply looking at their browser’s header bar.

AngularJS allows you to dynamically change your page title at different stages, and we’ll be discussing how to do exactly that.

We’ll consider how to change title

using a resolve function in our $state to tell the title
using $rootScope.$on(...) function within our module .run
by updating the title in our controller, good for dynamic page titles, like blog posts etc.

Using Resolve

We will be using the angular-ui-title to put our title into our pages. It is simple and straightforward. Let’s do it:

Install angular-ui-title and append to your Angular project as usual, then don’t forget to inject the ui-router-title in your parent app module.

All the blah blah blah I said above looks like this:

angular.module('codeSide', ['ui.router', 'ui.router.title'])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home/home.html',
      controller: 'HomeController',
      resolve: function() {
        $title: 'Homepage'
      }
    })
   // other states here
   .....

)]);

with that in place, what’s left is this in your index file:

<head>
    <title ng-bind="($title || 'Home') + ' :: CodeBySide'">CodeBySide</title>
</head>

That’s done! Simply add the resolve to your state configurations, and they’ll show up in templates just as you wish. In the above example, our title is not dynamically generated.

What if you wish to get this to be dynamically generated?

Under the hood, angular-ui-router changes the $rootScope to make the $title variable available sitewide. So if you wish to dynamically change your title, for say, a blog post page, do this:

I’m using Firebase for the next example, but don’t worry if you’re not familiar with what’s going one. In English, I’m just waiting for a Promise when the code page loads. Before the promise page arrives, the page title will be what’s in the $state configuration for the detail page. Then,

codeObject.$loaded()
  .then(function(data) {
  
  $rootScope.$title = data.title; // update title with detail page
  // many code here
  }

That’s it with using the angular-ui-title approach.

Using `$rootScope.$on(...)`

You’re probably asking, ‘Do I need a package to change my title?’.

Well, I asked that myself. I’m not a fan of using packages, unless rolling out one myself won’t be worth it. With title changing, using a package for something as basic as that sounds a bit ridiculous.

So, let’s ‘unridiculous’ the situation in a moment.

The idea behind using the $rootScope.$on watching is to help us pick up a specified value in our config to update the title of each page automatically. Heck, you could simply pick up the name of the $state using something like a $state.current.name and pass it into your $rootScope.

However, that’s not what we’ll be doing here. ui-router permits adding arbitrary key: value stuff to our $state config, available to be referenced anywhere we want anytime.

So let’s take advantage of that right now.

.state('detail', {
  url: '/codes/:codeId',
  templateUrl: 'codes/detail.html',
  controller: 'DetailController',
  data: {
     title: 'Code Detail'
  }
})

See how we’re using the data? Cute, isn’t it. We could add more key-value pair if we wish.

[wp_ad_camp_1]

With this approach, we need an extra intermediary approach within our .run function of our app.

.run(['$rootScope', '$state',
  function($rootScope, $state) {

    $rootScope.$on('$stateChangeSuccess', function() {
      $rootScope.title = $state.current.data.title;
    });
  }

])

Oh gosh! This is so straightforward! With all this happening, all you need to change in your template index file is replace the $title variable with just title. Do that, and see if the changes reflect.

Then doing the snippet from above, with a slight change gets us up and running:

codeObject.$loaded()
  .then(function(data) {
  
  $rootScope.title = data.title; // update title with detail page
  // many code here
  }

Conclusion

Now go out there and change your page titles like a boss. Use whichever approach you see fit, either the angular-ui-title or the other option of going native AngularJS.

I understand angular-ui-title comes with other perks such as breadcrumbs, which might not be as straightforward to implement, thus resorting to using the project. However, I believe depending on your requirements, choosing which approach to use won’t be an issue.

I hope you found this piece useful. The above code snippets were taken from my ongoing project, CodeBySide. Check it out and lemme know what you think.

Will see you in the next one!

Using Resolve

Using $rootScope.$on(...)

Conclusion

Using `$rootScope.$on(...)`