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
62 lines
1.7 KiB
TypeScript
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
|