We at $webdevcompany have been experimenting with porting some of our current web apps into the framework, and to prepare for an up and coming conference, we've had to use iframes in some of the pages, which works fine, except when the page gets navigated to, it takes 2 to 3 seconds to load. I turned on forward page caching so that it would only happen the first time, but we want the experience to feel native, so I've been looking into ways to completely pre load and cache the specific nav-views, so their sitting there in the dom, compiled, loaded and ready to go, even if it means a couple more seconds of slash screen. My attempts so far have looked like this:
var states = $state.get();
var viewContainer = $("ion-nav-view");
for(var i in states) {
if(states[i].preload) {
var rawHtml = $templateCache.get(states[i].templateUrl);
var element = $(rawHtml);
var viewLocals = {$template:rawHtml, $$state:{self:{abstract:true}}}
var ele = $compile( $ionicHistory.register($rootScope, viewLocals).ele )($rootScope);
viewContainer.append(ele);
}
}
But I can't for the life of me get the ionic view manager to register the page, and it just creates a new one (rather than using the one I shoved in) when it get's navigated to. Any help would be greatly appreciated
Honestly if you want a native like experience iframes are not going to cut it, a better alternative to rebuilding your site for the angular app is to use the in app browser like so:
$scope.readMore = function (index) {
$scope.link = $scope.articles[index].WebLink;
window.open($scope.link, '_blank', 'transitionstyle=crossdissolve,toolbarposition=top');
};
You will need the cordova in-app-browser plug-in. The result looks like this:
except there wont be that emulator button or scroll bars. It will be stylized to the phones OS
