AngularJS: а вам нужен заголовок?

Меняем заголовок, основанный на пути браузерной строки

| Категории: Javascript, AngularJS
Анна Аминева

Иллюстрация блокнота

AngularJS используется для написания одностраничных веб приложений. Принимая во внимание сущность одностраничных приложений, заголовок устанавливается 1 раз при первичной загрузке данных, и даже если вы перейдете на страницу с продуктом или на информацию о сайте, вы будете видеть все тот же заголовок в браузере.

Мы покажем вам одно из возможных решений данной проблемы:

В вашем html шаблоне, поменяйте тэг title и добавьте в него атрибут ng-bind:

1
<title ng-bind="'MyApp - ' + $root.title">Мое приложение - Привет!</title>

В вашем app.js:

1
2
3
$routeProvider
      .when('/product', {templateUrl: '/partials/product.html',  controller: 'ProductCtrl', title: 'Наши продукт'})
      .when('/about', {templateUrl: '/partials/about.html', controller: 'AboutCtrl', title: 'О нас'});

В вашем вызове функции app.module(..).run добавьте $rootScope.$on

1
2
3
4
5
6
angular.module("...").run(function(){
      $rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
            //Change page title, based on Route information
            $rootScope.title = $route.current.title;
      });
});
На заметку

Причина, по которой я использую ng-bind вместо прямого привязывания к шаблону с помощью { { expression } } описана в документации:

Предпочтительно использовать ngBind вместо { { expression } }, потому что шаблон на мгновение показывается в браузере не компилированным.