Angular 2 Bootstrap

die klassische erste einfaches Beispiel mit kantigem 2.Angular 2 Bootstrap

index.html

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

main.ts

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 

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

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 

export class AppComponent { }

Meine Frage ist , wie das Root-Modul weiß, wo zu suchen, die Wähler app-root zu finden? Geht es standardmäßig zu index.html oder wo ist wo definiert? Wenn wir statt index.html index1.html hatten, sollte die App nicht funktionieren. Warum?

Quelle

2017-10-17 Unknown developer

Die Suche nach dem Selektor in index.html ist das Standardverhalten von Angular wie etwa here. Wenn das Projekt mit Angular CLI ausgeführt wird, können Sie die Datei mit dem Eintrag index in .angular-cli.json ändern.

Quelle

2017-10-17 21:19:04 jowey

Einfache Antwort, wie es schlägt

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ]

Die angular-cli.json Datei liefern die App-Konfiguration in die Winkel ab.

Lange Antwort, wie es Stück zusammen

Die Wähler stellen die Komponente seiner Gesamtheit. In diesem Fall lädt app-root die ./app.component.html, ./app.component und ./app.component.css (wenn Sie haben), um das Browser-DOM zu verwenden. Also, wenn Sie hatte folgende Komponenten

HomeComponent

UserComponent

Sie haben jeweils die oben genannten Dateien mit ihren jeweiligen Namen. Wenn Sie die <app-user></app-user> in der HomeComponentHTML Datei hinzufügen (wie in Ihrer index.html oben). Es wird die UserComponent an diesem Ort laden.

Wie das Stammmodul weiß, wo zu suchen ist, um den Selektor app-root zu finden?

Die Antwort dafür ist die app.module.ts; Sie müssen die AppModule, wo die components, modules und services in Ihrer App zu finden. Zum Beispiel, wenn Sie die AppComponent aus dem Array declarations: [] entfernen; Es weiß nicht mehr, wo Sie diese Komponente finden und Sie werden einen Fehler sehen.

Erklärungen: []

Diese Liste der Components in Ihrer Anwendung. In der AppModule sollten Sie nur die Mindestanforderungen components für den Start Ihrer App angeben. Von dort sollten Sie level Ordnerstruktur erstellen. Jeder Level kann einen Module eigenen haben.

Importe: []

Diese Liste alle in Ihrer Anwendung verwendeten Module. Dazu gehört die Sub-levels in Ihrer App.

Anbieter: []

Diese Liste alle Dienste in Ihrer Anwendung.

Hier in einer Probe mehrschichtigen App könnte wie sein

src 
|app.component.css 
|app.component.html 
|app.component.ts 
|app.module.ts 
    home 
     |home.component.css 
     |home.component.html 
     |home.component.ts 
     |home.module.ts 
    user 
     |user.component.css 
     |user.component.html 
     |user.component.ts 
     |user.module.ts 
    services 
     |user.service.ts

In diesem Fall Ihre app.module.ts wie diese

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { HomeModule } from './home/home.module'; 
import { UserModule } from './user/user.module'; 
import { UserService } from './services/user.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HomeModule, 
    UserModule 
    ], 
    providers: [, 
    UserService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

So ähnliche Struktur auf wird aussehen würde HomeModule und UserModule Datei diese ihre jeweiligen Dateien und Service.

Solange Sie alle Module in die AppModule importieren, müssen Sie keine Component deklarieren, die bereits in einem Sub Module deklariert wurde.

Quelle

2017-10-17 21:27:32

Angular 2 Bootstrap

Antwort

Verwandte Themen