polycod
Polycod is a shim library that exposes an API similiar to angular2 to write components for angular 1.x applications. Polycod also supports Typescript annotations like angular 2 does.
The purpose of this library is to seamlessly migrate existing angular1 applications to angular2.
Polycod is heavily inspired by ngsham. Kudos to Jason Grier.
Naming: The company I work for uses animal names for their weekly sprints. Last week was the week of 'cod'. A combination of 'polyfill' and 'cod' then resulted into 'polycod'. It sounds a bit like 'polyglot', which I like in this context. Native speakers may have a different opinion :)
Setup
Install via npm
npm install polycod
Install via bower
bower install polycod
Load polycod
Make sure polycod is loaded into the browser after angular. Do it the way you want.
Usage
Javascript
Polycod;
Typescript
// declare or reference policod.d.ts firstdeclare ; Polycod.bootstrapTsCmp;
A View decorator is also available:
// declare or reference policod.d.ts firstdeclare ; Polycod.bootstrapTsCmp;
Features
Bindings
CAVEATS
- HTML is case-insensitive. thus
<cmp [userName]="name"
will not work - Dashes will be converted to underscores:
<cmp [user-name]="name"
is the same as<cmp [user_name]="name">
Polycod allows you to bind to your controllers directly.
Example:
.. will display: HELLO joe
Two-Way Bindings
Polycod also supports two-way bindings.
Example:
var scope = $rootScopescopeuserName = 'jane';
.. will display: HELLO joe
. Any change to name
will also be applied to the source (the scope's userName
in this case).
Property change Events
If your component exposes an ngOnChanges
function that one will be called whenever any of the properties change.
Example:
Events
It is easily possible to setup events emitted by your components. Let's assume the context of your new component is some old angular 1 scope like this:
var scope = $rootScopescope { console;};
This is your component emitting the event when the submit
function is called:
The HTML that does the connection:
Host Events
You can catch events on your DOM host element like this:
Properties (one directional bindings)
This makes a local variable available as property in your component (on the component controller). Any change will be propagated.
Dependency Injection
Transclusion
Polycod has a custom transclusion mechanism that is not quite as nice as what angular2 provides you, but it comes close.
Usage:
INFO1 INFO2
Renders:
HELLOINFO2
Since transclude
is angular 1 specific you may want to seperate the annotation which is possible as well:
Activate/Destroy functions
Expose a function called ngAfterViewInit
on your controller class. It is called once an instance of your component got rendered (linked in angular 1 lingo).
Also a lifecycle hook for ngOnDestroy
is available.
Polycod.bootstrapTsCmp;
Component Templates
The inner HTML of your templates will be converted to support angular2 style syntax. This is the list of supported keywords that will be converted to angular1 style syntax:
- *ng-for
- [hidden]
- [(ng-model)]
- (click)
- (dbl-click)
- (mousedown)
- (mouseup)
- (mouseenter)
- (mouseleave)
- (mouseover)
- (keydown)
- (keyup)
- (keypress)
- (change)
Todo
Things I would like to see in polycod:
- Support AMD/CommonJS module strategies
Development
Setup
npm installnpm install -g testemnpm install -g browserifynpm install -g typescript
Test run
testem
Build
./bin/build
Launch demo
./bin/demo
Serves a local server on port 8000.