Q:

Why is this angular app breaking on reload?

I am trying to figure out why my page breaks when I reload it, if the url is already populated.
Here is a link to a video of the issue.
https://drive.google.com/file/d/0B7y4F6sYl0HxcnpCa1lhazRCRHc/view?usp=sharing
Here is the code I am using for my app.js and my index.html

(function(){
   'use strict';

   angular.module('mysteryScience', ['ngRoute'])

 .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
 })

 .config(function($routeProvider, $locationProvider){
     $routeProvider
     .when("/", {
         redirectTo: function () {
          return "/app";
      }
     })
     .when("/app", {
         templateUrl : "view1/app.html"
     })
     .when("/app/article", {
         templateUrl : "view2/article.html"
     })
     .otherwise({redirectTo:'/'});
 })

 .controller('MediaController', function ($scope) {
     $scope.mediaObjs = [
      { 
       background_image: "components/img/Exhibit1.png",
       headline: "Season 0 KMTA",
       pageUrl: "/app/article"
       },
      { 
       background_image: "components/img/Exhibit2.png",
       headline: "Comedy Central The Golden Years",
       pageUrl: "/app/article"
       },
      { 
       background_image: "components/img/Exhibit3.png",
       headline: "Sci-Fi, Crow's voice, Ram Chips",
       pageUrl: "/app/article"
       }
  ];
 })

 .directive("mediaItems", function(){
     return {
         restrict: 'E',
         templateUrl:"components/partials/mediaObjectDirective.html"
     };
 })

})();
<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="mysteryScience" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="mysteryScience" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="mysteryScience" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mysteryScience" class="no-js"> <!--<![endif]-->
<head>
  <base href="/app">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
</head>
<body>

  <section class="header">
    <div class="container-fluid">
     <nav>
       <a href="/app"> <img src="components/img/g.png"/> </a>
     </nav>
    </div>
  </section>

  <div ng-view></div>

  <section class="follow">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-4 left">     
          <p class=""><img src="components/img/facebook.png"/>Help</p>
          <p>Privacy & Terms</p>
          <p>English </p>
        </div>
        <div class="col-sm-offset-4 col-sm-4 right">      
          <p class="">Follow us on</p>
          <img src="components/img/facebook.png"/>
          <img src="components/img/twitter.png"/>
          <img src="components/img/googlePlus.png"/>
          <img src="components/img/pinterest.png"/>
        </div>
      </div>
    </div>
  </section>

</body>
</html>

I have researched the issue extensively and even tried using a different angular seed but the issue is still here. It's a little difficult to find relevant search results because I'm not sure how to describe the issue to google in just a few words.
Updated Routing
Hasn't fixed the issue of content disappearing on page reload

 .config(function($routeProvider){
     $routeProvider

        .when('/app', {
            templateUrl : "view1/app.html",
            controller  : 'MediaController'
        })

        .when('/app/article', {
            templateUrl : 'view2/article.html',
            controller  : 'MediaController'
        })

        .otherwise({
            redirectTo: "/app"
        });
 })

A:

This could happen when you don't configure the route mapping on the server side.
When you reload your page, you are actually visiting localhost/app. If no route mapping config is made on the server side, the server (e.g nginx) will look for the index files(index.html, index.php, etc) in the /app folder in the web root directory.
So you need to map all the routes to the index.html on the server side.
For nginx configuration check this question

