Support AngularJS - alternative href implementation

[quanghoc]

The use of href is basically reimplementing template features from AngularJS. Is it possible not to reference .html file but templateUrl or just template? That way we can even pick Angular UI Router to work with this, especially the best practice is keep the state of the page.

[tjvantoll]

I'm not sure if this is related, but I've been trying to get this plugin to work in an Ionic app and having problems. As soon as I pass window.plugins.nativepagetransitions.flip/slide() an href nothing works.

You can see the issue by cloning this repo, and adding the following code after this line in the ready block:

setTimeout(function() {
    // This works
    // window.location.href = "#/tab/settings";

    // This doesn't
    window.plugins.nativepagetransitions.flip({
        href: "#/tab/settings"
    });
}, 2000);

Any ideas @EddyVerbruggen?

[EddyVerbruggen]

@tjvantoll What does seem to work is href: "index.html#/tab/settings" instead of href: "#/tab/settings"

The plugin should be able to handle your href as well though, so I will fix that.

[tjvantoll]

@EddyVerbruggen Yep, index.html#/tab/settings works as expected. Thanks for the help!

[leandroz]

Hey Guys! I am using the plugin with UI-Router, i created a service for navigation that takes the name of the state and the params, create the url and make the transition using the href property. The problem that i have is that the event stateChangeSuccess is triggered before the transition is complete. Could this cause problems?

[lylepratt]

I'm experiencing something similar. If I pass index.html#/myroute, the main view immediately transitions, then about 10 seconds later I get an Application Error:

The connection to the server was unsuccessful. (file://android_asset/www/index.html#/myroute)

Anyone get this to work with angular yet?

[leandroz]

I am using it and is working ok, not perfect but ok. I am using a service for replacing the $state.go of UI-Router, here is the code.

$pageTransitions.transitionTo = function(state, params, transition, direction) {
            var deferred = $q.defer();
            var urlFormated = $state.href(state, params);
            console.log('URL FORMATED');
            console.log(urlFormated);
            if (transition == 'slide') {
                slideOptions.href = 'index.html' + urlFormated;
                slideOptions.direction = direction;
                window.plugins.nativepagetransitions.slide(
                    slideOptions,
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Success');
                        deferred.resolve();
                    },
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Error');
                        deferred.reject();
                        //$state.go(state, params);
                    }
                );
            } else if (transition == 'flip') {
                flipOptions.href = 'index.html' + urlFormated;
                flipOptions.direction = direction;
                window.plugins.nativepagetransitions.flip(
                    flipOptions,
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Success');
                        deferred.resolve();
                    },
                    function(msg) {
                        console.log('$pageTransitions.transitionTo --> Error');
                        deferred.reject();
                        //$state.go(state, params);
                    }
                );
            }
            return deferred.promise;
        };

Then if the transition was successful, i am broadcasting an event and using it in the controller if i need to init something after the transition is completed. $rootScope.$broadcast('transition:success');