AngularJS: как включить $locationProvider.html5Mode с все
при включении html5Mode в AngularJS через $locationProvider.html5Mode(true), навигация кажется перекошенной, когда вы приземляетесь на страницу глубже на сайте.
например:
http://www.site.com
когда я перехожу к корню, я могу щелкнуть все ссылки на сайте, Angular$routeProviderвозьмет на себя навигацию по сайту и загрузку правильных представлений.http://www.site.com/news/archive
но когда я перехожу к этому url (или нажимаю обновить, когда я на deeplink, как и выше...) это навигация не работает, как я ожидаю.
прежде всего, наш как документация на $locationProvider.html5Mode указывает, что мы ловим все URL-адреса на сервере, похожие наotherwiseroute в angular и возвращает тот же html, что и корневой домен. Но если я тогда проверю$locationобъект внутриrunфункция угловой, он говорит мне, чтоhttp://www.site.comмойhostи/archiveмойpath. элемент$routeProviderприбывает в.otherwise()предложение, так как у меня есть только/news/archiveкак действительный маршрут. и приложение делает странные вещи.
возможно, переписывание на сервере должно быть сделано по-другому, или мне нужно указать материал в angular, но в настоящее время я не знаю, почему angular see-это путь без /news сегмент включены.
пример главная.js:
// Create an application module
var App = angular.module('App', []);
App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/login', {
templateUrl: 'templates/login.html'
})
.when('/news', {
templateUrl: 'templates/news.html'
})
.when('/news/archive', {
templateUrl: 'templates/newsarchive.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/home'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
// Initialize the application
App.run(['$location', function AppRun($location) {
debugger; // -->> here i debug the $location object to see what angular see's as URL
}]);
Edit
согласно запросу, больше деталей на стороне сервера:
стороне сервера организованный маршрутизацией Zend framework, и он обрабатывает свои собственные маршруты (для подачи данных на интерфейс на определенном /api URL-адреса, и в конце концов, есть всеохватывающий маршрут, если нет определенного другого маршрута, он служит тем же html, что и корневой маршрут.
таким образом, он в основном обслуживает домашнюю страницу html на этом deeplinked маршруте.
обновление 2
после изучения проблемы мы заметили, что эта маршрутизация отлично работает, как есть, на Angular 1.0.7 stable, но показывает выше описанное поведение в угловом 1.1.5 неустойчиво.
я проверил журналы изменений, но до сих пор не нашел ничего полезного, я думаю, мы можем либо представить его как ошибку, либо нежелательное поведение, связанное с определенным изменением, которое они сделали, или просто подождать и посмотреть, исправлено ли это в более поздней стабильной версии.
5 ответов:
Это было лучшее решение, которое я нашел после больше времени, чем я хотел бы признать. В принципе, добавьте target= "_self" к каждой ссылке, которую вам нужно застраховать перезагрузку страницы.
http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/
эта проблема была вызвана использованием AngularJS 1.1.5 (который был нестабильным и, очевидно, имел какую-то ошибку или другую реализацию маршрутизации, чем это было в 1.0.7)
поворачивая его обратно к 1.0.7 решил проблему мгновенно.
попробовали версию 1.2.0rc1, но не закончили тестирование, так как мне пришлось переписать некоторые функции маршрутизатора, так как они вытащили его из ядра.
в любом случае, эта проблема исправлена при использовании AngularJS vs 1.0.7.
моя проблема решена с этим :
1 - Добавьте это в голову :
<base href="/" />2-Используйте это в
app.config$locationProvider.html5Mode(true);
Comments