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-адреса на сервере, похожие на otherwise route в 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 неустойчиво.



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

449   5  

5 ответов:

выяснил, что там нет ошибки. Просто добавьте:

<base href="/" />

на <head />.

Это было лучшее решение, которое я нашел после больше времени, чем я хотел бы признать. В принципе, добавьте 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

    Ничего не найдено.