Можно ли создать гибридное приложение с 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.

https://github.com/HabitRPG/habitrpg-mobile

Хорошо, я понял это.

Запуск веб-приложения из файла не работает из-за 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

Другие вопросы по тегам