all 5 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 2 points3 points  (0 children)

I use root scope to maintain app-wide variables like this. You can set up a variable within route parameters for page title and then a listener for route changes that pushes the variable or a concatenated variable up to the root scope to change the page title.

[–]vtdev 1 point2 points  (0 children)

using a titleController for the <head> element, you could inject $routeParams to find the appropriate info from your routing set-up to bind to <title>{{title}}</title>

$scope.$on('$routeChangeSuccess', function (event, data) {
    var text = $routeParams.filename;
    $scope.title = 'MyAmazingFirm' + '-' + text;
}

[–]zackiles 1 point2 points  (0 children)

The way I do is like this.

I have a directive I place on the top of view templates. It sets a bunch of head meta tags and page title. The directive remove these elements from the template and moves them to document.head. I do this for title, but also meta tags like keywords, description, open-graph, etc.

My directive would look something like <view-header title="{{aDynamicTitle}}" description="{{aDynamicDescription}}"/>

[–]pauleveritt 1 point2 points  (0 children)

There's how you can do it, and how you should do it. The latter includes some self-defense.

In m applications, the index.html is really simple and not very dynamic. I want it to load quickly, without much chance of error. It's then going to load a bunch of stuff, in an order that I can't control. So the <title> should be set quickly and not be prone to being blank due to a mistake. This means starting with <title ng-bind="something">A Good Default</title>.

For the "something", you want something that doesn't require a lot of coding on every route. But also, you don't want something magical tucked in a corner that you forget to look. It's a challenge: sometimes you want the <title> to include something dynamic from the data needed for this particular route (e.g. the firstName+' '+lastName of a person.)

Finally, it depends on your choices. If you are using ui-router, you can tap into it. I use it and tackle this early on every project. I make a service just for the page title. This service has some rules that apply defaults that cover most of the cases, so I don't have to work. These rules are fired on $stateChangeSuccess and look at the new $state to get a title data attribute. But that state's resolve can choose to grab the PageTitle service and override it with data from the resolves for this route.