Is it possible to build a hybrid app with Angular?

Question

I build an AngularJS application that I expected to work as a hybrid application for mobile devices. As such the application would run locally from the file system.

When the $routeProvider gets the html file I get the following message.

This is a CORS violation obviously but the file is local and trying to access another local file. It's not like a web site is trying to access a clients local files. This is the client.

I can't spin up a web server to serve up the local files because this will be packaged up and deployed as a local application.

I know people build hybrid mobile applications all the time. What I can't figure out is how they do this with AngularJS and why AngularJS doesn't either offer a solution or prescribe how to get around CORS.

I'm open to all suggestions. Thanks all.

XMLHttpRequest cannot load file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM36 angular.js:8380

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html'.

Here is my route config

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

I don't know the details, but I'm pretty sure HabitRPG's Android app uses Angular.

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

Answer 2

Ok, I figured it out.

Running a web app from a file doesn't work because of CORS but when you are packaged up in Phonegap or Cordova inside the Intel XDK everything works.

I took my application and created a blank Intel XDK project and copied my web files to it without changing anything.

It all worked!

Thanks for those who offered ideas and suggestions. I really appreciate it.

I see how this can work now.

Answer 3

If you want to create a hybrid mobile app with AngularJS, you should definitely checkout the Ionic Framework .

From the Ionic website:

A match made in heaven. Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.

Answer 4

You can't access the files directly due to browser security settings, but you can store data etc in localstorage and use that when the app is offline.

Someone has put together an example here http://amitavroy.com/justread/content/articles/html5-local-storage-angular-js