I'm facing an interesting dilemma.. I've built a single-page application with a layout that includes a header, footer, and uses ui-router to display views.
Now, my challenge is to have a full-page background on the homepage (index.html) and a white background on all other pages. How can I achieve this?
Here's a snippet of the HTML code:
<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>
And here's a piece of the app.js file:
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');
});