AngularJS и PhoneGap: $location.path вызывает последующий поиск tempateUrl для отказа
У меня возникли проблемы с поиском путей для работы с Android-приложением AngularJS v1.2.0 и PhoneGap/Cordova. Я пришел довольно далеко с html5mode(true)
, установив <base href="."/>
в index.html, а затем изменив $routeProvider.when('/')
на $routeProvider.when('/android_asset/www/index.html')
. После этого я могу получить redirectTo('login')
, чтобы достигнуть $routeProvider.when('/login')
, и там отобразится templateUrl: 'static/partials/login.html'
, как ожидалось.
Проблема заключается в том, что если я вместо этого попытаюсь перенаправить на страницу входа из моего кода Javascript с помощью $location.path('/login');
, маршрут будет найден, но загрузка templateUrl не завершится с исключением insecurl
.
Я пробовал доступ к файлу в белый список://с помощью нового модуля angular -sanitize, но это не помогает.
Как я могу сделать $location.path()
делать те же вещи, что и redirectTo
, чтобы частичная загрузка была загружена? Или есть другой способ решить эту проблему?
UPDATE: я получил бит вперед, добавив вызов функции replace() после функции пути, например:
$location.path('/login').replace();
но это похоже на хак, и это все равно приводит к тому, что templateUrl в противном случае будет терпеть неудачу с тем же исключением.
Любые идеи о том, что может быть неправильным? Является ли это то, что html5mode (true) просто не работает в данный момент с помощью Phonegap, и единственный способ исправить это - установить его в false и добавить хэштеги к каждому пути (например, это сделано в angular phonegap проект семян)?
Ответы
Ответ 1
Для справки в будущем я решил решить эту проблему:
-
В настоящее время AngularJS не поддерживает html5mode(true)
внутри приложения Cordova из-за проблемы insecurl
, о которой я сообщал. Мне нужно было добавить
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
который дает мне возможность явно установить html5Mode в PhoneGap index.html
с глобальной переменной:
<script>
var html5Mode = false;
</script>
-
Итак, теперь $location.path('/login')
, а также redirectTo: 'login'
работает, но ссылки в html файлах, нет. Чтобы заставить тех, кто работает в PhoneGap, с отключенным html5Mode, мне пришлось добавить #/
перед каждой ссылкой, например. <a href="#/login">login</a>
.
-
Это делает работу PhoneGap, но разбивает веб-страницу, которая использует History API с html5mode(true)
. Последняя часть головоломки заключалась в том, чтобы добавить <base href="/"/>
к веб-странице index.html(и оставить ее вне index.html проекта PhoneGap.) Итак, теперь, хотя у меня есть ссылка, которая говорит #/login
в веб-страницу, я добираюсь до url http://example.com/login
и не вижу никаких хэшей в адресной строке.
**
Итак, у меня есть API истории, работающий на моей веб-странице и. API истории отключен в проекте PhoneGap (там, где нет необходимости в API истории, поскольку нет адресной строки). Единственный недостаток - это дополнительный #/
, который я должен помещать в каждый шаблонный html файл, но это незначительная досада по сравнению с возможностью использовать все те же файлы html и javascript для веб-и мобильных устройств.
Ответ 2
У меня была эта же проблема. Мне удалось исправить это, пропуская ведущую косую черту в конфигурации маршрута:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.