Angular-BookMonkey
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 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
- 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 Komponentbaum.
<my-component [property]="expression"></my-component> * Datenänderung führt automatisch zu Anzeigeaktualisierung * Auch beliebige Attribute im DOM-Baum sind ansprechbar: <source lang="ts">const myImg = document.getElementById('myImg'); myImg.src = 'angular.src'; myImg.style.border = '1px solid black'; </source> * HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt. * Alternative Schreibweisen: <pre><!-- 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.
- 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>