仅在主页/索引页面上的整页背景答案

【问题标题】：Full page background only on home/index page仅在主页/索引页面上的整页背景
【发布时间】：2016-02-21 15:40:04
【问题描述】：

我有一个有趣的问题。我有一个典型的单页应用程序，在 index.html 中，我有页眉、页脚和，使用 ui-router 注入视图。

当用户在主页 (index.html) 上时，我怎样才能在 ... 而在任何其他页面上，该背景不存在（白色）。

html:

<body ng-controller="MainController">

    <header>            
        <nav>
            <ul>
                <li><button>Login</button></li>
                <li><button>Tell Me More!</button></li>
            </ul>
        </nav>
    </header>


    <main>
        <section class="container">
            <div ui-view /></div>
        </section>
    </main>

    <footer>
            <ul>
                <li>Contact Us</li>
                <li>About Us</li>
            </ul>
    </footer>


    <script src="/assets/js/vendor/angular.min.js"></script>
    <script src="/assets/js/vendor/angular-ui-router.js"></script>
    <script src="/assets/js/vendor/angular-animate.js"></script>
    <script src="/assets/js/all.min.js"></script> 

</body>

app.js：

var app = angular.module('myApp', ['ui.router', 'ngAnimate']);

app.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        .state('index', {
            url: '/index',
            templateUrl: 'partial/home.html',
            controller: 'HomeController'
        })

        .state('login', {
            url: '/login',
            templateUrl: 'partial/login.html',
            controller: 'LoginController'
        });

        $urlRouterProvider.otherwise('/index');
});

【问题讨论】：

从 home.html 视图生成绝对图像 - 然后这是它会显示的唯一页面

标签： javascript css angularjs angularjs-scope angular-ui-router

【解决方案1】：

您可以通过设置将由控制器范围继承的$rootScope 变量或通过UIrouter 将一些样式参数发送到不同的状态来为不同的页面应用不同的样式或图像），然后您将在应用样式/图像的视图。

简短说明：当用户在首页时，他们不在index.html中，而是处于您定义的状态作为主页（你在最初的问题中有这个假设）。

几个示例：

选项 1 - $rootScope 中的设置

在您模块的app.run(...) 中，您可以监听状态更改事件并为您的特定路线设置一些变量，即：

angular.module('yourModuleNameHere').run(function($rootScope, ...
 //some global settings here:
 $rootScope.isHome = false;
 $rootScope.hasInnerHeader = false;
 $rootScope.bodyClass = "";
 $rootScope.bodyStyle = "";


 // Page change - specific settings
 $rootScope.$on("$stateChangeSuccess", function(event, currentRoute, previousRoute) {
  //some other processing you may need 
  switch ($state.current.name) {
        case 'main.home':
            $rootScope.headerClass = 'home-header';
            $rootScope.isHome = true;
            $rootScope.bodyClass = "home-body background-full";                
            break;
        default:
            //some default settings
 }

您可以直接在部分文件中使用这些设置：

<div id="header" class="{{headerClass}}">...some header content here....</div>

因为部分作用域继承了 $rootScope。

选项 2 - 从 UIrouter 发送参数（您可以从配置文件中获取它们，将其作为提供程序注入您的 app.config）

为您的路线设置一些特定于页面的数据：

$stateProvider
    .state('index', {
        url: '/index',
        templateUrl: 'partial/home.html',
        controller: 'HomeController',
        pageSettings: {
            bodyClass: "homepage-class";
        }
    })

在部分控制器中，您可以像这样使用它：

别忘了注入$state的依赖项

function _init() {
    // ***** Route params check *******
    if ($state.current.pageSettings && $state.current.pageSettings.bodyClass)   {
     //do something with the class, ie: put it in the scope:
     $scope.myPartialClass = $state.current.pageSettings.bodyClass

     //or switch through different settings
        switch ($state.current.pageSettings.bodyClass) {
            case "homepage-class":
                $scope.hideSomeDiv = true;
                $scope.anotherSetting = false;
                break;
            case "homepage-fullscreen-class":
                $scope.hideSomeDiv = false;
                break;
            default:
        }
    }
}

_init();//call the init method

专业人士：这些方法允许您为不同的页面设置特定的样式、更改一些布局选项、从配置文件自定义它们等等

缺点：您需要做更多的工作，如果您只需要设置单个页面的样式，则不是很有必要

注意：上面的代码未经测试，但应该给你一个想法

【讨论】：

有用的信息。有兴趣看看回复。与@DarrenSweeney 相比，这种方法的优缺点是什么
我更新了答案。 @DarrenSweeney 的解决方案更简单，我猜
现在我意识到您的问题还有另一个含义：在前往特定路线时如何更改应用程序的整个布局。这需要基于 UIrouter 状态和视图的完全不同的答案。