Tero Parviainen 4acbef19a8 docs(upgrade): add ngUpgrade guide version 2
closes #1538
This is a major reorganization of the Upgrade guide.

* Compatible with the new version of the AngularJS 1 PhoneCat
  tutorial.
* No longer switching Angular 1 code to SystemJS for PhoneCat,
  to allow beginning Angular 2 migration with fewer preparation
  steps. SystemJS switch now happens simultaneously with upgrade.
  (This is based on input from @joeeames)
* Testing moved to an appendix to make the main narrative
  shorter and easier to follow.
* Use component methods to do phone filtering and ordering
  instead of introducing pipes to replace filterFilter and orderByFilter.
* Cover issue with camelCase inputs on downgraded components.

For authors:

* All examples now fully integrated with the example boilerplate. Uses the
  same Angular 2 version as all other guides. E2E tests are executed
  along with all the others.
* Reduced number of PhoneCat versions from five to three.
* Each directory has a README explaining how to run it and what might
  be peculiar about it.

Closes angular/angular#8622
Relates to angular/angular.js#14416
Relates to angular/angular-phonecat#326
2016-05-28 09:33:06 -07:00

62 lines
1.7 KiB
TypeScript

// #docregion import-adapter
import { UpgradeAdapter } from '@angular/upgrade';
// #enddocregion import-adapter
// #docregion import-http
import { HTTP_PROVIDERS } from '@angular/http';
// #enddocregion import-http
// #docregion phone-service
import { Phone } from './core/phone/phone.service';
// #enddocregion phone-service
// #docregion phone-list
import { PhoneListComponent } from './phone-list/phone-list.component';
// #enddocregion phone-list
// #docregion phone-detail
import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
// #enddocregion phone-detail
// #docregion init-adapter
let upgradeAdapter = new UpgradeAdapter();
// #enddocregion init-adapter
// #docregion add-http
upgradeAdapter.addProvider(HTTP_PROVIDERS);
// #enddocregion add-http
// #docregion phone-service
upgradeAdapter.addProvider(Phone);
// #enddocregion phone-service
// #docregion routeparams
upgradeAdapter.upgradeNg1Provider('$routeParams');
// #enddocregion routeparams
// #docregion phone-service
angular.module('core.phone')
.factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));
// #enddocregion phone-service
// #docregion phone-list
angular.module('phoneList')
.directive(
'phoneList',
<angular.IDirectiveFactory>
upgradeAdapter.downgradeNg2Component(PhoneListComponent)
);
// #enddocregion phone-list
// #docregion phone-detail
angular.module('phoneDetail')
.directive(
'phoneDetail',
<angular.IDirectiveFactory>
upgradeAdapter.downgradeNg2Component(PhoneDetailComponent)
);
// #enddocregion phone-detail
// #docregion bootstrap
upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
// #enddocregion bootstrap