CODEWITHSUNDEEP
angularjs
niran
niran

Reputation: 1980

how do I change background image of application based on url or routing?

I would like to change the background image of the application(Html Body) based on the url. And this I want to do in angularJS only :)

For eg:

1) if user visits the url like this,

www.domain.com/view1

Bellow image is shown

enter image description here

2) If user visits url www.domain.com/view2

I want show other image

enter image description here

app.js

  var app = angular.module('app', []);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }])

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);;

Controler.js

 app.controller('MyCtrl1',function($scope){
    $scope.viewBackground="body"
    console.log($scope.viewBackground);
})

app.controller('MyCtrl2',function($scope){
    $scope.viewBackground="profile"
})

in the partial html, I am just doing like this

    <div class="span12">


            <p>

           {{$scope.viewBackground}}zxz
            </p>

    </div>

But some reason I am not able to get the value of viewBackground property value.

Upvotes: 1

Views: 2791

Answers (2)

S Panfilov
S Panfilov

Reputation: 17551

I'm not sure I understand you correctly, but I hope so. You have 2 options.

First - use different controllers for each page view1 and view2. And use ng-class directive on the pages:

HTML:

<!-- "page" View 1 -->
<div ng-controller="View1Ctrl">
    <div ng-class="viewBackground"> View 1 </div> 
</div>

<!-- "page" View 2 -->
<div ng-controller="View2Ctrl">
    <div ng-class="viewBackground"> View 2 </div> 
</div>

JS:

var app = angular.module('app', []);

function View1Ctrl($scope) {
    $scope.viewBackground = "background-small"
}    

function View2Ctrl($scope) {
    $scope.viewBackground = "background-big"
}

On your CSS:

.background-small{
    height:200px;
    width:200px;
    background: url('...img1...');
}

.background-big{
    height:400px;
    width:400px;
        background: url('...img2...');
}

Second option - use .run block, where you will add some logic to change the bg-image, but this is a poor option

Upvotes: 1

Chris Gunawardena
Chris Gunawardena

Reputation: 6468

If your controller you can check the $routeParams param and then set a scope variable to control the background image.

function announcements_detail_controller($scope, $rootScope, $routeParams, $http, $location)
{  //console.log($routeParams);
   $scope.css_class_for_background_image = 'xxxx';//

}

Upvotes: 0

Related Questions