Das Projekt von Tomas zum MyInnovationDay: An meinem MyInnovationDay habe ich einen Vergleich zwischen den beiden Javascript Frameworks Angular und Aurelia getestet. Ich habe gelernt, dass basierend auf "Hello World" und ähnlichen Beispielen, beide Programme im Ergebnis das machen, was sie sollen. Auf den ersten Blick scheint Aurelia strukturierter aufgebaut, es gibt keine eigene Syntaxspezialitäten, alles ist nur JavaScript und HTML basierend auf Web Components. () Eigene Elemente werden automatisch aus der und der zusammengebaut, man braucht keine weitere Konfiguration, in der man angibt, wo welche Dateien liegen. GitHub - jsperts/angular2_kochbuch_code: Beispiel-Code für das Angular 2 Kochbuch. Auch weitere Funktionen werden automatisiert zur Verfügung gestellt (Convention over Configuration), statt alles explizit importieren zu müssen. Angular 2 import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `
Two-Way Databinding und Unterstützung beim Arbeiten mit Formularen sind zwei der wichtigsten Aufgaben moderner Webframeworks. Angular 2 bringt hier einige Neuerungen. Neben einer kompletten Überarbeitung der Datenbindung und einer Ausrichtung am aus der Welt von ReactJS bekannten Flux-Muster werden auch Immutables und Observables zur Performancesteigerung unterstützt. Daneben existieren zwei High-Level-Programmiermodelle für die Definition von Formularen. Die Ziele hiervon sind mehr Flexibilität, mehr Nachvollziehbarkeit sowie umfangreiche Performanceverbesserungen. Angular 2 beispiele cz. In diesem Vortrag erfahren Sie anhand eines Beispiels, wie Sie diese Konzepte künftig in Ihren Projekten nutzen können.
Speichern Sie alle Codeänderungen und aktualisieren Sie den Browser. Sie erhalten die folgende Ausgabe.
Angular: Beispiel Two-Way-Binding In Angular ist die wesentlichste Nutzung das 2-way-Binding. Dabei werden die Daten im Hintergrund gehalten und im Frontend angezeigt und geändert. Mit Wird die 2Way Binding definiert. Angular 2 beispiele video. Hier wird ein Eingabefeld angebunden an das Binding und die Eingaben und Ausgaben im Textfeld werden automatisch in das Datenmodel im Hintergrund übertragen. Daten-Datei Die Datei enthält die Daten Hier eine Variable ListName Angular Typescript Codebehind Datei src\app\components\liste\ import { Component, OnInit} from '@angular/core'; @ Component ({ selector: 'app-liste', templateUrl: '. /', styleUrls: [ '. /']}) export class ListeComponent implements OnInit { //< Angular Data > ListName: string = "Data Excample"; // constructor () {} ngOnInit (): void {}} Die Ausgabedatei In der Frontend Datei werden über ngModel die Daten oder Variablen angebunden Angular/Html Code Frontenddatei src\app\components\liste\ < p > Eingabe: < input type = "text" class = "forms-control" [(ngModel)] = "ListName" > Ausgabe={{ ListName}} Ausgabe ist in html im Browser Angular Data Binding: Eingabe: Ausgabe Titel=Data Excample
';}} Wenn man ein neues Framework erlernen will, scheint hier Aurelia einfacher zu lernen und auch für die Zukunft besser vorbereitet. Weiterführende Links
< app-sizer [( size)]= "fontSizePx" > So funktioniert die wechselseitige Bindung Damit die inputChange Datenbindung funktioniert, muss die @ Output () -Eigenschaft das Muster inputChange verwenden, wobei input der Name der @ Input () -Eigenschaft ist. Zum Beispiel, wenn die @ Input () Eigenschaft ist eine size, die @ Output () muss Eigenschaft sein sizeChange. Die folgende sizerComponent hat eine size Werteigenschaft und ein sizeChange Ereignis. So übergeben Sie Daten zwischen zwei Komponenten in Angular 2 - Code Examples. Die size Eigenschaft ist ein @ Input (), so dass Daten in den Strömungs können sizerComponent. Das Ereignis sizeChange ist ein @ Output (), das den Datenfluss aus der sizerComponent zur übergeordneten Komponente ermöglicht. Als nächstes gibt es zwei Methoden, dec() zum Verringern der Schriftgröße und inc() zum Erhöhen der Schriftgröße. Diese beiden Methoden resize() den Wert der ändern size Eigenschaft innerhalb min / max - Wertes Einschränkungen und ein Ereignis zu emittieren, das vermittelt den neue Größenwert. size export class SizerComponent { @Input () size!