Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

angular routing - navigate to page works fine, then browser refresh causes 404

Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America asked on
Angular
2 Comments1 Solution3100 ViewsLast Modified:
I've been trying to implement a Single Page Application using  "routing' in Angular.  It works great and injects the html content for whatever page I specify.

/contact

loads the contact page

/forumrules

loads the forum rules page

and so forth and so on.

But, once those pages load, if I do a refresh, I get a 404 page not found, even though the URL has not changed.

My research so far has said something about the fact that the location does not actually physically exist on disk.  In other words, a location like

<domainname>/contact

does not mean that a contact sub directory exists.  It is simply the result of the routing of the contact.html page to the main page (index.html)

To see this in action you can go to the website online:

http://utahkidsfoundation.com

Then you can click on the Contact menu at the top right of the nav bar (red area near the top)

It should take you to the contact page and the URL will read utahkidsfoundation.com\contact

At this point, if you refresh the page, you will get a 404 page not found.

How do I fix this so I can refresh on a page I've routed to and not have this error?

I'll include the relevant html and JS / controller code here:


spaController.js

(taken from this tutorial I found:

https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

 )

var scotchApp = angular.module('scotchApp', ['ngRoute']);

    // configure our routes
    scotchApp.config(function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        
        $routeProvider


            // route for the home page
            .when('/', {
                templateUrl : 'home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'contact.html',
                controller  : 'contactController'
            })

            // route for the events page
            .when('/events', {
                templateUrl : 'events.html',
                controller  : 'eventsController'
            })

             // route for the events page
            .when('/donate', {
                templateUrl : 'donate.html',
                controller  : 'donateController'
            })
            
            // route for the forum rules page
            .when('/forumrules', {
                templateUrl : 'forumrules.html',
                controller  : 'forumrulesController'
            });            
    });

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = '';
    });

    scotchApp.controller('aboutController', function($scope) {
        $scope.message = '';
    });

    scotchApp.controller('contactController', function($scope) {
        $scope.message = '';
    });

    scotchApp.controller('eventsController', function($scope) {
        $scope.message = '';
    });

    scotchApp.controller('donateController', function($scope) {
        $scope.message = '';
    });

  scotchApp.controller('forumrulesController', function($scope) {
        $scope.message = '';
    });

(note:  not sure if I am doing the <base .. > meta tag properly.  I have a commented-out version right below it which did not work, either)

index.hml (notice at the bottom I have my content area where the individual HTML is loaded in depending on the page chosen:
<!doctype html>

<html ng-app="scotchApp">

<head>
  <title>Utah Kids Foundation</title>

  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous">

    </script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>


  <link type="text/css" rel="stylesheet" href="ukf.css" />
  <script src="ukf.js"></script>

 <base href="/">
<!--
 <base href="/index.html">-->

 <script src="spaController.js"></script>

  
</head>

<body ng-controller="mainController" style="background-color:#eeeeee;">


  <div class="pr fl tz lz">
    <div class="pr fl tz lz cb">
      <div class="pr fl tz lz cb" style="height:300px;">
        <img id="image" src="Images/mainpage/aiden.png" alt="..." class="tz lz w100pc" style="position:absolute;height:300px;"
          class="img-responsive center-block" />
        <div class="pr fl tz lz cb">
          <a href="#"><img id="imglogo" src="Images/mainpage/ukflogo.png" alt="..." class="img-responsive center-block" /></a>
        </div>
        <div class="pr fl tz lz cb w100pc">
          <nav class="navbar navbar-default">
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav" style="margin-left:25%;">
                <li><a href="#">HOME</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">OUR MISSION</a></li>
                    <li><a href="#">MEET OUR BOARD</a></li>
                    <li><a href="#">OUR KIDS IN THE NEWS</a></li>
                    <li><a href="#forumrules">FORUM RULES</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECTS<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">JACKPACKS</a></li>
                    <li><a href="#">MEET OUR UTAH KIDS</a></li>
                    <li><a href="#">MEDICAL SUPPPLY EXCHANGE</a></li>
                    <li><a href="#">EMPTY STOCKING FUND</a></li>
                    <li><a href="#">LIST OF NON-PROFITS</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SPONSORSHIP<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">HOW YOU CAN HELP</a></li>
                  </ul>
                </li>
                <li><a href="#events">EVENTS</a></li>
                <li><a href="#">UTAH KIDS SWAG</a></li>
                <li><a href="#donate">DONATE</a></li>
                <li><a href="#contact">CONTACT</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>

    <div class="pr fl cb w100pc">
      <img id="shadow" src="Images/mainpage/shadow.png" alt="..." class="img-responsive center-block" />
    </div>

  </div>


  <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main" style="width:100%;height:100%;"> 

        <!-- angular templating -->
        <!-- this is where content will be injected -->

        <div ng-view></div>
    </div>
    
</body>

</html>
ASKER CERTIFIED SOLUTION
Avatar of Tom Knowlton
Tom KnowltonFlag of United States of America imageWeb developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answers