2015-02-24 3 views
0

В нашем приложении мы обслуживаем статические файлы углового приложения из foobar.com/public/angular. Домашняя страница (foobar.com) настроена на обслуживание foobar.com/public/angular/index.html. Таким образом, в нашем индексе файл <head>, мы имеем:Угловая замена url после hashbang

<base href="http://foobar.com/public/angular"> 

Однако, в процессе разработки, мы используем foobar.com/debug, что приводит к серверу использовать вместо этого:

<base href="http://foobar.com/public/angular-debug"> 

Сервер возвращает необработанным (не уменьшенные , uuglified и т. д.) версий файлов из этого URL-адреса. Мы также используем угловой маршрут для наших просмотров.

TLDR:

  • У нас есть производство по маршруту: foobar.com
  • У нас есть Дев маршрут: foobar.com/debug
  • У нас есть базовый тег: <base href="http://foobar.com/public/whatever">
  • Мы используем хэш-восклицательный URLs для угловые маршруты

Проблема связана с созданием URL-адресов на стороне клиента. Как обсуждалось в комментариях, <a href="#/new/route">Click here</a> не работает, потому что полученный URL-адрес содержит базовый тег, который сервер отклоняет и выглядит странно, поскольку пользователь запускается где-то в другом месте: foobar.com/public/angular/#/myRoute). Лучшее, что я мог придумать для создания желаемого URL, было следующим:

/** 
    * Returns current url after replacing everything after the hashbang with a new string. 
    * 
    * @param {string} s - string to change route with (e.g. 'asdf') 
    * @return {string} - new url e.g. http://google.com/foobar/#!/asdf 
    */ 
    makeRouteUrl = function(s) { 
    var root = $location.absUrl().match(/.*#!/); 
    if (root && (root.length > 0)) { 
     root = root[0]; 
     return(root + s); 
    } else { 
     // no hashbang in path? Choose home page (not intended use) 
     return "/"; 
    } 
    } 

Однако, это просто кажется немного грубым. Есть функция в угловом, что делает вышеуказанную функцию ненужной? Я искал функции в $ location, $ route и т. Д., Но ничто, похоже, не справляется с нашей сложной настройкой правильно. Нам нужно в конечном счете получить url как строку, а не перейти (мы поддерживаем открытую в новой вкладке, поэтому вам нужно использовать ng-href). Поскольку Угловые приложения часто используют URL-адреса hashbang для маршрутизации, я решил, что должно быть что-то, что позволяет вам просто изменить маршрут после hashbang, сохраняя при этом все, что перед ним.

+0

Не проблема на 100%, если проблема существует. Это только при открытии новой вкладки (т. Е. Target = "_ blank")? – charlietfl

+0

@charlietfl жаль отсутствие ясности - я редактировал вопрос. По сути, проблема заключается в том, что 'Click here' не работает элегантно из-за базового тега (он работает, поскольку спецификация говорит, что он должен, но дополнительный код маршрутизации должен быть добавлен на сервер для обработки измененного URL-адреса) – AlexMA

+0

Я не возьми. Все, что связано с хешем, будет обрабатываться с помощью угловой маршрутизации и будет относиться к точке входа приложения независимо от того, из какого каталога она обслуживается. Также не нужно даже базовый тег, если не использовать html5 mode – charlietfl

ответ

1

Считаете ли вы использование библиотеки UI Router?

В целом, это отлично.

Специфично на ваш вопрос UrlMatcher service предоставляет метод format, который, если я не понимаю, что вы спрашиваете, делает то, что вы пытаетесь сделать.

new UrlMatcher('/your/route/here').format(optionalNamedParameters); 
// returns a formatted URL 
2

Я не совсем уверен, если я понимаю проблему ...

$location.url('/stuff/after/hash?params=hey'); 

Или, если вы хотите установить путь после #:

$location.path('/stuff/after/hash'); 

что я обычно использование. Но после этого вам нужно вернуть URL-адрес без хэша? Как насчет

window.location.origin + window.location.pathname 

Для текущего URL без хэшей и параметров?

+0

Мне в основном нужен $ location.path ('/ stuff/after/hash'); кроме того, мне нужно получить URL как строку - этот метод заставляет браузер сразу перейти на другую страницу (потому что я хочу поставить url в теге ) – AlexMA

+0

И вы не можете использовать 'Click here'? –

+0

Это почти работает, за исключением того, что сервер не распознает маршрут, и он получается уродливым из-за базового тега (результат - «foobar.com/public/angular/#/the/route» - 'public/angular' это та часть, которой ее не должно быть). – AlexMA

Смежные вопросы