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

Question

My $routeProvider is configured like this:

teachApp.config([\'$routeProvider\', \'$locationProvider\', function($routeProvider,       $locationProvi         


        

Answer 1

You need to setup your apache to redirect all paths to root.

When you directly open http://localhost/teach/overview your web server is trying to serve a page from a route that is not defined.

When, within an angular app, you click on a link with href path of http://localhost/teach/overview, Angular steps in, and instead of letting your browser request a page from the server it intercepts your click event and goes to your routeProvider to see which client-side view to display (this is why they call it "single-page apps"). That's why your links work as long as you try not to open them directly.

Beside the apache config you might also want to use base tag with href value of /teach/:

<base href="/teach/" />

so that you can have your routeProvider not constrained by fixed prefix:

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

Answer 2

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.