How to : Angularjs route refresh

Question

I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:

var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
    .when('/Page', {
        templateUrl: 'js/app/pages/Page.html',
        controller: 'pageController',
        reloadOnSearch: false
    })
    .when('/Settings', {
        templateUrl: 'js/app/pages/Settings.html',
        controller: 'settingsController',
        reloadOnSearch: false
    })
    .when('/Admin', {
        templateUrl: 'js/app/pages/Admin.html',
        controller: 'adminController',
        reloadOnSearch: false
    })
    .otherwise({
        redirectTo: '/Page'
    });

    $locationProvider.html5Mode(true);
});

And my html file contains

<div id="menu"></div>
<div ng-view></div>

Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..

I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.

Answer 1

Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.