rakesh-mohanta / universal

Universal (isomorphic) javascript support for Angular2

<img src="https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png" alt="Universal Angular 2" height="320"/>

Universal Angular 2

Universal (isomorphic) JavaScript support for Angular 2.

Table of Contents

• Getting Started with Universal
  • w/ NodeJS Server
  • w/ ASP.NET Core Server
• Modules
  • Universal
  • preboot.js
• Best Practices
• What's in a name?
• License

Getting Started

* NodeJS :: Universal Starter repo

* ASP.NET Core :: Universal Starter repo

Modules

Universal

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

Documentation

Design Doc

Videos

Angular 2 Universal Patterns - ng-conf, May 2016

Angular Universal Source Code - ReadTheSource, January 2016

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.

Note: Universal currently only works with router-deprecated

• Know the difference between attributes and properties in relation to the DOM.
• Don't manipulate the nativeElement directly. Use the Renderer. We do this to ensure that in any environment we're able to change our view.

constructor(element: ElementRef, renderer: Renderer) {
  renderer.setElementStyle(element.nativeElement, 'font-size', '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. If you need access to these types please consider using DOM from "angular2/src/platform/dom/dom_adapter"
• 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