First off, Ionic is freaking rad, and exploring it has been a pleasure. A hearty hi five to everyone involved!
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
How bout now? This is one of the key issues in my app holding me back from releasing. It really just feels so wrong when you open it. There’s got to be some work around.
@BrightEyed && @BrightTide main issue had to do with the iframes. Mainly that they were loading all their contents, which may not have been optimized for mobile correctly. Personally I don’t think anyone should ever use iframes, ever. There are alternatives like in-app-browser, or using an api to get the data you need.
Whoops, same person as BrighTide, username’s got swapped along the way somehow . And yeah, we did a lot of mucking around with the ionic template cache (which although awesome), wasn’t a resolution for us. We needed more than just the html in memory as a string, we needed the whole compiled shebang in the dom ready to go.
Did you find a solution? Got the same problem. I’ve expermented with loading all states for a few miliseconds in a loop with $state.go(‘stateName’) right after the app has started and the cordova-splash-screen was still visible. This worked very nice, except that the app-launch now took a ridiculous amount of time because my app has so many states/views (25+).
Is there a way to hiddenly precompile a view/state while an other state is still active?
Where did you put this loop/can you give an example of code? There’s really only one slow view for me so honestly something like this would be sufficient
like @mhartington said above, I have achieved this by compiling all my templates/partials for all angular controllers/directives into one angular module and reference them there using gulp and gulp-ng-templates. I’ve used “gulp-angular-templatecache”, here’s some code:
//in gulp
var templateCache = require('gulp-angular-templatecache');
//in your gulp task
return gulp.src('src/modules/**/*.html')
.pipe(templateCache('my-templates.js', {
module: 'my-templates',
standalone: true,
root: 'my_templates/'
}))
.pipe(gulp.dest('compiled_js_folder'));
//in the view, load the js file
<script src"compiled_js_folder/my-templates.js"></script>
//in angular app, inject 'my-templates' module
//in directives/controllers/states/etc use my_templates/template-filename.html
To be honest, I can’t remember exactly. I think the loop was in the $ionicPlatform.ready() function. When the loop was done I waited a few millis and then called the $cordovaSplashscreen.hide() function to hide the splash screen. As far as I remember you must set the AutoHideSplashScreen property to false in the config.xml to be able hiding the splash screen manually.
must have looked something like:
for(stateName in stateNames){
$state.go(stateName);
}
setTimeout($cordovaSplashscreen.hide,250);
Where stateNames is a static list containing all available state-names.
. And yeah, we did a lot of mucking around with the ionic template cache (which although awesome), wasn’t a resolution for us. We needed more than just the html in memory as a string, we needed the whole compiled shebang in the dom ready to go.