AngularJS. Способ внедрения кастомного кода в общий шаблон

• 02, 10, 2013
•  bullgare
•  Angular.js
• No Comments.

Допустим, мы хотим динамически менять заголовок страницы и подсвечивать нужную часть меню в зависимости от текущего контроллера.
Топорный способ сделать это — в каждом контроллере пихать в $rootScope переменные типа title и sitePart (для подсветки пункта главного меню). Минус — всегда есть риск забыть установить эти параметры в контроллере.
Но есть другой способ, который сводится к следующему.
Нужно указать параметры в раутере, а потом при изменении адреса в зависимости от этого параметра устанавливать значения в $rootScope.

var staticApp = angular.module('staticApp', ['pageService'])
	.config(['$routeProvider', function ($routeProvider) {
		$routeProvider
			.when('/', {
				templateUrl: 'main',
				controller: 'MainCtrl',
				sitePart: 'main'
			})

			.when('/exercise', {
				templateUrl: 'exercises',
				controller: 'ExercisesCtrl',
				sitePart: 'exercises'
			})

			.otherwise({
				redirectTo: '/'
			});
	}]);
/**
 * установить заголовок и подсветить главное меню в зависимости от параметров маршрутизатора
 */
staticApp.run(['$location', '$rootScope', 'Page', function($location, $rootScope, Page) {
  $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
    Page.sitePart.set(current.$route.sitePart);
    $rootScope.sitePart = Page.sitePart.get();
    
    if (current.$route.title) 
    {
      Page.title.set(current.$route.title);
      $rootScope.title = Page.title.get();
    }
  });
}]);

Вот тут я написал более полный рабочий пример (для того, чтобы пример заработал, нужно открыть в новом окне):
JS Bin
Вот ещё на эту тему — http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view