1

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"
        });
 })
chesh
  • 15
  • 7
  • Well its definitively a routing issue. For my sanity can you change to - .when('/', { templateUrl : "view1/app.html" controller : 'MediaController' }) – dmoo Aug 09 '16 at 22:41
  • So how is your server-side route mapping configured? Have you map the '/app' to the index.html on the server side? – MMhunter Aug 10 '16 at 04:01

2 Answers2

1

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

Community
  • 1
  • 1
MMhunter
  • 1,431
  • 1
  • 11
  • 18
  • Hey I actually moved my code into yeoman for several reasons so I am no longer on this build but I think that this could definitely have fixed the issue I was having. Thank you for the succinct answer. – chesh Aug 12 '16 at 06:21
  • @chesh what was the fix? – Ritesh Karwa Nov 23 '19 at 07:24
0

Your routing looks confused. It should look something like -

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

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

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

        .otherwise({
            redirectTo: "/"
        });
dmoo
  • 1,509
  • 13
  • 16
  • Hi Dmoo, thank you for looking into it. Sorry for the messy code, still getting used to things. I updated the routing, and am posting it as an edit to my question but it still isn't running. – chesh Aug 10 '16 at 01:19