CODEWITHSUNDEEP
androidangularjscordova
Sergio Rinaudo
Sergio Rinaudo

Reputation: 2363

HTML5 mode with Phonegap and AngularJS

I'm trying to make AngularJS html5 mode (true) works with Phonegap. I did a lot of search before to post this, I tried different combination of configurations, adding the <base/> tag in meta ( also tried with <base href="" />, <base href="/" /> and <base href="/" target="_self" /> ), adding the .html suffix to route endpoints,adding the $delegate.history = false (like follow) inside the .config block

$provide.decorator('$sniffer', function($delegate) {
    $delegate.history = false;
    return $delegate;
});

and obviously

$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);

but there is no way to make it works, adding both the tag and set html5Mode to true will result in a blank screen when application starts. Also adding one of them will bring to the same result, blank screen.

Adding base tag with "android_asset" like follow

will make correctly load the main controller but then breaks routing....

Tested with target attribute "_blank" and "_self" values...

So my question is, can html5 mode be enabled using Phonegap and AngularJS?

I am using cordova version 3.4.1-0.1.0 with AngularJS 1.2.16, tested on Android 4.0.4 real device and Android AVD 4.4.2

Any advice would be very appreciated! Thanks

Upvotes: 9

Views: 3265

Answers (3)

Amrit Kahlon
Amrit Kahlon

Reputation: 1886

I have just gotten this working with angularjs 1.5, the new component router, and cordova(phonegap) 6.0.

Its a bit hacky, but here's what I had to do:

  1. Remove the <base href="/"> tag from your html file.
  2. Set html5 mode while setting requireBase to false

$locationProvider.html5Mode({ enabled: true, requireBase: false });

  1. Catch the cordova(phonegap) routes

    // iOS Cordova catcher
//
{
    path: '/var/**',
    component: 'cordova'
},
// Android Cordova catcher
//
{
    path: '/android_asset/www/index.html',
    component: 'cordova'
}

  2. Make a cordova component which then reroutes to wherever you like.

        if(cookieService.loggedIn()) {
        $rootRouter.navigate(['Newsfeed']);
    }
    else {
        $rootRouter.navigate(['Title']);
    }

Now the rest of your routes you can use normally. I did come up against one issue with this method though, all of my local images and svgs need to start with the full path, /android_asset/www/images for android, so I made a little filter that spits out the proper asset path for web, android, and ios.

Upvotes: 0

brain_bacon
brain_bacon

Reputation: 1120

In order to get around this problem with an existing website, I add a angularjs constant at build time that indicates whether or not the build is for phonegap. At config time you can access constants and choose to apply html5mode.

//Add this portion via your build scripts e.g. grunt or gulp
//make the constant change depending on if this is a Phonegap build or not
angular.module('myAppConstants', []).constant('PhonegapConstant', true);

//How to use
angular.module('myApp', ['myAppConstants']).config(function(
    $locationProvider,
    PhonegapConstant
) {
    if(!PhonegapConstant) {
        $locationProvider.html5mode(true);
        $locationProvider.hashPrefix('!');
    }
});

Upvotes: 2

Steve Greatrex
Steve Greatrex

Reputation: 15999

Based on my experience and on this comment from Raymond Camden (who works on PhoneGap) it is not possible to use html5mode with PhoneGap + Angular.

Upvotes: 9

Related Questions