TypeScript upgrade.UpgradeAdapter类代码示例

// #docregion
import { UpgradeAdapter } from '@angular/upgrade';
import { NgModule, forwardRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { ContainerComponent } from './container.component';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ ContainerComponent, HeroDetail ]
})
export class AppModule {}

angular.module('heroApp', [])
  .controller('MainCtrl', function() {
    this.message = 'Hello world';
  });

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AddPinComponent } from './add-pin/add-pin.component';
import { PinControlsComponent } from './pin-controls/pin-controls.component';
import { AnalyticsService } from './analytics.service';

declare var angular: any;

/*
 * Create our upgradeAdapter
 */
export const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(
  forwardRef(() => AppModule));

  /*
 * Expose our ng2 content to ng1
 */
angular.module('interestApp')
  .directive('pinControls',
             upgradeAdapter.downgradeNg2Component(PinControlsComponent))
  .directive('addPin',
             upgradeAdapter.downgradeNg2Component(AddPinComponent));

angular.module('interestApp')
  .factory('AnalyticsService',
           upgradeAdapter.downgradeNg2Provider(AnalyticsService));

/*

@NgModule({
  declarations: [
    DisplayNamePipe,
    UninvitedPipe,
    PartyDetails,
    PartyUninvited
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MaterialModule
  ]
})
class AppNg2Module {}

const adapter = new UpgradeAdapter(AppNg2Module);

adapter.upgradeNg1Component('partyMap');

registerAuth(adapter);
registerLogin(adapter);
registerNavigation(adapter);
registerPartiesList(adapter);
registerPartiesMap(adapter);
registerPartiesSort(adapter);
registerPartyAdd(adapter);
registerPartyAddButton(adapter);
registerPartyCreator(adapter);
registerPartyDetails(adapter);
registerPartyImage(adapter);
registerPartyMap(adapter);

import {Component} from '@angular/core';
import {UpgradeAdapter} from '@angular/upgrade';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Algorithms} from './components/algorithms/algorithms';
import {Adder} from './components/adder/adder';
import {Counter} from './components/counter/counter';

declare var angular:any;

var adapter: UpgradeAdapter = new UpgradeAdapter();

angular.module('angular-legacy').directive('algorithms',adapter.downgradeNg2Component(Algorithms));
angular.module('angular-legacy').directive('add',adapter.downgradeNg2Component(Adder));
angular.module('angular-legacy').directive('counterButton',adapter.downgradeNg2Component(Counter));

adapter.bootstrap(document.body, ['angular-legacy']);

//ng1/2 hybrid
import * as angular from 'angular'
import { UpgradeAdapter } from '@angular/upgrade';
import { Ng2Component } from './ng2-app'

//vanilla ng1 module
const ng1Module = angular.module('ng1-module', []);

//upgrade adapter
const adapter = new UpgradeAdapter();

//vanilla ng1 root component
ng1Module.component('ng1RootComponent', {
	template: `
	  <div>ng1 app</div>
	  <input ng-model="ctrl.myName" />
	  <ng1-component name="ctrl.myName"></ng1-component>
	  <ng2-component [name]="ctrl.myName"></ng2-component>
	`,
	controller: function(){
		this.myName = 'bob'
	},
	controllerAs: 'ctrl'
});

//vanilla ng1 component
ng1Module.component('ng1Component', {
	template: `<div>hello {{ctrl.name}} from ng1!</div>`,
	bindings: {
		name: '='
	},

// #docregion downgradecomponent
import {HeroDetailComponent} from './hero-detail.component';

// #enddocregion downgradecomponent
import {UpgradeAdapter} from '@angular/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

export function downgradeUtilitiesToAngular1(upgradeAdapter: UpgradeAdapter) {
	const observableFactoryProvider: Provider = new Provider(observableToken, {
		useValue: {
			deps: [ExceptionHandler],
			getInstance: (exceptionHandler: ExceptionHandler): IObservableService => new ObservableService(exceptionHandler),
		},
	})

	// angular's http (distinct from ours below)
	upgradeAdapter.addProvider(HTTP_PROVIDERS);

	upgradeAdapter.addProvider(ARRAY_PROVIDER);
	upgradeAdapter.addProvider(BOOLEAN_PROVIDER);
	upgradeAdapter.addProvider(RESOURCE_BUILDER_PROVIDER);
	upgradeAdapter.addProvider(DATE_PROVIDER);
	upgradeAdapter.addProvider(DEFAULT_ERROR_PROVIDERS);
	upgradeAdapter.addProvider(DEFAULT_LOGIN_URL_PROVIDERS);
	upgradeAdapter.addProvider(ERROR_HANDLER_PROVIDER);
	upgradeAdapter.addProvider(DIGEST_PROVIDER);
	upgradeAdapter.addProvider(GENERIC_SEARCH_FILTER_PROVIDER);
	upgradeAdapter.addProvider(GUID_PROVIDER);
	upgradeAdapter.addProvider(HTTP_PROVIDER);
	upgradeAdapter.addProvider(LOGGER_PROVIDER);
	upgradeAdapter.addProvider(NOTIFICATION_PROVIDER);
	upgradeAdapter.addProvider(NUMBER_PROVIDER);
	upgradeAdapter.addProvider(OBJECT_PROVIDER);
	upgradeAdapter.addProvider(observableFactoryProvider);
	upgradeAdapter.addProvider(REDIRECT_PROVIDER);
	upgradeAdapter.addProvider(STRING_PROVIDER);
	upgradeAdapter.addProvider(SYNCHRONIZED_REQUESTS_PROVIDER);
	upgradeAdapter.addProvider(TIME_PROVIDERS);
	upgradeAdapter.addProvider(TimeoutService);
	upgradeAdapter.addProvider(TIMEZONE_PROVIDER);
	upgradeAdapter.addProvider(TRANSFORM_PROVIDER);
	upgradeAdapter.addProvider(VALIDATION_PROVIDER);
	upgradeAdapter.addProvider(WINDOW_PROVIDER);

	utilitiesModule.filter(isEmptyFilterName, PipeDowngrader(new IsEmptyPipe(objectUtility)));
	utilitiesModule.filter(truncateFilterName, PipeDowngrader(new TruncatePipe(objectUtility)));

	utilitiesModule.factory(arrayServiceName, upgradeAdapter.downgradeNg2Provider(arrayToken));
	utilitiesModule.factory(booleanServiceName, upgradeAdapter.downgradeNg2Provider(booleanToken));
	utilitiesModule.factory(resourceBuilderServiceName, upgradeAdapter.downgradeNg2Provider(resourceBuilderToken));
	utilitiesModule.factory(dateServiceName, upgradeAdapter.downgradeNg2Provider(dateToken));
	utilitiesModule.factory(errorHandlerServiceName, upgradeAdapter.downgradeNg2Provider(errorHandlerToken));
	utilitiesModule.factory(digestServiceName, upgradeAdapter.downgradeNg2Provider(digestToken));
	utilitiesModule.factory(genericSearchFilterServiceName, upgradeAdapter.downgradeNg2Provider(genericSearchFilterToken));
	utilitiesModule.factory(guidServiceName, upgradeAdapter.downgradeNg2Provider(guidToken));
	utilitiesModule.factory(httpServiceName, upgradeAdapter.downgradeNg2Provider(httpToken));
	utilitiesModule.factory(notificationServiceName, upgradeAdapter.downgradeNg2Provider(notificationToken));
	utilitiesModule.factory(numberServiceName, upgradeAdapter.downgradeNg2Provider(numberToken));
	utilitiesModule.factory(objectServiceName, upgradeAdapter.downgradeNg2Provider(objectToken));
	utilitiesModule.factory(observableServiceName, upgradeAdapter.downgradeNg2Provider(observableToken));
	utilitiesModule.factory(stringServiceName, upgradeAdapter.downgradeNg2Provider(stringToken));
	utilitiesModule.factory(synchronizedRequestsServiceName, upgradeAdapter.downgradeNg2Provider(synchronizedRequestsToken));
	utilitiesModule.factory(timeServiceName, upgradeAdapter.downgradeNg2Provider(TimeUtility));
	utilitiesModule.factory(timeoutServiceName, upgradeAdapter.downgradeNg2Provider(TimeoutService));
	utilitiesModule.factory(timezoneServiceName, upgradeAdapter.downgradeNg2Provider(timezoneToken));
	utilitiesModule.factory(transformServiceName, upgradeAdapter.downgradeNg2Provider(transformToken));
	utilitiesModule.factory(validationServiceName, upgradeAdapter.downgradeNg2Provider(validationToken));
}

declare var angular:any;

// #docregion bootstrap
import { UpgradeAdapter } from '@angular/upgrade';

// #enddocregion bootstrap

angular.module('heroApp', [])
  .controller('MainCtrl', function() {
    this.message = 'Hello world';
  });

// #docregion bootstrap

const upgradeAdapter = new UpgradeAdapter();

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});
// #enddocregion bootstrap

export const bootstrap = (el) => {
  const ref = adapter.bootstrap(el, [ 'rootModule' ]);

  setTimeout(() => {
    ref.ng2Injector.get(Router).initialNavigation();
  }, 0);
};

function onReady() {
  adapter.bootstrap(document.body, [
    SociallyNg1Module.name
  ]);
}