AngularJS – Why when changing url address $routeProvider doesn’t seem to work and I get a 404 error

angularjsapache

My $routeProvider is configured like this:

teachApp.config(['$routeProvider', '$locationProvider', function($routeProvider,       $locationProvider) {
    $routeProvider.
        when('/teach/', {templateUrl: 'views/login_view.html'}).
        when('/teach/overview', {templateUrl: 'views/overview_view.html'}).
        when('/teach/users', {templateUrl: 'views/users_view.html'}).
        otherwise({redirectTo: '/teach/'});
    $locationProvider.html5Mode(true);
}]);

Within the app, if I click on a link such as <a href="/teach/overview">Overview</a>, the overview partial shows as expected. However, when I manually change the URL in the address bar to exactly the same URL, I get a 404 error. Is $routeProvider incorrectly configured?

I'm using MAMP localhost with the root url of the app being http://localhost/teach/

Best Answer

You can also use # in your URLs. 

http://localhost/teach/#/overview

This will not send a request to the server and will instead be intercepted by the Angular $routeProvider.

Related Topic