❤
npm
Sign UpSign In

angular2-polyfill
TypeScript icon, indicating that this package has built-in type declarations

0.0.32 • Public • Published

angular2-polyfill Build Status

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

Plunks

License

MIT © Sam Verschueren

Readme

Keywords

none

Package Sidebar

Install

npm i angular2-polyfill

Repository

github.com/samverschueren/angular2-polyfill

Homepage

github.com/samverschueren/angular2-polyfill#readme

Weekly Downloads

10

Version

0.0.32

License

MIT

Last publish

Collaborators

  • samverschueren
Try on RunKit
Report malware