Change class of body according to the url in angularjs

Question

Here is my url

For Login - http://localhost/ang/#/login

For Dashboard - http://localhost/ang/#/dashboard

Here is my html for body tag

If this is current url is http://localhost/ang/#/login then the body should have the class="login-layout" tag i.e.,

<body ng-cloak="" class="login-layout>

else it should have

<body ng-cloak="" class="no-skin">

I tried to take do this in php by i can't take the url after # like said here

Is this possible to do in AngularJS itself ?

Update :

I tried to do this in AngularJS

From the controller i can get the url after #

var nextUrl = next.$$route.originalPath;

but how can i change the class name..

Do you consider using ng-class? – Ivan Ursul Sep 12 '15 at 11:54 — Ivan Ursul, Sep 12 '15 at 11:54

score 2 · Answer 1 · answered Sep 12 '15 at 11:43

this is how i would do

<body class="{{currentclass}}" ng-cloak>

now in login controller just do

$rootScope.currentclass = "login-layout";

and in every other controller just do

$rootScope.currentclass = "no-skin";

OR

in app.run just check for the login path.

app.run(function($rootScope, $location){
rootScope.$on('$routeChangeStart', function(event, next, current){
    if ($location.path() == '/login') {
          $rootScope.currentclass = "login-layout";
    }
    else{
          $rootScope.currentclass = "no-skin";
    }
});

Hey your answer is very good, but i do have a problem in it.. can you solve it pls — SA__, Sep 12 '15 at 12:13

makeitmorehuman · Accepted Answer · 2015-09-12T11:41:09.657

1

I need to do this in a project and this is how I achieved it:

inside my main app controller I have:

// Inject the $location service in your controller
// so it is available to be used and assigned to $scope
.controller('AppCtrl', ["$scope", "$location",...

    // this_route() will be the variable you can use
    // inside angular templates to retrieve the classname
    // use it like class="{{this_route}}-layout"
    // this will give you -> e.g. class="dashboard-layout"
    $scope.this_route = function(){
         return $location.path().replace('/', '');
    };

Which exposes the current route name on the scope.

then my body tag simply reads this like:

<body ng-controller="AppCtrl" class="{{this_route()}}-view" ng-cloak>

You can similarly use this with $state and read the $state.current.url and assing it to scope

edited Sep 12 '15 at 11:41

answered Sep 12 '15 at 11:34

makeitmorehuman

11,287
3
52
76

Can you pls elaborate a little pls, bcoz i am beginner in it – SA__ Sep 12 '15 at 11:37
Thanks, i will try it – SA__ Sep 12 '15 at 11:43
Also I suggest you forget about the no-skin class as in css you can only assign stuff to the login-layout and they wont appear for elements no in the login layout. that much simpler than adding more logic to handle the one you don't want to have skin for – makeitmorehuman Sep 12 '15 at 11:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89457/discussion-between-anto-and-xgreen). – SA__ Sep 12 '15 at 11:49

Ivan Ursul · Answer 3 · 2015-09-12T12:05:25.303

1

You can do it like in my example below

<body ng-cloak="" ng-class="bodyClass" class="login-layout>

$scope.bodyClass = "mainClass"
var nextUrl = next.$$route.originalPath;
if (..) {
   $scope.bodyClass = "sometAnotherMainClass";
}

Shoud controller should look like this

angular.module('youAppName').controller('yourController', [ "$scope", function($scope) {
    $scope.bodyClass = "mainClass"
    var nextUrl = next.$$route.originalPath;
    if (..) {
       $scope.bodyClass = "sometAnotherMainClass";
    }
    }]);

edited Sep 12 '15 at 12:05

answered Sep 12 '15 at 11:56

Ivan Ursul

3,251
3
18
30

I am getting this error ReferenceError: $scope is not defined – SA__ Sep 12 '15 at 12:01
Look, my approach is for controllers - it means that you need to write this code in each controller.If you want to do this functionality once - just create mainController, and put this functionality there – Ivan Ursul Sep 12 '15 at 12:11

score 1 · Answer 4 · answered Sep 12 '15 at 13:14

I think that the most "Angular" way to solve it is using a directive. The biggest benefit is that you don't have to set a scope variable in every controller you use.

This is how it would look:

app.directive('classByLocation', ['$location', function($location) {
  var link = function(scope, element) {
    scope.$on('$routeChangeSuccess', function() {
      if ($location.path() == '/login') {
        element.removeClass('no-skin').addClass('login');
      }
      else{
        element.removeClass('login').addClass('no-skin');
      }
    });
  };

  return {
    restrict: 'A',
    link: link
  };
}]);

And in your HTML:

<body class-by-location>

Here is a working plunker: http://plnkr.co/edit/zT5l6x9KYOT1qeMOxtQU?p=preview

Change class of body according to the url in angularjs

4 Answers4