I am trying to maintain an animated background while switching between different states in my UI-router setup. The goal is for the background to remain constant while only the content of the states changes.
Here is how I have set up my UI-router and attempted to achieve this (unsuccessfully):
abstract.html
<ion-view class="content-back">
<!-- animated background -->
<div id="galaxy">
<div class="bg"></div>
<div class="stars-back"></div>
<div class="stars-middle"></div>
<div class="stars-front"></div>
<div class="bg center"></div>
</div>
<ion-nav-view name="menuContent"></ion-nav-view>
app.js
angular.module('starter', [
'ionic',
'starter.controllers',
'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
and state config part
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('abstract', {
url: '/abstract',
abstract: true,
templateUrl: 'templates/abstract.html',
})
.state('tab.abstract', {
url: '/dash',
views: {
'menuContent': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/dash');
});