I have two pages and I'm using ui.router to jump around different pages. One is a login page and after login, the page will jump to a home page.I want to set the a body background-color for login page but set another body background-color for another. If I just set color for the template div, the color won't be applied to the body background, but if set color directly to the background, then two pages have the same color. What can I do?
HTML:
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<!-- build:js scripts/main.js -->
</body>
JS:
angular.module('app',[....]).config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login',{
url:'/',
views:{
'content':{
templateUrl:"views/login.html",
controller:"LoginController"
}
}
})
.state('home',{
url:'/home',
views:{
'header':{
templateUrl : "views/header.html",
controller: 'HeaderController'
},
'content':{
templateUrl: "views/homePage.html",
controller : 'HomeController'
}
}
})
I have two pages and I'm using ui.router to jump around different pages. One is a login page and after login, the page will jump to a home page.I want to set the a body background-color for login page but set another body background-color for another. If I just set color for the template div, the color won't be applied to the body background, but if set color directly to the background, then two pages have the same color. What can I do?
HTML:
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<!-- build:js scripts/main.js -->
</body>
JS:
angular.module('app',[....]).config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login',{
url:'/',
views:{
'content':{
templateUrl:"views/login.html",
controller:"LoginController"
}
}
})
.state('home',{
url:'/home',
views:{
'header':{
templateUrl : "views/header.html",
controller: 'HeaderController'
},
'content':{
templateUrl: "views/homePage.html",
controller : 'HomeController'
}
}
})
-
Add
background-colorto root tag (may beion-viewtag) of yourhomePagetemplate usingbg-colorinline attribute. or from CSS. – Harish Kommuri Commented May 23, 2016 at 7:23
3 Answers
Reset to default 4In a global controller (which is applied to either <html> or <body> tag), register an event:
myApp.controller('GlobalCtrl', function($scope) {
// Event listener for state change.
$scope.$on('$stateChangeStart', function(event, toState, toParams) {
$scope.bodyClass = toState.name + '-page';
});
});
Now, in your HTML:
<body class="{{bodyClass}} foo bar" ng-controller="GlobalCtrl">
<!-- your content -->
</body>
Now, in your CSS:
body.login-page {
background: green;
}
body.home-page {
background: red;
}
For index page:
<body ng-class="{'home-page': $state.includes('home'), 'login-page' : $state.includes('login')}">
<div ui-view="header"></div>
<div ui-view="content"></div>
<!-- build:js scripts/main.js -->
</body>
For app.run.js, add this code first.
$rootScope.$state = $state;
CSS:
body.home-page {
background: yellow;
}
body.login-page {
background: blue;
}
While using angular-router, from your main app you will get an event $statechangeSuccess, when the state gets changed you will get to know on which state you are and probably change the background using ng-style or ng-class on body:
HTML
<body ng-class='{$scope.state==="home":class1,$scope.state==="login":class2}'>
JS
app.controller('appCtrl', function($scope) {
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
console.log(event, toState, toParams, fromState, fromParams);
$scope.state = toState;//do the checking
});
});