title: How to properly display header/footer using angularjs and ui-router?
body: <p>This is my index.html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my app.js:</p>
  
  <pre><code>angular.module('sample', [
              'auth0',
              'ngRoute',
              'sample.home',
              'sample.header',
              'sample.login',
              'ui.router',
              'angular-storage',
              'angular-jwt'
          ])
          .config(function myAppConfig($stateProvider, $urlRouterProvider, $routeProvider, authProvider, $httpProvider, $locationProvider,
              jwtInterceptorProvider) {
  
              $stateProvider
                  .state('login', {
                      url: '/login',
                      templateUrl: 'login/login.html',
                      controller: 'LoginCtrl'
                  }).state('root', {
                      url: '/',
                      abstract: true,
                      views: {
                          'header': {
                              templateUrl: 'home/header.html',
                              controller: 'HeaderCtrl'
                          },
                          'footer': {
                              templateUrl: 'home/footer.html'
                          }
                      },
                      data: {
                          requiresLogin: true
                      }
                  }).state('root.home', {
                      url: '/',
                      views: {
                          '@': {
                              templateUrl: 'home/home.html'
                          }
                      },
                      data: {
                          requiresLogin: true
                      }
                  })
              $urlRouterProvider.otherwise('/');
  
              authProvider.init({
                  domain: AUTH0_DOMAIN,
                  clientID: AUTH0_CLIENT_ID,
                  loginUrl: '/login'
              });
  
              jwtInterceptorProvider.tokenGetter = function(store) {
                  return store.get('token');
              }
  
              $httpProvider.interceptors.push('jwtInterceptor');
          })
          .run(function($rootScope, auth, store, jwtHelper, $location, $state, $stateParams) {
              $rootScope.$on('$locationChangeStart', function() {
                  if (!auth.isAuthenticated) {
                      var token = store.get('token');
                      if (token) {
                          if (!jwtHelper.isTokenExpired(token)) {
                              auth.authenticate(store.get('profile'), token);
                          } else {
                              $location.path('/login');
                          }
                      }
                  }
              });
          })
          .controller('AppCtrl', function AppCtrl($scope, $location) {
              $scope.$on('$routeChangeSuccess', function(e, nextRoute) {
                  if (nextRoute.$$route &amp;&amp; angular.isDefined(nextRoute.$$route.pageTitle)) {
                      $scope.pageTitle = nextRoute.$$route.pageTitle + ' | Auth0 Sample';
                  }
              });
          })
  </code></pre>
  
  <p>If I do login &amp; the root that's commented out, everything works fine. But I need to put in a header and footer (the files are correct) and when I try the root + root.home, I get a blank screen with no errors on the browser's console either. </p>
  
  <p>I'm trying to go off of a few examples from online (such as <a href="http://plnkr.co/edit/OJ5iCSioIUpz6OGYHQG8?p=preview" rel="nofollow noreferrer">this</a> one) but none are working out so I don't know what I'm doing wrong.</p>
  
  <p>Right now my header/footer.html just say header/footer.html while home has a button on it.</p>
  
  <hr>
  
  <p>Added the full app.js in case that helps. Each html (footer/header/home) just has </p>
  
  <pre><code>&lt;h1&gt;Home&lt;/h1&gt;
  &lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Edit: index.html</p>
  
  <pre><code>&lt;body&gt;
      &lt;div ui-view="header"&gt;&lt;/div&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
      &lt;div ui-view="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>.state('root.home', {
              url: '/',
              views: {
                  '@': {
                      templateUrl: 'views/home.html',
                      controller: 'HomeCtrl'
                  }
              },
              data: {
                  requiresLogin: true
              }
          })
  </code></pre>