Angular-BookMonkey

Aus Info-Theke
Zur Navigation springen Zur Suche springen

Links

Schritte

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
  • Anpassungen in booklist.component.html
  • Anpassungen in booklist.component.js
  • Eintrag in app.component.html: <bm-book-list></bm-book-list>

Komponente

  • Dekorator @Component
  • Initialisierung nicht im Konstruktor, sondern in ngOnInit(): void(){}
  • Alle Bausteine der Anwendung werden mittels @NgModule() in Angular-Modulen organisiert. Automatisch mit ng 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

  • 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

  • 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

<!-- 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

  • 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.
<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].
<! 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

  • Import von angular/core
  • Dekorator @Input() bzw. @Input('domProperty') (nicht empfohlen).
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() { }
}