How to setup an abstract state as a background in AngularJS

Question

I have an animated background which I want to keep persisting in the various states. Meaning that if I switch from states, the background in the back should remain the same (only the content of the states are moving).

I use UI-router in the following matter and have tried this (does not work):

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');

});

Answer 1

Related to this Q & A: ionic routing issue, shows blank page

I have taken its original plunker and adjusted that to our needs HERE

Let's have these states:

  .state('app', {
  //url: "/app",
  abstract: true,
  templateUrl: "tpl.tabs.html",
  controller: 'AppCtrl'
})
.state('home', {
    parent: 'app',
    url: "/app",
    ...
  })
.state('menu', {
    parent: 'app',
    url: "/menu",
    ...
})

they already use the abstract state 'app' with this template "tpl.tabs.html":

<ion-tabs class="tabs-icon-top">

  <ion-tab title="Home" icon="icon ion-home" href="#/app">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Dash" icon="icon ion-person" href="#/dash">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

  <ion-tab title="Menu" icon="icon ion-person" href="#/menu">
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-tab> 

</ion-tabs>

Which is already ready for our new states:

.state('abstract', {
  parent: 'app',
  abstract: true,
  templateUrl: 'templates/abstract.html',
})
.state('dash', {
    parent: 'abstract',
    url: '/dash',
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
})

And as we can see, not only is 'dash' having parent 'abstract' - it also have parent 'app' (it could simply be deep hierarchy)

And this is the parent 'abstract' content:

<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>

    <ion-nav-view name=""></ion-nav-view>
    </div>

</ion-view>

Check it in action here

Answer 2

Try below code snippet."templates/abstract.html" this template will be persistent in background and "templates/tab-dash2.html","templates/tab-dash2.html" will get loaded as a part of background. You cant access "/abstract" url directly. You can access tab with "/abstract/dash1","/abstract/dash2" url's.

.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('abstract.tab1', {
      url: '/dash1',
     views: {
       'menuContent': {
          templateUrl: 'templates/tab-dash1.html',
          controller: 'DashCtrl1'
        }
      }
   }).state('abstract.tab2', {
      url: '/dash2',
     views: {
       'menuContent': {
          templateUrl: 'templates/tab-dash2.html',
          controller: 'DashCtrl2'
        }
      }
   })




  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/dash');

});

Answer 3

In case, we want to have an abstract state (named 'abstract') - each child of it - must inform UI-Router that such state would become a parent:

.state('dash', {
    parent: 'abstract'
    url: '/dash',
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
})

We used notation with parent: 'abstract', other option could be to embed that into the state name .state('abstract.dash', {

Now, child state, will be injected into the parent's view template, so it must contain a target ui-view=""

<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>

     // e.g. here
     <div ui-view=""></div> // placeholder for child state

    </div>    
</ion-view>

The above stuff is about UI-Router state nesting: Nested States and Nested Views