Aufbau der Angular-Umgebung und einfache Erfahrungszusammenfassung

npm install -g typescript
npm install -g @angular/cli

ng neues Angular2-Hallo-Welt

CD Angular2-Hallo Welt
sudo apt Installationsbaum
Baum -F -L 1

.
├── angular.json
├── karma.conf.js
├── Knotenmodule/
├── Paket.json
├── Paket-Lock.json
├── README.md
├── Quelle/
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

2 Verzeichnisse, 8 Dateien

CD-Quelle
Baum -F

ng dienen

ng-generate-Komponente „Hallo Welt“

//Abhängigkeiten importierenimport { Component, OnInit } von '@angular/core';

//Deklarieren Sie den Selektor des Steuerelements und die zugehörigen Datei-URLs durch Anmerkungen
@Komponente({
  Selektor: 'App-Hallo-Welt',
  Vorlagen-URL: "./hallo-welt.component.html",
  styleUrls: ['./hallo-welt.component.css']
})

//Komponentendatenmodell Exportklasse HelloWorldComponent implementiert OnInit {

  Konstruktor() { }

  ngOnInit(): void {
  }

}

<p>Mango, Hallo-Welt funktioniert!</p>

<h1>
  <app-hallo-welt></app-hallo-welt>
</h1>

mango@mango:~/angular2-hello-world$ ng generiert Komponente Benutzerelement
ERSTELLEN src/app/user-item/user-item.component.css (0 Bytes)
ERSTELLEN src/app/user-item/user-item.component.html (24 Bytes)
ERSTELLEN src/app/user-item/user-item.component.spec.ts (641 Bytes)
ERSTELLEN src/app/user-item/user-item.component.ts (286 Bytes)
UPDATE src/app/app.module.ts (585 Bytes)

importiere { Komponente, OnInit } von '@angular/core';

@Komponente({
  Selektor: ‚App-Benutzerelement‘,
  Vorlagen-URL: "./user-item.component.html",
  styleUrls: ['./user-item.component.css']
})
export Klasse UserItemComponent implementiert OnInit {
  Name: Zeichenfolge,

  Konstruktor() { 
    dieser.name = "Mango";
  }

  ngOnInit(): void {
  }

}

<p>
    {{name}} Willkommen in der Welt von Angular.
</p>

mango@mango:~/angular2-hello-world$ ng generiert Komponentenbenutzerliste
ERSTELLEN src/app/user-list/user-list.component.css (0 Bytes)
ERSTELLEN src/app/user-list/user-list.component.html (24 Bytes)
ERSTELLEN src/app/user-list/user-list.component.spec.ts (641 Bytes)
ERSTELLEN src/app/user-list/user-list.component.ts (286 Bytes)
UPDATE src/app/app.module.ts (677 Bytes)

importiere { Komponente, OnInit } von '@angular/core';

@Komponente({
  Selektor: ‚App-Benutzerliste‘,
  Vorlagen-URL: "./user-list.component.html",
  styleUrls: ['./user-list.component.css']
})
Exportklasse UserListComponent implementiert OnInit {
  Namen: Zeichenfolge[];
  Konstruktor() { 
    this.names = ['Mango', 'Birne', 'Traube', 'Apfel'];
  }

  ngOnInit(): void {
  }

}

<ul>
    <li *ngFor="let name of names">Hallo {{name}}</li>
</ul>

importiere { Komponente, OnInit, Eingabe } aus '@angular/core';

@Komponente({
  Selektor: ‚App-Benutzerelement‘,
  Vorlagen-URL: "./user-item.component.html",
  styleUrls: ['./user-item.component.css']
})
export Klasse UserItemComponent implementiert OnInit {
  @Eingang()
  Name!: Zeichenfolge;

  Konstruktor() { 
    
  }

  ngOnInit(): void {
  }

}

<ul>
    <app-user-item *ngFor="let Name der Namen" [name]="Name"></app-user-item>
</ul>

{
            "Ausgabepfad": "dist/angular2-hallo-welt",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "Vermögenswerte": [
              "src/favicon.ico",
              „Quelle/Vermögenswerte“
            ],
            "Stile": [
              "src/styles.css"
            ],
            "Skripte": []
          }

importiere { enableProdMode } von '@angular/core';
importiere { platformBrowserDynamic } von '@angular/platform-browser-dynamic';

importiere { AppModule } aus './app/app.module';
importiere {Umgebung} aus './Umgebungen/Umgebung';

if (umgebung.produktion) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

importiere { NgModule } von '@angular/core';
importiere { BrowserModul } von '@angular/platform-browser';

importiere { AppRoutingModule } aus './app-routing.module';
importiere { AppComponent } aus './app.component';
importiere { HelloWorldComponent } von './hello-world/hello-world.component';
importiere { UserItemComponent } aus './user-item/user-item.component';
importiere { UserListComponent } aus './user-list/user-list.component';

@NgModule({
  Erklärungen: [
    AppComponent,
    HalloWeltKomponente,
    Benutzerelementkomponente,
    Benutzerlistenkomponente
  ],
  Importe: [
    BrowserModule,
    AppRoutingModule
  ],
  Anbieter: [],
  Bootstrap: [Anwendungskomponente]
})
exportiere Klasse AppModule { }