Way to prevent initial template rendering

[vojtech-dobes]

After some tries to think differently or redefine my problem, I'm still stucked with seeking this (how I believe) simple feature request. My use case:

• I have classic Controllers, one ng-view, some routes

Even with inlined templates (via <script type-"text/ng-template">...), application flashes little bit before it loads. I would like to prevent that by preparing the initial html on server. Then just bind all event listeners and stuff, and all other changes handle by angular. I want to run the Controller code for initial matched route, but I don't want Angular to apply template - it's unnecessary, I have it as I want from server. I want Angular to render all other pages, but not the first one.

I am new to Angular and not sure, if I suggest propriate API, but something like this I would found ideal:

$routeProvider.when('page/:id', {
    controller: 'PageController',
    templateUrl: 'view.html',
    renderOnFirstLoad: false // default value: true
});

[MathRobin]

You already have a directive which allows to don't display an element and its children until Angular came across. Have a look to ngCLoak : http://docs.angularjs.org/api/ng.directive:ngCloak

[vojtech-dobes]

Thanks, @MathRobin, but I hope I explained that I want immediataly available HTMl, which is not what I get with ng-cloak. This directive just makes me wait until Angular is ready - I don't need to wait if HTML is already put together on server.

Therefore I proposed that thing in routing, but it could be any API. I know that Angular doesn't support serverside templating at all, but it could :). Or if just someone with good knowledge of Angular insides could point me to correct place where template is applied in DOM.

[jamie-pate]

If you don't have curly braces won't template anything but you still need to compile the html to use directives etc.

[vojtech-dobes]

@jamie-pate Unfortunately not - actually I switched from Angular to different solution.

[joshfester]

@vojtech-dobes I'm looking for a similar solution. I'd be interested in hearing what you ended up doing?

[matsko]

@jamie-pate you can always manually bootstrap the module to the document node in your JavaScript code once you've accessed your raw HTML.

[jamie-pate]

@matsko I'm not the one who needs this :) I did fork angular almost a year ago and add routing support for loading prerendered fragments, but I think it has been superceded by another feature? jamie-pate@dc9be17

loading the pre rendered page and bootstrapping would work for a single page. of course

[stevethecollier]

+1

[MisterK]

I'm also interested by this feature, but from another aspect: inside my link function, I assert if the directive has all the necessary inherited scope variables to behave correctly, and would like to prevent the template from rendering if not. Is there another possibility? Or would I have to wait/ask for this feature?
Thanks in advance.

[vojtech-dobes]

@joshfester I have written simple architecture on my own - I used some smokesignals routing library and plain jQuery structured in simple controllers with 2 modes:

1. coming from server (serverside rendering, only making page "alive" with binding to events and so)
2. coming from previous view (clientside rendering, making page "alive" too)

I did not use hashbang for navigation, so second mode was used (and the clientside routing) only when history.pushState was available.

[matsko]

@vojtech-dobes this is fixed in RC3 and the only animations you can do are the topmost structural ones. So, for example, when ngView changes then you're fine to animation the element that has ng-view, but nothing below. This prevents anything from animating below and thus the initial template rendering. #3215 (comment)

[paolooo]

+1

[matsko]

We need to think of better ideas of how to manage this in 1.3.