В первом комментарии всё верно и лаконично сказали — через
$rootScope — я же просто разжую.
Модуль ngRoute это просто обычный конфиг — вы в этот конфиг можете пихать всё, что вам угодно. Задайте каждой страничке уникальную айдишку или название категории странички:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/main', {
id: 'main',
title: 'Главная',
category: 'rootPage',
templateUrl: 'mainPage.html',
controller: 'MainPage',
}).
when('/powerSky', {
id: 'powersky',
title: 'Всем повер-скай, посоны',
category: 'contentPage',
templateUrl: 'template/powerSky.html',
controller: 'PowerSky'
}).
otherwise({
redirectTo: '/main'
});
}]);
Теперь, при каждой смене странички, в основном контроллере (это который общий для всех страниц сайта) пихайте в
$rootScope конфиг текущей странички (текущего роута) в параметр
page:
app.controller('MainController', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
var page = current.$$route;
// присваиваем глобально
$rootScope.page = page;
});
});
Теперь в HTML-шаблоне вставляйте класс для
BODY:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>{{page.title}}</title>
</head>
<body ng-class="page.id" ng-controller="MainController">
<main ng-view></main>
</body>
</html>
Или, если у вас странички разбиты на некие общие категории, то не айдишку вставляем, а название категории (тогда меньше всяких классов нужно будет писать в CSS):
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>{{page.title}}</title>
</head>
<body ng-class="page.category" ng-controller="MainController">
<main ng-view></main>
</body>
</html>
Ну и в стилях будет:
body {
&.rootPage {
background-color: #fff;
}
&.contentPage {
background-color: #ddd;
}
}
Средний
Средний