chaabni/ng2-play

Angular 2 Playground

Angular 2 Playground

Minimal setup of ES6, TypeScript, Angular 2.0 and Firebase.

All ES6 files are being compiled/transpiled with TypeScript (because most of the code is a combination of ES6 and TypeScript specific syntax) to ES5 and loaded in the browser using SystemJS. Throughout the app, most of the features in Angular 2.0 are being used. Moreover, a fairly simple example of using three-way data binding with Firebase written in ES6 (on top of the Firebase JavaScript API) is being illustrated.

Setup

---

Clone this repo and setup the following tools on your machine:

• Node (if not already installed)
• Gulp (optional)

After you have the above tools setup, install all runtime/dev dependencies by running:

npm install

Now start the webserver and the build process (runs on file change) and navigate to localhost:8000:

npm start # `gulp play` if gulp is installed globally

Browser Support

---

Even though all source code is compiled/transpiled to ES5 and SystemJS has support for IE8 and up, Angular 2.0 has no official indication of what browsers it supports. Therefore, is safe to assume that only evergreen browsers are being supported for now.

Learning Material

---

• Angular Docs
• Angular 2 - Routing
• Angular 2 - Template Syntax
• Angular 2 - Forms
• ECMAScript (Offical Strawman) - Types
• Firebase - Synchronized Arrays
• Traceur - ES6 Language Features
• Shadow DOM
• Angular 2 Education
• Dependency Injection in Angular 2

Credits

---

In the making of this simple app, I have made use of whatever resources I could find out there (since the docs on some of the Angular 2 features usage are not that extensive and it's constantly changing for the moment), thus it's worth mentioning that the following projects have served as inspiration and help:

• ng2-play
• angular2-webpack-starter
• angular2-authentication-sample
• ng2do