Angular 2 Universal

Universal (isomorphic) JavaScript support for Angular 2

Table of Contents

• Modules
  • Universal
  • preboot.js
• Best Practices
• What's in a name?
• License

Modules

Universal

Manage your application lifecycle and serialize changes while on the server to be sent to the browser

Documentation

Design Doc

Videos

Full Stack Angular 2 - AngularConnect, Oct 2015

Angular 2 Server Rendering - Angular U, July 2015

preboot.js

Control server-rendered page and transfer state before client-side web app loads to the client-side-app.

Best Practices

When building Universal components in Angular 2 there are a few things to keep in mind

• Know the difference between attributes and properties in relation to the DOM
• Don't manipulate the nativeElement directly. Use the Renderer

constructor(element: ElementRef, renderer: Renderer) {
  renderer.setElementStyle(element, 'fontSize', 'x-large');
}

• Don't use any of the browser types provided in the global namespace such as navigator or document. Anything outside of Angular will not be detected when serializing your application into html
• Keep your directives stateless as much as possible. For stateful directives you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native <img src""> element the src attribute is reflected as the src property of the element type HTMLImageElement.

What's in a name?

We believe that using the word "universal" is correct when referring to a JavaScript Application that runs in more environments than the browser. (inspired by Universal JavaScript)

License

Apache-2.0