title: $routeProvider and angularJS?
body: <p>Ok I have a simple web app that I'm trying to update with route provider it works fine when click on the li list on page but when i refresh the page it just give me a 404  it looks like it's trying to access the url instead of going to root and passing in the template...
  why?</p>
  
  <pre><code>'use strict';
  
  angular.module('newSiteApp')
    .controller('MainCtrl', function ($scope, $location) {    
        $scope.menu =
          [ {name: 'Main', url: 'main.html'} 
          ,  { name: 'contact', url: 'contact.html'}
          , { name: 'Projects', url: 'projects.html'} ];
  
        $scope.ajaxpage = function ajaxload(){
          $scope.getmenuitem = this.menuitem.url; 
          var path = $location.path(); 
          $location.url('pages/'+this.menuitem.name);
        }
  
    })
    .config(function ($routeProvider, $locationProvider) {
      console.log($routeProvider);
    $routeProvider.when('/', {
      templateUrl: '/views/main.html',
      controller: BookCntl,
      resolve: {
        delay: function($q, $timeout) {    
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    });
    $routeProvider.when('/pages/Main', {
      templateUrl: '/views/main.html',
      controller: BookCntl,
      resolve: {
        delay: function($q, $timeout) {    
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    }); 
    $routeProvider.when('/pages/contact', {
      templateUrl: '/views/contact.html',
      controller: BookCntl,
      resolve: {
        delay: function($q, $timeout) {
  
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    }); 
    $routeProvider.when('/pages/Projects', {
      templateUrl: '/views/projects.html',
      controller: BookCntl,
      resolve: {
        // I will cause a 1 second delay
        delay: function($q, $timeout) {
  
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    }); 
    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
  });
  
  function BookCntl($scope, $routeParams) {
    $scope.name = "BookCntl";
    $scope.params = $routeParams;
  }
  </code></pre>
  
  <p>html: </p>
  
  <pre><code>`&lt;body ng-app="newSiteApp" ng-controller="MainCtrl"&gt;
      &lt;div class="header"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="menuitem in menu" ng-click="ajaxpage()"&gt;{{menuitem.name}}&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;!--[if lt IE 7]&gt;
        &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- Add your site or application content here --&gt;
      &lt;div class="slide-animate-container"  &gt;
         &lt;!-- &lt;div  class="slide-animate" ng-init="getmenuitem = page" ng-include="getmenuitem"&gt;&lt;/div&gt;--&gt;
      &lt;/div&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="bower_components/es5-shim/es5-shim.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/json3/lib/json3.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- build:js scripts/vendor.js --&gt;
      &lt;!-- bower:js --&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;!-- endbower --&gt;
      &lt;!-- endbuild --&gt;
          &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
          &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
          &lt;!-- endbuild --&gt;
    &lt;/body&gt;`
  </code></pre>