diff --git a/public/docs/_examples/upgrade/ts/adapter/.gitignore b/public/docs/_examples/upgrade/ts/adapter/.gitignore new file mode 100644 index 0000000000..0caf9d9ce2 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/.gitignore @@ -0,0 +1,2 @@ +app/**/*.js +app/**/*.js.map diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade/ts/adapter/app/index-1-2-hybrid-bootstrap.html new file mode 100644 index 0000000000..0c6ab1c17a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-1-2-hybrid-bootstrap.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-1-2-hybrid-shared-adapter-bootstrap.html b/public/docs/_examples/upgrade/ts/adapter/app/index-1-2-hybrid-shared-adapter-bootstrap.html new file mode 100644 index 0000000000..7d2f2748b7 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-1-2-hybrid-shared-adapter-bootstrap.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-1-to-2-projection.html b/public/docs/_examples/upgrade/ts/adapter/app/index-1-to-2-projection.html new file mode 100644 index 0000000000..089a668b26 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-1-to-2-projection.html @@ -0,0 +1,32 @@ + + + + + + + +
+ + +

{{mainCtrl.hero.description}}

+ +
+ + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-1-to-2-providers.html b/public/docs/_examples/upgrade/ts/adapter/app/index-1-to-2-providers.html new file mode 100644 index 0000000000..7a14dd0db9 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-1-to-2-providers.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-2-to-1-providers.html b/public/docs/_examples/upgrade/ts/adapter/app/index-2-to-1-providers.html new file mode 100644 index 0000000000..6fa63fae06 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-2-to-1-providers.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade/ts/adapter/app/index-2-to-1-transclusion.html new file mode 100644 index 0000000000..f99223054a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-2-to-1-transclusion.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-bootstrap.html b/public/docs/_examples/upgrade/ts/adapter/app/index-bootstrap.html new file mode 100644 index 0000000000..aa89f22ced --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-bootstrap.html @@ -0,0 +1,11 @@ + + + + + + +
+ + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-downgrade-io.html b/public/docs/_examples/upgrade/ts/adapter/app/index-downgrade-io.html new file mode 100644 index 0000000000..caccf11655 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-downgrade-io.html @@ -0,0 +1,39 @@ + + + + + + + +
+ + +
+ + +
+ + +
+ + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-downgrade-static.html b/public/docs/_examples/upgrade/ts/adapter/app/index-downgrade-static.html new file mode 100644 index 0000000000..dbbd02859f --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-downgrade-static.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-ng-app.html b/public/docs/_examples/upgrade/ts/adapter/app/index-ng-app.html new file mode 100644 index 0000000000..f83324ae4c --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-ng-app.html @@ -0,0 +1,11 @@ + + + + + + +
+ + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-upgrade-io.html b/public/docs/_examples/upgrade/ts/adapter/app/index-upgrade-io.html new file mode 100644 index 0000000000..aa8a57cc6a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-upgrade-io.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/index-upgrade-static.html b/public/docs/_examples/upgrade/ts/adapter/app/index-upgrade-static.html new file mode 100644 index 0000000000..b0a85ce95c --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/index-upgrade-static.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-bootstrap/app.module.ts new file mode 100644 index 0000000000..fcf7a21bab --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-bootstrap/app.module.ts @@ -0,0 +1,16 @@ +declare var angular:any; + +// #docregion bootstrap +import {UpgradeAdapter} from 'angular2/upgrade'; + +// #enddocregion bootstrap + +angular.module('heroApp', []) + .run(() => console.log('running')); + +// #docregion bootstrap + +const upgradeAdapter = new UpgradeAdapter(); + +upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true}); +// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/app.module.ts new file mode 100644 index 0000000000..5a85c9ea1b --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/app.module.ts @@ -0,0 +1,14 @@ +// #docregion bootstrap +import {upgradeAdapter} from './upgrade_adapter'; + +// #enddocregion bootstrap + +declare var angular:any; + +angular.module('heroApp', []) + .run(() => console.log('running')); + +// #docregion bootstrap + +upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true}); +// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts new file mode 100644 index 0000000000..6fb544a2ce --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-2-hybrid-shared-adapter-bootstrap/upgrade_adapter.ts @@ -0,0 +1,3 @@ +// #docregion +import {UpgradeAdapter} from 'angular2/upgrade'; +export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-autobootstrap/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-autobootstrap/app.module.ts new file mode 100644 index 0000000000..aaf3a2ca85 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-autobootstrap/app.module.ts @@ -0,0 +1,3 @@ +declare var angular:any; + +angular.module('heroApp', []); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-bootstrap/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-bootstrap/app.module.ts new file mode 100644 index 0000000000..cc58467d56 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-bootstrap/app.module.ts @@ -0,0 +1,8 @@ +declare var angular:any; + +angular.module('heroApp', []) + .run(() => console.log('running')); + +// #docregion bootstrap +angular.bootstrap(document.body, ['heroApp'], {strictDi: true}); +// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-ng-app/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-ng-app/app.module.ts new file mode 100644 index 0000000000..0e6c12fa7a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-ng-app/app.module.ts @@ -0,0 +1,4 @@ +declare var angular:any; + +angular.module('heroApp', []) + .run(() => console.log('running')); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/app.module.ts new file mode 100644 index 0000000000..0f01999f79 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/app.module.ts @@ -0,0 +1,16 @@ +import {UpgradeAdapter} from 'angular2/upgrade'; +import {MainController} from './main.controller'; +import {HeroDetailComponent} from './hero-detail.component'; + +declare var angular:any; +const upgradeAdapter = new UpgradeAdapter(); + +angular.module('heroApp', []) + .controller('MainController', MainController) + .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent)); + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/hero-detail.component.ts new file mode 100644 index 0000000000..ba64327498 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/hero-detail.component.ts @@ -0,0 +1,16 @@ +// #docregion +import {Component, Input} from 'angular2/core'; +import {Hero} from '../hero'; + +@Component({ + selector: 'hero-detail', + template: ` +

{{hero.name}}

+
+ +
+ ` +}) +export class HeroDetailComponent { + @Input() hero: Hero; +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/main.controller.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/main.controller.ts new file mode 100644 index 0000000000..11a2c5b38b --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-projection/main.controller.ts @@ -0,0 +1,5 @@ +import {Hero} from '../Hero'; + +export class MainController { + hero = new Hero(1, 'Windstorm', 'A descr'); +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/app.module.ts new file mode 100644 index 0000000000..2d04886a8a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/app.module.ts @@ -0,0 +1,20 @@ +import {HeroDetailComponent} from './hero-detail.component'; +import {HeroesService} from './heroes.service'; +import {upgradeAdapter} from './upgrade_adapter'; + +declare var angular:any; + +// #docregion register +angular.module('heroApp', []) + .service('heroes', HeroesService) + .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent)); + +upgradeAdapter.upgradeNg1Provider('heroes'); + +// #enddocregion register + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/hero-detail.component.ts new file mode 100644 index 0000000000..1811ad5bf6 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/hero-detail.component.ts @@ -0,0 +1,17 @@ +// #docregion +import {Component, Inject} from 'angular2/core'; +import {HeroesService} from './heroes.service'; +import {Hero} from '../hero'; + +@Component({ + selector: 'hero-detail', + template: ` +

{{hero.id}}: {{hero.name}}

+ ` +}) +export class HeroDetailComponent { + hero:Hero; + constructor(@Inject('heroes') heroes:HeroesService) { + this.hero = heroes.get()[0]; + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/heroes.service.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/heroes.service.ts new file mode 100644 index 0000000000..416d1af639 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/heroes.service.ts @@ -0,0 +1,11 @@ +// #docregion +import {Hero} from '../hero'; + +export class HeroesService { + get() { + return [ + new Hero(1, 'Windstorm'), + new Hero(2, 'Spiderman') + ]; + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/upgrade_adapter.ts new file mode 100644 index 0000000000..6fb544a2ce --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/1-to-2-providers/upgrade_adapter.ts @@ -0,0 +1,3 @@ +// #docregion +import {UpgradeAdapter} from 'angular2/upgrade'; +export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/app.module.ts new file mode 100644 index 0000000000..43a7fcf250 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/app.module.ts @@ -0,0 +1,19 @@ +import {heroDetailComponent} from './hero-detail.component'; +import {Heroes} from './heroes'; +import {upgradeAdapter} from './upgrade_adapter'; + +declare var angular:any; + +// #docregion register +upgradeAdapter.addProvider(Heroes); + +angular.module('heroApp', []) + .factory('heroes', upgradeAdapter.downgradeNg2Provider(Heroes)) + .component('heroDetail', heroDetailComponent) +// #enddocregion register + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/hero-detail.component.ts new file mode 100644 index 0000000000..8658eb3fa4 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/hero-detail.component.ts @@ -0,0 +1,9 @@ +// #docregion +export const heroDetailComponent = { + template: ` +

{{heroDetail.hero.id}}: {{heroDetail.hero.name}}

+ `, + controller: ['heroes', function(heroes) { + this.hero = heroes.get()[0]; + }] +}; diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/heroes.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/heroes.ts new file mode 100644 index 0000000000..475a30c38d --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/heroes.ts @@ -0,0 +1,13 @@ +// #docregion +import {Injectable} from 'angular2/core'; +import {Hero} from '../hero'; + +@Injectable() +export class Heroes { + get() { + return [ + new Hero(1, 'Windstorm'), + new Hero(2, 'Spiderman') + ]; + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/upgrade_adapter.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/upgrade_adapter.ts new file mode 100644 index 0000000000..6fb544a2ce --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-providers/upgrade_adapter.ts @@ -0,0 +1,3 @@ +// #docregion +import {UpgradeAdapter} from 'angular2/upgrade'; +export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/app.module.ts new file mode 100644 index 0000000000..08605ceade --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/app.module.ts @@ -0,0 +1,16 @@ +import {UpgradeAdapter} from 'angular2/upgrade'; +import {ContainerComponent} from './container.component'; +import {heroDetailComponent} from './hero-detail.component'; +import {upgradeAdapter} from './upgrade_adapter'; + +declare var angular:any; + +angular.module('heroApp', []) + .directive('myContainer', upgradeAdapter.downgradeNg2Component(ContainerComponent)) + .component('heroDetail', heroDetailComponent) + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/container.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/container.component.ts new file mode 100644 index 0000000000..25921aea75 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/container.component.ts @@ -0,0 +1,20 @@ +// #docregion +import {Component} from 'angular2/core'; +import {upgradeAdapter} from './upgrade_adapter'; +import {Hero} from '../Hero'; + +const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); + +@Component({ + selector: 'my-container', + template: ` + + +

{{hero.description}}

+ + `, + directives: [HeroDetail] +}) +export class ContainerComponent { + hero = new Hero(1, 'Windstorm', 'a descr'); +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/hero-detail.component.ts new file mode 100644 index 0000000000..65a28d049a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/hero-detail.component.ts @@ -0,0 +1,12 @@ +// #docregion +export const heroDetailComponent = { + bindings: { + hero: '=' + }, + template: ` +

{{hero.name}}

+
+ +
+ ` +}; diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/upgrade_adapter.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/upgrade_adapter.ts new file mode 100644 index 0000000000..6fb544a2ce --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/2-to-1-transclusion/upgrade_adapter.ts @@ -0,0 +1,3 @@ +// #docregion +import {UpgradeAdapter} from 'angular2/upgrade'; +export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/app.module.ts new file mode 100644 index 0000000000..579c6cdcd3 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/app.module.ts @@ -0,0 +1,23 @@ +import {MainController} from './main.controller'; +// #docregion downgradecomponent +import {HeroDetailComponent} from './hero-detail.component'; + +// #enddocregion downgradecomponent +import {UpgradeAdapter} from 'angular2/upgrade'; + +const upgradeAdapter = new UpgradeAdapter(); + +// #docregion downgradecomponent + +angular.module('heroApp', []) + .controller('MainController', MainController) + .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent)); + +// #enddocregion downgradecomponent + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); +// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/hero-detail.component.ts new file mode 100644 index 0000000000..39556b6ae3 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/hero-detail.component.ts @@ -0,0 +1,19 @@ +// #docregion +import {Component, Input, Output, EventEmitter} from 'angular2/core'; +import {Hero} from '../hero'; + +@Component({ + selector: 'hero-detail', + template: ` +

{{hero.name}} details!

+
{{hero.id}}
+ + ` +}) +export class HeroDetailComponent { + @Input() hero:Hero + @Output() deleted = new EventEmitter(); + onDelete() { + this.deleted.emit(this.hero); + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/main.controller.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/main.controller.ts new file mode 100644 index 0000000000..382b11fc7c --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-io/main.controller.ts @@ -0,0 +1,12 @@ +import {Hero} from '../Hero'; + +export class MainController { + hero = new Hero(1, 'Windstorm'); + heroes = [ + new Hero(2, 'Superman'), + new Hero(3, 'Spiderman') + ] + onDelete(hero:Hero) { + console.log('del', hero); + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-static/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-static/app.module.ts new file mode 100644 index 0000000000..f9d3aef905 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-static/app.module.ts @@ -0,0 +1,21 @@ +// #docregion downgradecomponent +import {HeroDetailComponent} from './hero-detail.component'; + +// #enddocregion downgradecomponent +import {UpgradeAdapter} from 'angular2/upgrade'; + +const upgradeAdapter = new UpgradeAdapter(); + +// #docregion downgradecomponent + +angular.module('heroApp', []) + .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent)); + +// #enddocregion downgradecomponent + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); +// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-static/hero-detail.component.ts new file mode 100644 index 0000000000..b796ccce3b --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/downgrade-static/hero-detail.component.ts @@ -0,0 +1,13 @@ +// #docregion +import {Component} from 'angular2/core'; + +@Component({ + selector: 'hero-detail', + template: ` +

Windstorm details!

+
1
+ ` +}) +export class HeroDetailComponent { + +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/hero-detail.directive.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/hero-detail.directive.ts new file mode 100644 index 0000000000..09af0685fa --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/hero-detail.directive.ts @@ -0,0 +1,21 @@ +// #docregion +export function heroDetailDirective() { + return { + scope: {}, + bindToController: { + hero: '=', + deleted: '&' + }, + template: ` +

{{ctrl.hero.name}} details!

+
{{ctrl.hero.id}}
+ + `, + controller: function() { + this.onDelete = () => { + this.deleted({hero: this.hero}); + }; + }, + controllerAs: 'ctrl' + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/hero.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/hero.ts new file mode 100644 index 0000000000..172d393139 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/hero.ts @@ -0,0 +1,5 @@ +export class Hero { + constructor(public id:number, + public name:string, + public description?:string) { } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/app.module.ts new file mode 100644 index 0000000000..5599ea67f0 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/app.module.ts @@ -0,0 +1,16 @@ +import {heroDetail} from './hero-detail.component'; +import {ContainerComponent} from './container.component'; +import {upgradeAdapter} from './upgrade_adapter'; + + +declare var angular:any; + +angular.module('heroApp', []) + .component('heroDetail', heroDetail) + .directive('myContainer', upgradeAdapter.downgradeNg2Component(ContainerComponent)); + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/container.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/container.component.ts new file mode 100644 index 0000000000..495a4d110f --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/container.component.ts @@ -0,0 +1,23 @@ +// #docregion +import {Component} from 'angular2/core'; +import {upgradeAdapter} from './upgrade_adapter'; +import {Hero} from '../Hero'; + +const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); + +@Component({ + selector: 'my-container', + template: ` +

Tour of Heroes

+ + + `, + directives: [HeroDetail] +}) +export class ContainerComponent { + hero = new Hero(1, 'Windstorm'); + heroDeleted(event) { + console.log(event); + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/hero-detail.component.ts new file mode 100644 index 0000000000..5ebc958b18 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/hero-detail.component.ts @@ -0,0 +1,17 @@ +// #docregion +export const heroDetail = { + bindings: { + hero: '=', + deleted: '&' + }, + template: ` +

{{heroDetail.hero.name}} details!

+
{{heroDetail.hero.id}}
+ + `, + controller: function() { + this.onDelete = () => { + this.deleted({hero: this.hero}); + }; + } +}; diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/upgrade_adapter.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/upgrade_adapter.ts new file mode 100644 index 0000000000..6fb544a2ce --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-io/upgrade_adapter.ts @@ -0,0 +1,3 @@ +// #docregion +import {UpgradeAdapter} from 'angular2/upgrade'; +export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/app.module.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/app.module.ts new file mode 100644 index 0000000000..5599ea67f0 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/app.module.ts @@ -0,0 +1,16 @@ +import {heroDetail} from './hero-detail.component'; +import {ContainerComponent} from './container.component'; +import {upgradeAdapter} from './upgrade_adapter'; + + +declare var angular:any; + +angular.module('heroApp', []) + .component('heroDetail', heroDetail) + .directive('myContainer', upgradeAdapter.downgradeNg2Component(ContainerComponent)); + +upgradeAdapter.bootstrap( + document.querySelector('hero-app'), + ['heroApp'], + {strictDi: true} +); diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/container.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/container.component.ts new file mode 100644 index 0000000000..20e5933642 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/container.component.ts @@ -0,0 +1,17 @@ +// #docregion +import {Component} from 'angular2/core'; +import {upgradeAdapter} from './upgrade_adapter'; + +const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); + +@Component({ + selector: 'my-container', + template: ` +

Tour of Heroes

+ + `, + directives: [HeroDetail] +}) +export class ContainerComponent { + +} diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/hero-detail.component.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/hero-detail.component.ts new file mode 100644 index 0000000000..862c904bbc --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/hero-detail.component.ts @@ -0,0 +1,9 @@ +// #docregion +export const heroDetail = { + template: ` +

Windstorm details!

+
1
+ `, + controller: function() { + } +}; diff --git a/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/upgrade_adapter.ts b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/upgrade_adapter.ts new file mode 100644 index 0000000000..6fb544a2ce --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/app/js/upgrade-static/upgrade_adapter.ts @@ -0,0 +1,3 @@ +// #docregion +import {UpgradeAdapter} from 'angular2/upgrade'; +export const upgradeAdapter = new UpgradeAdapter(); diff --git a/public/docs/_examples/upgrade/ts/adapter/package.json b/public/docs/_examples/upgrade/ts/adapter/package.json new file mode 100644 index 0000000000..e0e073aac5 --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/package.json @@ -0,0 +1,24 @@ +{ + "name": "adapter", + "version": "1.0.0", + "description": "", + "main": "index.js", + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "typescript": "1.7.5" + }, + "dependencies": { + "angular2": "2.0.0-beta.0", + "es6-promise": "3.0.2", + "es6-shim": "0.33.13", + "reflect-metadata": "0.1.2", + "rxjs": "5.0.0-beta.0", + "systemjs": "0.19.9", + "zone.js": "0.5.10" + }, + "scripts": { + "tsc": "tsc -p . -w" + } +} diff --git a/public/docs/_examples/upgrade/ts/adapter/tsconfig.json b/public/docs/_examples/upgrade/ts/adapter/tsconfig.json new file mode 100644 index 0000000000..0ff15b9d2a --- /dev/null +++ b/public/docs/_examples/upgrade/ts/adapter/tsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "system", + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true + }, + "exclude": [ + "node_modules" + ] +} diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 163484dd37..95c0759d9b 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -2,34 +2,742 @@ include ../../../../_includes/_util-fns :marked Having an existing Angular 1 application doesn't mean that we can't - begin enjoying everything Angular 2 has to offer. That's beause - Angular 2 comes with built-in tools for migrating Angular 1 projects - over to the Angular 2 platform. - - One of the keys to a successful upgrade is to do it incrementally, - by running the two frameworks side by side in the same application, - and porting Angular 1 components to Angular 2 one by one. This makes - it possible to upgrade even large and complex applications without - disrupting other work. The `upgrade` module in Angular 2 has - been designed to make incremental upgrading seamless. + begin enjoying everything Angular 2 has to offer. That's beause Angular 2 + comes with built-in tools for migrating Angular 1 projects over to the + Angular 2 platform. - In this chapter we will look at a complete example of preparing and - upgrading an application using the `upgrade` module. The app we're going - to work on is [Angular PhoneCat](https://github.com/angular/angular-phonecat) + Some applications will be easier to upgrade than others, and there are + ways in which we can make it easier for ourselves. It is possible to + prepare and align Angular 1 applications with Angular 2 even before beginning + the upgrade process. These preparation steps are all about making the code + more decoupled, more maintainable, and up to speed with modern development + tools. That means the preparation work will not only make the eventual upgrade + easier, but will also generally improve our Angular 1 applications. + + One of the keys to a successful upgrade is to do it incrementally, + by running the two frameworks side by side in the same application, and + porting Angular 1 components to Angular 2 one by one. This makes it possible + to upgrade even large and complex applications without disrupting other + business, because the work can be done collaboratively and spread over + a period of time. The `upgrade` module in Angular 2 has been designed to + make incremental upgrading seamless. + + 1. [Preparation](#preparation) + 1. [Following The Angular Style Guide](#following-the-angular-style-guide) + 2. [Using a Module Loader](#using-a-module-loader) + 3. [Migrating to TypeScript](#migrating-to-typescript) + 4. [Using Component Directives](#using-component-directives) + 2. [Upgrading with The Upgrade Adapter](#upgrading-with-the-upgrade-adapter) + 1. [How The Upgrade Adapter Works](#how-the-upgrade-adapter-works) + 2. [Bootstrapping Hybrid Angular 1+2 Applications](#bootstrapping-hybrid-angular-1-2-applications) + 3. [Using Angular 2 Components from Angular 1 Code](#using-angular-2-components-from-angular-1-code) + 4. [Using Angular 1 Component Directives from Angular 2 Code](#using-angular-1-component-directives-from-angular-2-code) + 5. [Projecting Angular 1 Content into Angular 2 Components](#projecting-angular-1-content-into-angular-2-components) + 6. [Transcluding Angular 2 Content into Angular 1 Component Directives](#transcluding-angular-2-content-into-angular-1-component-directives) + 7. [Making Angular 1 Dependencies Injectable to Angular 2](#making-angular-1-dependencies-injectable-to-angular-2) + 8. [Making Angular 2 Dependencies Injectable to Angular 1](#making-angular-2-dependencies-injectable-to-angular-1) + 3. [PhoneCat Preparation Tutorial](#phonecat-preparation-tutorial) + 1. [Switching to TypeScript And Module Loading](#switching-to-typescript-and-module-loading) + 2. [Preparing Unit and E2E Tests](#preparing-unit-and-e2e-tests) + 3. [Enjoying The Benefits of TypeScript](#enjoying-the-benefits-of-typescript) + + 4. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial) + 1. [Bootstrapping A Hybrid 1+2 PhoneCat](#bootstrapping-a-hybrid-1-2-phonecat) + 2. [Upgrading the Phone factory](#upgrading-the-phone-factory) + 3. [Upgrading Controllers to Components](#upgrading-controllers-to-components) + 4. [Switching To The Angular 2 Router And Bootstrap](#switching-to-the-angular-2-router-and-bootstrap) + 5. [Saying Goodbye to Angular 1](#saying-goodbye-to-angular-1) + +.l-main-section +:marked + # Preparation + + There are many ways to structure Angular 1 applications. When we begin + to upgrade these applications to Angular 2, some will turn out to be + much more easy to work with than others. There are a few key techniques + and patterns that we can apply to future proof our apps even before we + begin the migration. + + ## Following The Angular Style Guide + + The [Angular Style Guide](https://github.com/johnpapa/angular-styleguide) + collects patterns and practices that have been proven to result in + cleaner and more maintainable Angular 1 applications. It contains a wealth + of information about how to write and organize Angular code - and equally + importantly - how **not** to write and organize Angular code. + + Angular 2 is a reimagined version of the best parts of Angular 1. In that + sense, its goals are the same as the Angular Style Guide's: To preserve + the good parts of Angular 1, and to avoid the bad parts. There's a lot + more to Angular 2 than just that of course, but this does mean that + *following the style guide helps make your Angular 1 app more closely + aligned with Angular 2*. + + There are a few rules in particular that will make it much easier to do + *an incremental upgrade* using the Angular 2 `upgrade` module: + + * The [Rule of 1](https://github.com/johnpapa/angular-styleguide#single-responsibility) + states that there should be one component per file. This not only makes + components easy to navigate and find, but will also allow us to migrate + them between languages and frameworks one at a time. In this example application, + each controller, factory, and filter is in its own source file. + * The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide#style-y152) + and [Modularity](https://github.com/johnpapa/angular-styleguide#modularity) + rules define similar principles on a higher level of abstraction: Different parts of the + application should reside in different directories and Angular modules. + + When an application is laid out feature per feature in this way, it can also be + migrated one feature at a time. For applications that don't already look like + this, applying the rules in the Angular style guide is a highly recommended + preparation step. And this is not just for the sake of the upgrade - it is just + solid advice in general! + + ## Using a Module Loader + + When we break application code down into one component per file, we often end + up with a project structure with a large number of relatively small files. This is + a much neater way to organize things than a small number of large files, but it + doesn't work that well if you have to load all those files to the HTML page with + `