Question

我构建了一个AngularJS应用程序，我希望它可以作为移动设备的混合应用程序。因此，应用程序将从文件系统本地运行。

当$ routeProvider获取html文件时，我收到以下消息。

这显然是一个CORS违规，但该文件是本地的，并试图访问另一个本地文件。它不像网站试图访问客户端本地文件。这是客户。

我无法启动Web服务器来提供本地文件，因为这将打包并部署为本地应用程序。

我知道人们一直在构建混合移动应用程序。我无法弄清楚他们是如何使用AngularJS的，以及为什么AngularJS不提供解决方案或规定如何绕过CORS。

我对所有建议持开放态度。谢谢大家。

XMLHttpRequest无法加载文件：/// D：/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html。交叉源请求仅支持协议方案：http，数据，chrome扩展，https，chrome-extension-resource。 VM36 angular.js：8380

错误：无法在'XMLHttpRequest'上执行'send'：无法加载'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(); }
            }
        })

    ;

});

Answer 1

我不知道细节，但我很确定HabitRPG的Android应用程序使用Angular。

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

Answer 2

好的，我明白了。

由于CORS，从文件运行Web应用程序并不起作用，但是当您在Intel XDK中的Phonegap或Cordova中打包时，一切正常。

我拿了我的应用程序并创建了一个空白的英特尔XDK项目并将我的网络文件复制到它而不做任何改变。

这一切都奏效了！

感谢那些提出想法和建议的人。我真的很感激。

我现在知道这是如何运作的。

Answer 3

如果您想使用AngularJS创建混合移动应用程序，您一定要查看Ionic Framework。

来自Ionic网站：

天上的比赛。 Ionic利用AngularJS创建一个最适合开发丰富而强大的应用程序的框架。 Ionic不仅外观漂亮，而且其核心架构适用于严肃的应用程序开发，而AngularJS完美搭配。

Answer 4

由于浏览器安全设置，您无法直接访问文件，但您可以将数据等存储在localstorage中，并在应用程序脱机时使用该文件。

有人在这里汇总了一个例子http://amitavroy.com/justread/content/articles/html5-local-storage-angular-js

是否可以使用Angular构建混合应用程序？

4 个答案: