Come `angular2` esporta un componente?

Question

Io sono la creazione di un componente come questo: (dal campione)

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1> ~ My First Angular 2-0 App By Gulp Automation ~ </h1>' 
}) 

export class AppComponent { } //what it is exporting here? 

e l'importazione a un altro modulo:

import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app.component' //what it's imports here 

bootstrap(AppComponent); //it works. 

in index.html:

<script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', //what is means? 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app/boot') 
      .then(null, console.error.bind(console)); 
    </script> 

I non sono in grado di capire la logica dietro, qualcuno mi aiuta per favore?

grazie in anticipo.

Answer 1

credo che questi collegamenti potrebbe aiutarti: https://angular.io/guide/quickstart e https://daveceddia.com/angular-2-dependencies-overview/.

In effetti, SystemJS è responsabile dell'attuazione della logica del modulo e del collegamento tra di essi. Ecco perché è necessario includere il file SystemJS (systemjs) nella pagina HTML e configurarlo utilizzando System.config e infine caricare il componente principale dell'applicazione Angular2 con System.import.

Si utilizza in modo esplicito SystemJ all'avvio System.import. In altri elementi dell'applicazione, lo strumento viene utilizzato implicitamente, specialmente se si utilizza TypeScript. In questo caso, è sufficiente un semplice import per importare un altro modulo. Se dai un'occhiata ai file transpiled (file JavaScript), vedrai che SystemJS è usato.

La configurazione appendice SystemJS (https://angular.io/docs/ts/latest/quickstart.html#!#systemjs) potrebbe dare alcuni suggerimenti sulla configurazione di SystemJS per un'applicazione Angular2

Ecco il link alla documentazione per quanto riguarda i formati di modulo (l'attributo format nel blocco System.config) : https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md. Utilizzando il valore register per l'attributo format, si specifica System.register per la definizione dei moduli.

Spero che ti aiuta, Thierry

Answer 2

componente come un modulo che sta preparando un po 'di codice all'interno, e altro modulo da utilizzare quando u esportare questo "modulo"

import {AppComponent} from './app.component' 

AppComponent è il nome della classe, angular2 conosce il nome del componente "AppComponent" che serviva, './app.component' significa "stessa directory e trovare il file denominato 'app.component.ts'

sono nuovo di NG2, spero che possa aiutare u

Answer 3

esportazione class AppComponent {} // quello che sta esportando qui?

Questo è spiegato (brevemente) nella guida Architecture Overview:

dichiarazione

export class AppComponent { }

L'esportazione dice dattiloscritto che si tratta di un modulo di cui AppComponent di classe è pubblico e accessibile ad altri moduli del applicazione.

Quando abbiamo bisogno di un riferimento al AppComponent, importiamo in questo modo:

import {AppComponent} from './app.component';

L'istruzione import dice al sistema si può ottenere un AppComponent da un modulo di nome app.component situato in una vicina file. Il nome del modulo (id del modulo AKA) è spesso uguale al nome del file senza la sua estensione.