<img src="https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png" alt="Universal Angular 2" height="320"/>
Universal (isomorphic) JavaScript support for Angular 2.
- Documentation
- Getting Started with Universal
- w/ NodeJS Server
- w/ ASP.NET Core Server
- Modules
- Best Practices
- What's in a name?
- License
Universal Documentation & Guide
- Featuring an overview, installation process, and key concepts for creating Universal Angular applications.
- For those intersted in how it all got started, and the goals of Universal check out the Original Design Doc (from 2015)
* NodeJS :: Universal Starter repo
* ASP.NET Core :: Universal Starter repo
Manage your application lifecycle and serialize changes while on the server to be sent to the client.
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
Control server-rendered page and transfer state before client-side web app loads to the client-side-app.
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 theRenderer
. 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
ordocument
. Anything outside of Angular will not be detected when serializing your application into html. If you need access to these types please consider usingDOM
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
inimg
tag. For our native<img src="">
element thesrc
attribute is reflected as thesrc
property of the element typeHTMLImageElement
.
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)