title: Routing with UI Router in Angular JS App gives a blank screen when I test on Https Server
body: <p>Here is my app.js code:</p>
  
  <pre><code>var app = angular.module('myApp', ['ui.router', 'firebase']);
  
  app.config(function($stateProvider, $urlRouterProvider){
      $stateProvider
      .state('site', {
          url: '/site',
          templateUrl: 'partials/site.html'
      })
      .state('site.home', {
          url: '/home',
          templateUrl: 'partials/home.html'
      })
      .state('site.about', {
          url: '/about',
          templateUrl: 'partials/about.html'
      })
      .state('site.projects', {
          url: '/projects',
          templateUrl: 'partials/projects.html'
      })
      .state('site.blog', {
          url: '/blog',
          templateUrl: 'partials/blog.html'
          controller: 'BlogCtrl'
      })
      .state('site.login', {
          url: '/login',
          templateUrl: 'partials/login.html'
          controller: 'LoginCtrl'
      })
      .state('site.newpost', {
          url: '/newpost',
          templateUrl: 'partials/newpost.html',
          controller: 'NewPostCtrl'
      })
      .state('site', {
          url: '/contact',
          templateUrl: 'partials/contact.html'
      });
  
      $urlRouterProvider.otherwsie('/site/home');
  })
  </code></pre>
  
  <p>This is the index.html code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset= "utf-8"&gt;
  
          &lt;title&gt;Portfolio&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
          &lt;!-- Angular --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Angular UI Router --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"&gt;&lt;/script&gt;
  
          &lt;!-- Angular Animate --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- jQuery --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Bootstrap --&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Firebase --&gt;
          &lt;script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Controllers --&gt;
          &lt;script src="js/controllers/BlogCtrl.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers/LoginCtrl.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers/NewPostCtrl.js"&gt;&lt;/script&gt;
  
          &lt;!-- App --&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
          &lt;!-- Styling --&gt;
          &lt;link rel="stylsheet" type="text/css" href="css/styles.css"&gt;
          &lt;link rel="stylsheet" type="text/css" href="css/animate.css"&gt;
  
      &lt;/head&gt;
  
      &lt;body ng-app="myApp"&gt;
          &lt;div ui-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I try and test the code locally using "http-server -a localhost -p 3000", it just shows a blank page that is my index.html page. I think it is some routing error but I can't see the bug, any ideas for fixes?</p>
  
  <p>It also states that app is not defined in this js file:</p>
  
  <pre><code>'use strict'
  
  app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
      var data = $firebaseArray(FireRef);
      $scope.posts = data;
  
      $scope.$watch('posts', function(newValue, oldValue){
          $scope.posts = $sce.trustAsHtml(data);
      })
  
      $scope.login = function() {
          $state.go('site.login');
      }
  
      $scope.newPost = function(){
          $state.go('site.newPost');
      }
  });
  </code></pre>