javascript - How to using different background when routes to different angular page

So, I am working angular project using yeoman angular-generator. I have a.png. I want this image to be the background for login page only. after I click the submit button then it will redirect to #/about.html and using body class as fullscreen background style. How can I do that?

Here’s my css:

body {
  padding-top: 50px;
  background-color: #EEF2F5;
    font-family: 'Montserrat', sans-serif;
}

body2,
.body2 {
  background: url(powercube-09.png);
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
}

Here’s my index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_ponents/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/dashboard.css">
    <link rel="stylesheet" href="bower_ponents/font-awesome/css/font-awesome.css">
    <!-- endbuild -->
  </head>
  <body ng-app="loginApp" class="body2">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div ng-view=“"></div>

Here’s my view/main.html:

<div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"><br><br><br><br><br><br><br>
            <div class="widget2 widget_tally_box">
                <div class="x_panel" style="background:#edf1f4;">

                    <div class="x_content"><br>
                        <center>
                        <br><br>
                        <div class="col-md-12 form-group has-feedback">
                            <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="Username">
                            <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                        </div>
                        <div class="col-md-12 form-group has-feedback">
                            <input type="password" class="form-control has-feedback-left"
                                   id="inputSuccess2" placeholder="Password">
                            <span class="fa fa-lock form-control-feedback left" aria-hidden="true"></span>
                        </div>

                        <div class="col-md-12">
                            <a ng-href="#/about"><button type="submit" class="btn2 btn-success3"><h15>SIGN IN</h15></button></a><br>
                        </div>

                        <div class="col-md-12 form-group has-feedback"> <br/>
                            <h32><strong>Forgot your password?</strong></h32>
                        <div class="divider"></div>
                            <h32>Not on PowerCube? <strong>Get started here.</strong></h32>
                        </div>


                            </center>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>

Here’s my view/about.html:

<p>This is the about view.</p>

    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>

Here’s my css:

body {
  padding-top: 50px;
  background-color: #EEF2F5;
    font-family: 'Montserrat', sans-serif;
}

body2,
.body2 {
  background: url(powercube-09.png);
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
}

Here’s my index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_ponents/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/dashboard.css">
    <link rel="stylesheet" href="bower_ponents/font-awesome/css/font-awesome.css">
    <!-- endbuild -->
  </head>
  <body ng-app="loginApp" class="body2">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy./">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div ng-view=“"></div>

Here’s my view/main.html:

<div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"><br><br><br><br><br><br><br>
            <div class="widget2 widget_tally_box">
                <div class="x_panel" style="background:#edf1f4;">

                    <div class="x_content"><br>
                        <center>
                        <br><br>
                        <div class="col-md-12 form-group has-feedback">
                            <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="Username">
                            <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                        </div>
                        <div class="col-md-12 form-group has-feedback">
                            <input type="password" class="form-control has-feedback-left"
                                   id="inputSuccess2" placeholder="Password">
                            <span class="fa fa-lock form-control-feedback left" aria-hidden="true"></span>
                        </div>

                        <div class="col-md-12">
                            <a ng-href="#/about"><button type="submit" class="btn2 btn-success3"><h15>SIGN IN</h15></button></a><br>
                        </div>

                        <div class="col-md-12 form-group has-feedback"> <br/>
                            <h32><strong>Forgot your password?</strong></h32>
                        <div class="divider"></div>
                            <h32>Not on PowerCube? <strong>Get started here.</strong></h32>
                        </div>


                            </center>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>

Here’s my view/about.html:

<p>This is the about view.</p>

    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>

Share Improve this question asked Sep 9, 2015 at 7:30 yogieputra 6572 gold badges14 silver badges28 bronze badges

you could have some event on $routeChangeSuccess & then maintain one variable in scope that will have class name.. on HTML you need to use ng-class ..All this bination will do the trick – Pankaj Parkar Commented Sep 9, 2015 at 7:37
can you get me example with plunkr mate? – yogieputra Commented Sep 9, 2015 at 7:56

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

Add css at the end of view/main.html.

<style>
  body {
    padding-top: 50px;
    background-color: #EEF2F5;
    font-family: 'Montserrat', sans-serif;
  }

  body2,
  .body2 {
    background: url(powercube-09.png);
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
  }
</style>

This style will effect to view/main.html.

Well first you would want to correct your css. 'body2' isn't a tag.

I'm not entirely sure where you want that 'body2' css class to appear, but deciding what class to apply based on the route you are on (this is pb what you want to do) can be done with controller logic:

main.controller('MainCtrl', function($scope, $location) {
 $scope.getClass = function(path) {
   if ($location.path().substr(0, path.length) == path) {
    return "active";
   } else {
    return "";
  }
 }
});

Html code :

<ul class="nav nav-pills">
   <li ng-class="getClass('/main')"><a href="#/main">Phone List</a>
  </li>
  <li ng-class="getClass('/module1')"><a href="#/module1">Phone details</a>
  </li>
  <li ng-class=""><a href="#/module2">Module 2</a>
  </li>
 </ul>

Here is the wrking plunker code http://plnkr.co/edit/16iOyo6dz5RBNI91AD28?p=preview

Do it with ng-style (or ng-class), add a controller to check when you are in login page or not and use a scope variable to change the style, example:

<div class="row" ng-controller="MainController>
        <div class="col-md-4"></div>
        <div class="col-md-4"><br><br><br><br><br><br><br>
            <div class="widget2 widget_tally_box">
                <div class="x_panel" ng-style="loginBackground">

MainController:

$scope.loginBackground = null;
If (islogin) {
   $scope.loginBackground = "background:#edf1f4;"
}

Use the following css to set background image to the largest div of the routed homepage. It might be easier to simply include it in the HTML rather than separating it. Once other pages are loaded, the background-image will return to the default.

#bigDiv {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

I encounter this issue yesterday and turn out with this solution, not so smart but it's working.

+ Assign each page with custom directive: changebg
+ Name the body in index.html with a id (#example)
+ Now hook up angular body and change background style.

        angular.module('app').directive('changebg',function(){
        return{
            restrict:'C',
            controller:'changebgctrl'
        }
        }).controller('changebgctrl',changebgctrl);

       changebgctrl.$inject =['$location','$scope'];
    function changebgctrl($location,$scope){
        angular.element("#example").removeClass(); // remove any class exist
        angular.element("#example").addClass("whitebody");
    }

You can give directive a data if you want to use this directive multiple time across pages, or try modify .css() if you don't want .addClass()

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to using different background when routes to different angular page - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)