Die 5 Wesentlichen Vorteile Von Angular Und Typescript

Published Oct 03, 20
3 min read

Eduvision Intensiv-schulung (3 Tage)



Als nächsten müssen wir die Meta-Daten der eigentlichen Komponente definieren. Hierbei können wir über die Eigenschaft selector mit Hilfe einer CSS-Selektor-Regel definieren, wann unsere Komponente angewendet werden soll. import Component from '@angular/core'; import bootstrap from '@angular/platform-browser-dynamic'; @Component( selector: 'pizza-root', template : `

Willkommen zum Angular2 Tutorial von Angular.DE ` ) export class AppComponent Nun haben wir unsere minimale Komponente bereits fast komplett fertig definiert.

Mit Hilfe dieser Funktion stoßen wir die Initialisierung des Modules an. import platformBrowserDynamic from '@angular/platform-browser-dynamic'; import AppModule from './app/'; platformBrowserDynamic().bootstrapModule(AppModule); Code app.component.tsCode main.ts Nach dem Angular Style-Guide sollte das Starten der Anwendung in einer extra Datei geschehen. Diese trägt in der Regel den Namen main.ts. Aus diesem Grund ist auch der obige Quellcode in diese Dateien aufgeteilt.

Einstieg In Angular: Das Sind Die Wichtigsten Tools

In diesen Fällen bietet es sich an das Starten (bootstrap) der Anwendung in eine eigene Datei mit dem Namen main.ts auszulagern! Nachdem wir unsere Basis-Komponente nun erfolgreich eingebunden haben, werfen wir einmal ein Blick auf die Features die uns das Angular Framework mitbringt. Angular bietet uns viel generische Möglichkeiten um auf Events zu reagieren oder Eigenschaften an einem Element dynamisch zu definieren.

ng-click, ng-doubleclick, ng-mouseover usw., können wir dies nun generisch mit Hilfe der Runden klammern lösen. Da sich Angular hierbei direkt an die nativen Events der DOM-Elemente hängt, können wir auch ohne Probleme Standart-Elemente, Polymer, WebComponents oder auch Komponenten von anderen Frameworks wie z.B. ReactJS miteinander kombinieren. Das selbe gilt natürlich auch für die Property-Bindings, welche sich auf die Eigenschaften eines Elements beziehen.

Deine Deutsche Community Zum Angular Framework

So können wir mit [style.background-color] auf die Hintergrundfarbe eines Elements Einfluss nehmen. Diesen Wert können wir sowohl statisch als auch über dynamisch Variablen setzen. Um auf input-Events zu reagieren, können wir hierbei einen Listener direkt mit einer Expression erstellen. Wir bekommen hierbei eine Referenz auf das native Event an die Hand.

Aurelia – ein JavaScript-Single-Page-Application-Framework   Informatik  Aktuellinformatik-aktuell.de 5 Best Practices für erfolgreiche Angular-Anwendungen Host Europehosteurope.de


Mit diesem sehr simplen Mechanismus können wir generisch alle Arten von Komponenten benutzen und mit ihnen interagieren (angular ). Dies ist das unabhängig davon, ob sie in Angular oder einem anderem Framework geschrieben sind. Die Syntax [()] (also eckige UND runde Klammern) ist einfach nur ein Indikator, dass diese Direktive die übergebene Eigenschaft liest und ebenso schreibt.

Web-app Tutorial: Eine Anwendung Mit Angular Bauen

Eselsbrücken zum Merken sind banana in a box oder für die Fußball-Begeisterten: Das Runde muss in das Eckige :) Möchten wir nun mit Formularen arbeiten und dort auf die bereits definierten Direktiven des Frameworks zurück greifen, haben wir die Möglichkeit diese zu importieren. Mit Hilfe der Eigenschaft *directives* an unser `@ComponentAnnotation` unser Komponente zur Verfügung zu stellen.

Dies ist seit der Einführung von @NgModules nicht mehr notwendig und wird hier über den Import des FormsModule in unserem AppModule sehr vereinfacht. Mit dem import von FormsMoule sind alle dort exportierten Direktiven direkt verfügbar. import Component from 'angular2/core'; @Component( selector: 'pizza-root', template : `

Angular2 Tutorial von Angular.DE ` ) export class AppComponent Code zur Nutzung von ngModel Unser template erweitern wir um ein kleines Formular, in dem wir eine Input-Box mit einer kleinen Ausgabe verbinden. angular .

Angular Schule → Angular-schulungen Für Ihr Team

Der Hintergrund ist, dass wir hierbei die Variable search sowohl lesen als auch schreiben wollen. Expressions sind viel mächtiger, als sie im ersten Moment erscheinen. Expressions erlauben uns sowohl einfache Variablen auszugeben, als auch komplexere Ausdrücke zu bilden. search.toUpperCase() + "!" 1 + 2 + 3 In diesem Fall wird z.B.

More from Training, Tutorial

Navigation

Home

Latest Posts