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.
Hosted on Roast.io