Angular-BookMonkey: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 31: | Zeile 31: | ||
* Alle Bausteine der Anwendung werden mittels <code>@NgModule()</code> in Angular-Modulen organisiert. Automatisch mit <code>ng g component...</code> erledigt in app.module.ts. | * Alle Bausteine der Anwendung werden mittels <code>@NgModule()</code> in Angular-Modulen organisiert. Automatisch mit <code>ng g component...</code> erledigt in app.module.ts. | ||
* Eine Komponte muss immer in ''declarations'' eines Moduls registriert werden. Automatisch mit <code>ng g component...</code> erledigt. | * Eine Komponte muss immer in ''declarations'' eines Moduls registriert werden. Automatisch mit <code>ng g component...</code> 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 <code><li></code> | |||
* my-element Element mit Tag <code><my-element></code> | |||
* [myAttr] Attribut, z.B.. <code><div myAttr="123"</div></code> | |||
* [myAttr=bar] Attribut, z.B.. <code><div myAttr="bar"</div></code> | |||
* .myClass Elemente mit CSS-Klasse myClass, z.B. <code><div class="myClass"</div></code> | |||
'''Konvention''': möglichst nur Elementnamen verwenden | |||
Version vom 15. August 2021, 05:13 Uhr
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