Bootstrapping Hybrid Angular 1 + 2 Applicazione

Question

In seguito al funzionario 5 min QuickStart Ho una semplice app Angular 2 funzionante.

Ho impostato Angular 1 e ora funzionano entrambi in modo indipendente, vedere this plunker.

Dopo la official upgrade guide dicono:

Per poi passare l'applicazione in modalità ibrida, dobbiamo prima installare angolare 2 al progetto. Seguire le istruzioni nello QuickStart per alcuni suggerimenti su questo. Quando abbiamo installato Angular 2, possiamo importare e creare un'istanza dello UpgradeAdapter, quindi chiamare il suo metodo bootstrap . È stato progettato per prendere gli stessi argomenti esatte angular.bootstrap in modo che sia facile fare l'interruttore:

import {UpgradeAdapter} from 'angular2/upgrade'; 

/* . . . */ 

const upgradeAdapter = new UpgradeAdapter(); 

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

La mia domanda è dove collocarlo?

Sembra una domanda "fa il mio lavoro" ma non è così. Credo che nel numero , ma ho provato un sacco di cose senza successo. Il documento non è chiaro su questo e alcuni tutorial di 1 mese sono già obsoleti.

--- aggiornamento:

Nel mio caso ho dimenticato di caricare upgrade.js che ho pensato già incluso

Answer 1

Ho dato un'occhiata al vostro plunkr. In effetti puoi usare più volte lo bootstrap ma questo significa che usi due diverse applicazioni nella tua pagina HTML.

Se si desidera unire i componenti di Angular1 e Angular2 nella stessa applicazione, è necessario chiamare solo il metodo UpgradeAdapter.

Il richiamo della funzione boostrap sulla UpgradeAdapter ed è la creazione potrebbe essere fatto nel file boot.ts:

import {UpgradeAdapter} from 'angular2/upgrade'; 

var upgrade = new UpgradeAdapter(); 

// Configure the upgrade adapter 
(...) 

export function main() { 
    try { 
    upgrade.bootstrap(document.body, ['heroApp']); 
    } catch (e) { 
    console.error(e); 
    } 
} 

È possibile importare questo nel tuo file HTML in questo modo:

<script> 
    System.import('app/main').then(function(src) { 
    src.main(); 
    }); 
</script> 

Miscelazione di roba Angular2 e Angular1

Se si desidera a bootstrap un'applicazione Angular2, fornire il componente principale come primo parametro e il provider per l'applicazione Angular1 per poter utilizzare fabbriche/servizi/direttive nell'applicazione Angular2.

// Providers for Angular1 elements 
upgrade.upgradeNg1Provider('customService'); 
upgrade.upgradeNg1Provider('customFactory'); 

// Providers for Angular2 elements 
upgrade.addProvider(HTTP_PROVIDERS); 

// Bootstrap Angular2 application 
upgrade.bootstrap(AppComponent); 

Se si desidera un'applicazione Angular1 utilizzare Angular2 roba, è necessario fornire il documento.Elemento come primo parametro del metodo bootstrap:

// Providers for Angular2 elements 
upgrade.downgradeNg2Provider(HTTP_PROVIDERS); 

upgrade.bootstrap(document.body, ['heroApp']); 

Questo plunkr potrebbe anche essere utile a voi: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.