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