angular2-polyfill
v0.0.32
Published
Angular2 polyfill for Angular1
Downloads
54
Readme
angular2-polyfill 
Angular2 polyfill for Angular1
Please note, this is a work in progress library
Install
$ npm install --save angular2-polyfillOr with jspm
$ jspm install npm:angular2-polyfillUsage
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
HomeComponentis being bootstrapped automatically because it is referred to in the@RouteConfigdecorator of theAppComponent.
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
License
MIT © Sam Verschueren