AngularJS Changing class using global variable

Question

I just created a angularJS application.

Here is my index.html

<html ng-app="MyApp">
  <head>
    <!-- CSS files import -->
  </head>
  <body class="{{bodylayout}}">
    <div ng-view></div>
  </body>
  <--! JS imports 
   aungular.js
   app.js
   login.js
   register.js
   -->
</html>

app.js

'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
    .when('/forgotPassword', {
        templateUrl: 'forgotpassword.html',
        controller: 'forgotController'
      })
   .when('/home', {
       templateUrl: 'views/home.html',
    })
    .otherwise({
       redirectTo: '/login'
    });
//    $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

I have login.html, register.html, and forgotpassword.html, home.html. Each one has separate Controlers in separate files. login.js, register.js, forgot.js, home.js.

login.js

'use strict';

angular.module('myApp').controller('LoginController', function($scope, $location, $window) {
    $scope.user = {};
    $scope.loginUser=function()
    {
        var username=$scope.user.name;
        var password=$scope.user.password;
        if(username=="admin" && password=="admin123")
        {
            $location.path( "/home" );  
        }
        else
        {
            $scope.message="Error";
            $scope.messagecolor="alert alert-danger";
        }
    }
});

Similarly, I have post methods in other controllers.

What I want is, when the view is login or register or forgotpassword, the body class should be "login-layout". So in body I put class="{{bodylayout}}". I know using global variables, the value can be set. But I don't know how to.

In app.js I tried this

angular.module('myApp').factory("myService", function(){

      return {
        sharedObject: { data: 'login-layout' }
      }; 

    });

But don't know how to use it.

Tasnim Reza · Accepted Answer

You can create global variables in two way

$rootScope //already mentioned @imcg
service

Using $rootScope you can do something like in your LoginController controller

angular.module('myApp').controller('LoginController', function($scope, $location, $window, $rootScope) {
   $scope.user = {};
   $rootScope.bodylayout = 'login-layout';

   //others code 
}

Using service

angular.module('myApp').factory("myService", function(){

      return {
        sharedObject: { data: 'login-layout' }
      }; 

});

Use this service in your controller

angular.module('myApp').controller('LoginController', function($scope, $location, $window, myService) {
       $scope.user = {};
       $rootScope.bodylayout = myService.sharedObject.data; // get data from service

       //others code 
    }

Where your HTML looks like

<body class="{{bodylayout}}">

Note in this case you need to set bodylayout in each controller otherwise it use the old value

imcg · Answer

Try using the $rootScope:

$rootScope.bodyClass = 'login-layout';

<body class="{{$root.bodyClass}}">

You could handle this in the individual controllers, or perhaps in your app.js by listening for routeChangeSuccess:

$rootScope.$on('$routeChangeSuccess', function (event, currentRoute) {
    switch(currentRoute.templateUrl) {
        case 'login.html':
        case 'register.html':
        case 'forgotpassword.html':
            $rootScope.bodyClass = 'login-layout';
            break;
        default:
            $rootScope.bodyClass = '';
            break;
    }
});

AngularJS Changing <body> class using global variable

Tags:

javascript

html

jquery

angularjs

global-variables

Shiju K Babu

2 Answers

Tasnim Reza

imcg

Recent Activity

Donate For Us