title: AngularJS Changing <body> class using global variable
body: <p>I just created a angularJS application.</p>
  
  <p>Here is my <strong>index.html</strong></p>
  
  <pre><code>&lt;html ng-app="MyApp"&gt;
    &lt;head&gt;
      &lt;!-- CSS files import --&gt;
    &lt;/head&gt;
    &lt;body class="{{bodylayout}}"&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;--! JS imports 
     aungular.js
     app.js
     login.js
     register.js
     --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'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.
  }]);
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>login.js</strong></p>
  
  <pre><code>'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" &amp;&amp; password=="admin123")
          {
              $location.path( "/home" );  
          }
          else
          {
              $scope.message="Error";
              $scope.messagecolor="alert alert-danger";
          }
      }
  });
  </code></pre>
  
  <p>Similarly, I have post methods in other controllers.</p>
  
  <p>What I want is, when the view is login or register or forgotpassword, the body class should be <code>"login-layout"</code>. So in body I put <code>class="{{bodylayout}}</code>". I know using global variables, the value can be set. But I don't know how to.</p>
  
  <p>In <strong>app.js</strong> I tried this</p>
  
  <pre><code>angular.module('myApp').factory("myService", function(){
  
        return {
          sharedObject: { data: 'login-layout' }
        }; 
  
      });
  </code></pre>
  
  <p>But don't know how to use it.</p>