Headless-Render-API

logo
PricingDocsSupportBlogSign In

Angular Particulars#

Angular doesn't have a mechanism like React for reusing an existing DOM, so what happens is that the client rebuilds the DOM and often there's a brief blink/flash when this transition happens. Hence, Preboot.

In addition to the core requirement of pushstate URLs, here are additional notes/guidelines for Angular users (will update as time goes on):

Angular v2, v4#

These versions should "just work" with Preboot. Without preboot, you'll see a brief blink/flash.

AngularJS v1#

  • must use ng-view or ui-view templates
  • if using Preboot, the ng-app must be on a <div /> within the <body /> tag
    • This will work
      <body>
  <div prerendercloud-preboot-app-root ng-app>
    <div ng-view></div>
    <!-- ui-view also works -->
  </div>
</body>
    • This will not work
      <html ng-app>
  <body>
    <div prerendercloud-preboot-app-root ng-view>
    </div>
  </body>
</html>
      • because prerendercloud-preboot-app-root must be on the ng-app (app root)
      • and because ng-app must be on a <div /> within <body /> since Preboot clones the ng-app DOM node, and you can't clone a <html /> or <body /> DOM node.