Page refresh with AngularJs templates

Question

I am using ngRoute to serve up templates in my app. So I will do something like this

$routeProvider.when('/', { templateUrl: '/templates/search.html', controller: 'SearchController' })
            .when('/SearchResults', { templateUrl: '/templates/searchResults.html', controller: 'SearchResultsController' })
            .when('/Problem', { templateUrl: '/templates/problem.html', controller: 'ProblemController' });

Say the user goes to /Problem and then hits the refresh button in the browser they are obviously going to get a 404 error because /Problem doesn't exist on the server. Is there a standard way of handling this in angular?

Answer 1

That's why you add a # before your hyperlink as shown in the angularjs tutorial: https://docs.angularjs.org/tutorial/step_07

So for example: <a href="#/Problem"></a>

# will refer to the index site, and that's where angularjs will do your wished routing, even if the page is being refreshed, bookmarked, ...