Angular-BookMonkey

Links

• Angular
• Github-Quelle des Buchs

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