Using ng-bind causes Chrome History to display page URLs instead of actual titles
My title tag:
<title ng-bind="title"></title>
When I move my app, the page title is updated correctly in the browser tab. However, when I look at History in both Chrome and Opera, I see raw urls instead of page titles. This is not the case for Firefox, which displays page titles correctly.
I tried adding a header:
<title ng-bind="title">Placeholder Title</title>
but that doesn't solve the problem.
You can see this in action by going to a website like Angular Stuff , follow a couple of routes and check your History in Chrome or Opera and you should see something like:
https://material.angularjs.org/latest/demo/colors
instead
Angular Material - Demos > Colors
...
Why is this happening? How can this be fixed?
The only fix I have found is to provide a title like this
<title>{{title}}</title>
Which causes Chrome and Opera History to display actual titles instead of URLs. The problem with this approach is that the first page loaded appears in the story with the name "{{title}}", so we use ng-bing="title"
instead {{title}}
.
source to share
Don't know which version of angular you are using, I tried to replicate and fix the problem you are facing in Plunker, here is a demo: https://run.plnkr.co/YhR3RzIizIQXRbZY/#/home
// If the link doesn't work, you go to the bottom of my answer and open Plunker, then in the preview section, click on the little blue icon in the upper right corner. Otherwise, you won't be able to see the headers.
And the code for it:
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope, $rootScope) {
});
app.controller('HomeController', function($scope) {
});
app.controller('AboutController', function($scope) {
});
app.config(function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController',
title: 'Home'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController',
title: 'About'
}).
otherwise({
redirectTo: '/home'
});
});
app.run(['$rootScope', '$route',
function ($rootScope, $route) {
$rootScope.titleBase = 'Welcome to - ';
$rootScope.$on('$routeChangeSuccess', function() {
document.title = $rootScope.titleBase + $route.current.title;
});
}
]
)
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<script type="text/ng-template" id="embedded.home.html">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view></div>
</div>
</body>
</html>
Here is my code in Plunker: https://plnkr.co/edit/8iZ4zjqj75Zz3SS0C5DE?p=preview
Basically, I used $rootScope
to update my title and used document.title
unfortunately ng-bind
not working for browser history. Angular seems to be picking correctly.
I also found these two similar questions:
Set the title of the page using the UI router
How to change page title in angular using $ routeProvider
Sorry, but in my first answer, I didn't check my browser history.
source to share