Практическое руководство: Обновление маршрута Angularjs

Question

Я пытаюсь создать приложение, содержащее несколько видов в качестве шаблона. Шаблоны находятся под папкой js/app/pages/. И у меня есть 2 шаблона для показа и маршрутизации. Мой раздел маршрутизации:

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

И мой HTML-файл содержит

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

Меню DIV содержит элементы меню, маршрут меня между страницами. Например, когда я запускаю этот сайт в браузере, URL-адрес будет localhost/Page, а когда я нажму кнопку URL-адреса кнопки настройки с помощью localhost/Settings. Но когда я нажимаю кнопку F5 на моей клавиатуре. Страница дает мне ошибку The resource cannot be found..

Я ищу в Интернете «как обновить страницу маршрутизации в angularjs» и найти некоторые решения, но я не мог заставить их работать для меня. Я пробовал $route.reload() и $routeUpdate() метод, но это не работает для меня. Может быть, я что-то не так.

Answer 1

Решенный! Мне не удалось обновить с помощью ngRoute. Затем я конвертирую его в ui-router. Я объявляю состояния по URL-адресам. И обновление работает. Спасибо за комментарии и ответы. Может быть, это поможет кому-то.

Answer 2

Когда вы «перезагружаете страницу», вы снова заново создадите приложение. Это означает, что если вы не на главной странице, а на субтрассе у вас отсутствуют некоторые данные, вы, скорее всего, получите сообщение об ошибке.

Вы должны смотреть в атрибут разрешить для маршрутов, так, например,

.when('/Settings', { 
     templateUrl: 'js/app/pages/Settings.html', 
     controller: 'settingsController', 
     reloadOnSearch: false, 
     resolve: { 
      resourceone: function(){return whatsneeedtoberesolvehere;} 
     } 
    }) 

таким образом, независимо от того, где вашего приложения перезагружается, он будет иметь необходимые данные для загрузки страницы

Answer 3

На самом деле, когда вы нажимаете F5 с клавиатуры, он нажимает на ваш сервер для этой страницы, а не угловат, потому что у вас нет знака # между вашим URL. Для углового, URL должен быть вроде как - localhost/#/Page

Answer 4

Использование html5mode

Большая статья об этом here

Инициализировать его очень просто

.config(function($routeProvider, $locationProvider) { 

    // other routes here 

    $locationProvider.html5Mode(true); 

}); 

Answer 5

Если вы используете сервер Apache, это должно работать в этом терминале

sudo a2enmod rewrite && sudo service apache2 restart 

works for me

Answer 6

Просто сохраните # в URL-адресе, вам не нужно прикладывать дополнительные усилия для управления перезагрузками и т. Д., Вы можете подумать, что «#» в URL-адресе представляет собой конкретное состояние в одностраничном приложении.

В противном случае он может управляться путем перезаписи модулей, которые отображают URL-адрес с хешированным URL-адресом версии для приложения AngularJs.