Angular-BookMonkey: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 4: | Zeile 4: | ||
= Schritte = | = Schritte = | ||
< | <syntaxhighlight lang="bash">ng new BookMonkey -p bm | ||
# ... Angular routing: y | # ... Angular routing: y | ||
# Rest: leere Eingabe | # Rest: leere Eingabe | ||
npm install semantic-ui-css | npm install semantic-ui-css | ||
</ | </syntaxhighlight> | ||
* Änderung in angular.json: | * Änderung in angular.json: | ||
Zeile 19: | Zeile 19: | ||
</pre> | </pre> | ||
* neues Interface | * neues Interface | ||
< | <syntaxhighlight lang="bash">ng g interface shared/book | ||
ng g component book-list | ng g component book-list | ||
</ | ng g component book-list-item | ||
</syntaxhighlight> | |||
* Anpassungen in booklist.component.html | * Anpassungen in booklist.component.html | ||
Zeile 43: | Zeile 44: | ||
== Property-Bindings == | == Property-Bindings == | ||
* Bringt Daten von der Komponente in Kindelemente im | * Bringt Daten von der Komponente in Kindelemente im Komponentenbaum. | ||
<pre><my-component [property]="expression"></my-component> | <pre><my-component [property]="expression"></my-component> | ||
</pre> | |||
* Datenänderung führt automatisch zu Anzeigeaktualisierung | * Datenänderung führt automatisch zu Anzeigeaktualisierung | ||
* Auch beliebige Attribute im DOM-Baum sind ansprechbar: | * Auch beliebige Attribute im DOM-Baum sind ansprechbar: | ||
< | <syntaxhighlight lang="ts">const myImg = document.getElementById('myImg'); | ||
myImg.src = 'angular.src'; | myImg.src = 'angular.src'; | ||
myImg.style.border = '1px solid black'; | myImg.style.border = '1px solid black'; | ||
</ | </syntaxhighlight> | ||
* HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt. | * HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt. | ||
* Alternative Schreibweisen: | * Alternative Schreibweisen: | ||
Zeile 82: | Zeile 84: | ||
<div [ngStyle]="{ 'color': myColor, 'padding': '10px' }"></div> | <div [ngStyle]="{ 'color': myColor, 'padding': '10px' }"></div> | ||
<div [ngStyle]="myStyles"></div> | <div [ngStyle]="myStyles"></div> | ||
</pre> | |||
== Rückfluss DOM-Property in Komponente == | |||
* Import von angular/core | |||
* Dekorator @Input() bzw. @Input('domProperty') ('''nicht empfohlen'''). | |||
* Bei Fehler "has no initializer and is not definitely assigned in the constructor": undefined zulassen (! nach dem Variablennamen). | |||
<syntaxhighlight lang="ts">import { component, Input } from '@angular/core'; | |||
@Component({ | |||
selector: 'my-component'; | |||
templateUrl: './my.compoent.html'; | |||
}) | |||
export class MyComponent { | |||
@Input() domProperty!: string; | |||
@Input('domProperty') myProperty: string; | |||
constructor() { } | |||
} | |||
</syntaxhighlight> | |||
== Event-Bindings == | |||
* Notation: DOM-Event in runde Klammern gesetzt: | |||
<pre><element> (myEvent)="myHandler()"></element> | |||
</pre> | |||
=== Events === | |||
Die Namen der Angular-Events sind nicht die DOM-Namen, z.B. "click" statt "onClick" | |||
* click: einfacher Mausklick | |||
* change: Ändern eines Werts in Formularfeld | |||
* dblclick: Doppelklick | |||
* keyup: Taste wird losgelassen | |||
* focus: Feld bekommt den Fokus (Maus oder Tastatur) | |||
* blur: Feld verliert den Fokus | |||
* keydown: Taste wird gedrückt | |||
* mouseover: Maus wird auf Element bewegt | |||
* moseout: Maus verlässt Element | |||
* contextmenu: Aufruf des Kontextmenüs | |||
* select: Auswahl von Text | |||
* copy, past: Text kopieren oder einfügen | |||
* submit: Formular wird abgeschickt | |||
Beispiel: | |||
<pre><input (keyup)="myKeyHandler($event)" type="text" /> | |||
</pre>@Component({...}) | |||
export class MyComponent { | |||
myKeyHandler(e: KeyboardEvent) { | |||
console.log(e); | |||
} | |||
} | |||
</pre> | |||
=== Events selber definieren === | |||
* Verwenden des Dekorators @Output | |||
* Auslösung durch <code>emit(value)</code> | |||
* In Hauptkomponente einbinden | |||
<pre><event-component (fooEvent)="handleFoo" | |||
</event-component> | |||
</pre> | |||
Beispiel: | |||
<pre><button (click)="handleClick()">foo auslösen</button> | |||
</pre> | |||
<pre>import { Component, EventEmitter, Output } from @angular/core; | |||
@Component({ ... }) | |||
export class EventComponent { | |||
@Output() fooEvent = new EventEmitter<any>; | |||
handleClick() { | |||
this.fooEvent.emit(); | |||
} | |||
} | |||
</pre> | </pre> |
Aktuelle Version vom 12. März 2023, 07:39 Uhr
Links[Bearbeiten]
Schritte[Bearbeiten]
ng new BookMonkey -p bm
# ... Angular routing: y
# Rest: leere Eingabe
npm install semantic-ui-css
- Änderung in angular.json:
- projects -> BookMonkey -> architect -> build -> options -> styles:
- projects -> BookMonkey -> architect -> test -> options -> styles:
"styles": [ "node_modules/semantic-ui-css/semantic.css" ],
- neues Interface
ng g interface shared/book
ng g component book-list
ng g component book-list-item
- Anpassungen in booklist.component.html
- Anpassungen in booklist.component.js
- Eintrag in app.component.html:
<bm-book-list></bm-book-list>
Komponente[Bearbeiten]
- Dekorator @Component
- Initialisierung nicht im Konstruktor, sondern in
ngOnInit(): void(){}
- Alle Bausteine der Anwendung werden mittels
@NgModule()
in Angular-Modulen organisiert. Automatisch mitng g component...
erledigt in app.module.ts. - Eine Komponte muss immer in declarations eines Moduls registriert werden. Automatisch mit
ng g component...
erledigt. - Verschachtelung von Komponenten über (CSS-)Selektor.
Selektoren[Bearbeiten]
- div.active Div-Element mit CSS-Klasse active
- input[type=text] Eingabefeld vom Typ Text
- li:nth-child(2) jedes zweite Listenelement innerhalb des Elternelements
- my-element Element mit Tag
<my-element>
- [myAttr] Attribut, z.B..
<div myAttr="123"
- [myAttr=bar] Attribut, z.B..
<div myAttr="bar"
- .myClass Elemente mit CSS-Klasse myClass, z.B.
<div class="myClass"
Konvention: möglichst nur Elementnamen verwenden
Property-Bindings[Bearbeiten]
- Bringt Daten von der Komponente in Kindelemente im Komponentenbaum.
<my-component [property]="expression"></my-component>
- Datenänderung führt automatisch zu Anzeigeaktualisierung
- Auch beliebige Attribute im DOM-Baum sind ansprechbar:
const myImg = document.getElementById('myImg');
myImg.src = 'angular.src';
myImg.style.border = '1px solid black';
- HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt.
- Alternative Schreibweisen:
<!-- Interpolation --> <element property="{{ expression }}"</element> <!-- Textkonstante in Ticks einfügen: --> <element [property]="'value'"></element>
Beispiele[Bearbeiten]
<!-- URL und Title werden aus der Komponente x.myUrl bzw. x.myTitle genommen --> <img [src]="myUrl" [title]="myTitle" /> <button [disabled]="isDisabled">Do it</button> <p [textContent]="'DubuDubuDuu'"></p> <my-component [foo]="1+1"></my-component>
Weitere Arten von Property-Bindings[Bearbeiten]
- Attribute-Bindings: Setzen von Attributwerten
[attr.colspan]
<td [attr.colspan]="myColSpan"></td> <a [attr.role]="myRole>Link</a>
- Class-Bindings: Zuweisen von CSS-Klassen:
[class.myCssClass]
, wenn Bedingung ("expression") true ist.- Alternative
[ngClass]
, wenn mehrere gleichzeitig zugewiesen werden sollen.
- Alternative
<element [class.myClass]="hasMyClass"></element> <div [ngClass]="[ active: isActive, 'has-error': hasError, disabled: isDisabled, myClass: hasMyClass }"></div>
- Style-Bindings: Hinzufügen von CSS-Stilen:
[style.color]
- Mehrere Zuweisungen mittels
[ngStyle]
.
- Mehrere Zuweisungen mittels
<! Achtung, funktioniert nicht, da aus Sicherheitsgründen verboten: --> <element style="color: {{ myColor }}"></element> <element [style.color="myColor"></element> <div [ngStyle]="{ 'color': myColor, 'padding': '10px' }"></div> <div [ngStyle]="myStyles"></div>
Rückfluss DOM-Property in Komponente[Bearbeiten]
- Import von angular/core
- Dekorator @Input() bzw. @Input('domProperty') (nicht empfohlen).
- Bei Fehler "has no initializer and is not definitely assigned in the constructor": undefined zulassen (! nach dem Variablennamen).
import { component, Input } from '@angular/core';
@Component({
selector: 'my-component';
templateUrl: './my.compoent.html';
})
export class MyComponent {
@Input() domProperty!: string;
@Input('domProperty') myProperty: string;
constructor() { }
}
Event-Bindings[Bearbeiten]
- Notation: DOM-Event in runde Klammern gesetzt:
<element> (myEvent)="myHandler()"></element>
Events[Bearbeiten]
Die Namen der Angular-Events sind nicht die DOM-Namen, z.B. "click" statt "onClick"
- click: einfacher Mausklick
- change: Ändern eines Werts in Formularfeld
- dblclick: Doppelklick
- keyup: Taste wird losgelassen
- focus: Feld bekommt den Fokus (Maus oder Tastatur)
- blur: Feld verliert den Fokus
- keydown: Taste wird gedrückt
- mouseover: Maus wird auf Element bewegt
- moseout: Maus verlässt Element
- contextmenu: Aufruf des Kontextmenüs
- select: Auswahl von Text
- copy, past: Text kopieren oder einfügen
- submit: Formular wird abgeschickt
Beispiel:
<input (keyup)="myKeyHandler($event)" type="text" />
@Component({...})
export class MyComponent {
myKeyHandler(e: KeyboardEvent) { console.log(e); }
}
Events selber definieren[Bearbeiten]
- Verwenden des Dekorators @Output
- Auslösung durch
emit(value)
- In Hauptkomponente einbinden
<event-component (fooEvent)="handleFoo" </event-component>
Beispiel:
<button (click)="handleClick()">foo auslösen</button>
import { Component, EventEmitter, Output } from @angular/core; @Component({ ... }) export class EventComponent { @Output() fooEvent = new EventEmitter<any>; handleClick() { this.fooEvent.emit(); } }