AngularJS - Почему при изменении URL-адреса $routeProvider не работает, и я получаю ошибку 404

Мой $routeProvider настроен следующим образом:

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);
}]);

В приложении, если я нажимаю ссылку, например <a href="/teach/overview">Overview</a>, частичное отображение отображается как ожидалось. Однако, когда я вручную изменяю URL-адрес в адресной строке с точно таким же URL-адресом, я получаю ошибку 404. Неверно настроен $routeProvider?

Я использую MAMP localhost с корневым URL-адресом приложения http://localhost/teach/

ОТВЕТЫ

Ответ 1

Вам нужно настроить apache на перенаправить все пути в корневой каталог.

При прямом открытии http://localhost/teach/overview ваш веб-сервер пытается обслуживать страницу с маршрута, который не определен.

Когда в приложении angular вы нажимаете ссылку с href-контуром http://localhost/teach/overview, angular шагов, и вместо того, чтобы позволить вашему браузеру запрашивать страницу с сервера, она перехватывает ваше событие click и переходит на ваш routeProvider, чтобы посмотреть, какой вид на стороне клиента отображать (вот почему они называют его "одностраничными приложениями" ). Вот почему ваши ссылки работают до тех пор, пока вы не пытаетесь открыть их напрямую.

Помимо конфигурации apache вы также можете использовать тег base с значением href /teach/:

<base href="/teach/" />

так что вы можете иметь свой маршрутProvider не ограниченным фиксированным префиксом:

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);
}]);

Ответ 2

Вы также можете использовать # в своих URL-адресах.

http://localhost/teach/#/overview

Это не отправит запрос на сервер и вместо этого будет перехвачен Angular $routeProvider.