Problem

When using the HotTowel.Angular nuget package, the page title isn’t set and doesn’t change when navigating from view to view within your app.

Quick Solution

Add a routeChangeSuccess event handler to your application. To accomplish this, modify the /app/layout/shell.js file to include the following:

function shell($rootScope, common, config) {
   // ...
   $rootScope.$on("$routeChangeSuccess", function (event, args) {
      $rootScope.title = config.docTitle + " " + (args.title || "");
   });
}

Explanation

One of the first things I noticed was that although there does appear to be code in place, the page title doesn’t change when navigating from view to view within the app. After confirming that this was the case with the packaged views and not just the views I had added, I set about looking for the problem.

The title element in the index.html appeared to be bound to a title property of a viewmodel, but to which viewmodel is it bound?

<title data-ng-bind="title">Your App Title</title>

I made note that the view does in fact have a title attribute with value assigned in the getRoutes function of the config.route:

function getRoutes() {
        return [
            {
                url: '/admin',
                config: {
                    title: 'admin',
                    templateUrl: 'app/admin/admin.html',
                    settings: {
                        nav: 2,
                        content: '<i class="fa fa-lock"></i> Admin'
                    }
                }
            }//...
        ];

Also, there is a docTitle property with a value set in the app config:

// ...
var config = {
   // ...
   docTitle: 'HT';
   // ...
};

After churning through things for a while, I discovered that the Code Camper sample that John Papa put together using HotTowel.Angular exhibits the exact behavior I was after. The page title is set and changes when the user navigates around the app. From there I was able to locate the code which seemed to do the trick, but was in a minified version of his application’s javascript.

It turns out that the title property bound to the page title is on the $rootScope. With the minified routine in mind and the default HotTowel implementation loaded up in my editor I was able to come up with the following change to the /app/layout/shell.js file:

function shell($rootScope, common, config) {
   // ...
   $rootScope.$on("$routeChangeSuccess", function (event, args) {
      $rootScope.title = config.docTitle + " " + (args.title || "");
   });
}

While I’m not sure this is the best way to do it, or even exactly how Mr Papa implemented it, the code is simple enough and seems to work in my case. It just adds an event handler to the routeChangeSuccess event in which it concatenates the application’s docTitle and the view’s title properties and assigns the new value to the $rootScope’s title.

Have you seen a different or better way of implementing this? Let me know!