angular2-polyfill

Angular2 polyfill for Angular1

Please note, this is a work in progress library

Install

$ npm install --save angular2-polyfill

Or with jspm

$ jspm install npm:angular2-polyfill

Usage

AppComponent

The AppComponent is the base component for our entire application. The following content is stored in components/app/app.component.ts. Because we are using ui-router, the only thing we add as a template is the place where the views should be rendered.

import {Component} from 'angular2-polyfill/core';
import {RouteConfig} from 'angular2-polyfill/router';
import {HomeComponent} from '../home/home.component';
 
@Component({
    selector: 'my-app',
    template: '<div ui-view></div>'
})
@RouteConfig([
    { path: '/', component: HomeComponent, name: 'Home', useAsDefault: true }
])
export class AppComponent {
 
}

HomeComponent

The HomeComponent simply renders the title defined in the class. Please note that in the background, we use the controllerAs syntax. The value of this property is consistent with the Angular 1.5 component value. The following content is stored in components/home/home.component.ts.

import {Component} from 'angular2-polyfill/core'
 
@Component({
    selector: 'home',
    template: '<h1>{{ $ctrl.title }}</h1>',
    styles: [`
        h1 {
            color: red;
        }
    `]
})
export class HomeComponent {
    private title: string = 'Hello World';
}

Bootstrapping

Use the bootstrap method from the upgrade platform. This allows you to rewrite your entire application at your own pace. It accepts the base angular module as first argument, and the component/service/... as second argument. This way, you can keep the other component as they are now and refactor them in the future.

import * as angular from 'angular';
import 'angular-ui-router';
import 'reflect-metadata';
import {bootstrap} from 'angular2-polyfill/platform/upgrade';
import {AppComponent} from './components/app/app.component';
 
const ngModule = angular.module('angular2-polyfill', ['ui.router']);
 
bootstrap(ngModule, AppComponent);

Note: The HomeComponent is being bootstrapped automatically because it is referred to in the @RouteConfig decorator of the AppComponent.

index.html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <my-app></my-app>
 
    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script>
    System.import('app')
        .then(null, console.error.bind(console));
    </script> 
</body>
</html>

We are using SystemJS as module loader. Feel free to use something else.

Decorators

@Component
@Directive
@RouteConfig
@Injectable
@Inject
@Optional
@Pipe

Pipes

AsyncPipe

Services

Core

EventEmitter

DI

Injector

HTTP

Http

Routing

Router
RouteParams

Functions

provide

Lifecycle hooks

ngOnInit
ngOnDestroy

Examples

GitHub

Tour of Heroes - Tour of Heroes implementation

Plunks

Tour of Heroes - Tour of Heroes
Routing - Routing example