Можно ли создать гибридное приложение с Angular?
Я создаю приложение AngularJS, которое, как я ожидал, будет работать как гибридное приложение для мобильных устройств. Таким образом, приложение будет запускаться локально из файловой системы.
Когда $routeProvider получает html-файл, я получаю следующее сообщение.
Очевидно, это нарушение CORS, но файл является локальным и пытается получить доступ к другому локальному файлу. Это не так, как веб-сайт пытается получить доступ к локальным файлам клиентов. Это клиент.
Я не могу раскрутить веб-сервер для обслуживания локальных файлов, потому что он будет упакован и развернут как локальное приложение.
Я знаю, что люди постоянно создают гибридные мобильные приложения. Я не могу понять, как они делают это с AngularJS и почему AngularJS не предлагает ни решения, ни предписывает, как обойти CORS.
Я открыт для всех предложений. Спасибо всем.
XMLHttpRequest не может загрузить файл:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html. Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome-extension, https, chrome-extension-resource. VM36 angular.js:8380
Ошибка: не удалось выполнить "send" для "XMLHttpRequest": не удалось загрузить "file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html.
Вот мой конфиг маршрута
mashupApp.config(function ($routeProvider, $httpProvider) {
// I've tried all these with no effect.
//$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$routeProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$httpProvider.defaults.useXDomain = true;
//delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/about', {
templateUrl: 'apps/mashup/about/about.html',
controller: 'aboutController',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load({
name: 'mashupApp',
files: ['apps/mashup/about/aboutController.js', 'apps/mashup/~appServices/dataService.js']
});
}]
, sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
.when('/', {
templateUrl: 'apps/mashup/welcome/welcome.html',
sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
;
});
4 ответа
Я не знаю подробностей, но я уверен, что приложение HabitRPG для Android использует Angular.
Хорошо, я понял это.
Запуск веб-приложения из файла не работает из-за CORS, но когда вы упакованы в Phonegap или Cordova внутри Intel XDK, все работает.
Я взял свое приложение и создал пустой проект Intel XDK и скопировал в него мои веб-файлы, ничего не меняя.
Все заработало!
Спасибо тем, кто предложил идеи и предложения. Я очень ценю это.
Я вижу, как это может работать сейчас.
Если вы хотите создать гибридное мобильное приложение с AngularJS, вам обязательно стоит проверить http://ionicframework.com/.
С сайта Ionic:
Матч, заключенный на небесах. Ionic использует AngularJS для создания среды, наиболее подходящей для разработки многофункциональных и надежных приложений. Ionic не только выглядит красиво, но и его основная архитектура предназначена для серьезной разработки приложений, и AngularJS прекрасно вписывается.
Вы не можете получить доступ к файлам напрямую из-за настроек безопасности браузера, но вы можете хранить данные и т.д. в локальном хранилище и использовать их, когда приложение находится в автономном режиме.
Кто-то собрал пример здесь http://amitavroy.com/justread/content/articles/html5-local-storage-angular-js