Angular Flashcards

1
Q

Aus was besteht eine Angular Application ?

A

Aus Components und Services, die den Components ihre funktionalität geben.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Aus was besteht ein Component in einer Angular Application ?

A

Ein Component besteht aus :

  • einem Template, was das HTML für die Benutzeroberfläche ist, dass eine View für die Application definiert.
  • einer Klasse die den Code, der zu der View gehört, beinhaltet. Die Klasse enthält die
    1. Properties bzw Data Elements, die die View benutzen kann
    2. Methoden die Actions ausführen für die View wie auf ein Button zu antworten
  • Metadata, die weitere Informationen über den Component zu Angular liefern. Diese Metadaten sind dafür verantwortlich, dass die Klasse als ein Angular Component identifiziert

Kurz: Ein Component ist also eine View definiert von einem Template, der dazugehörige Code ist definiert mit einer Klasse und zusätzliche Informationen definiert in Metadaten

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Wie fügt man die einzelnen Components zu einer Application?

A

Wir definieren Angular Modules, diese helfen uns unsere Components in zusammenhängende Funktionsblöcke zusammenzufassen. Jede Anwendung hat mindestens ein Angular Module, das Root-Angular-Modul

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Was ist ein Decorator ?

A

Eine Fuktion die metadaten zu einer Klasse, seinen Membern oder seinen Methoden Argumenten hinzufügt.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Was für einen Prefix hat ein Decorator ?

A

@Component( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Kann ein Component mehreren Modulen angehören ?

A

Nein

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Wie ist der Konventionelle Namen für den Root Component ?

A

class AppComponent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was sollte in @Component( ) immer enthalten sein ?

A
Ein Template 
@Component( {
template:`
<h1>blablabla</h1>
`
} )
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Wie können wir externe Funktionen benutzten ?

A

über ein Import statement
import { Component } from ‘@angular/core’;

       Angular library module ||    Member Name
        name
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Schildere den typischen aufbau eines Components in Code

A

import { Component } from “@angular/core”;

@Component({
  selector: 'pm-root',
  template: `
  <div><h1>{{pageTitle}}<h1>
  <div>My First Component</div>
  </h1></h1></div>
  `
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Wie kriegen wir das Template des Components nun angezeigt ?

A

Wir geben dem component einen selector
selector: ‘pm-root’
und benutzten diesen dann in der Index.html als Tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Was muss man mit einem Component machen, bevor man ihn benutzten kann ?

A

Man Bootstrapt ihn im dafür vorgesehenen Module

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Warum werden “linked templates” verwendet ?

A

Weil in Inline Templates keine Intellisense etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Was ist der Unterschied zwischen einem for…of loop und einem for…in Loop ?

A

for. ..of ist quasi wie ein foreach, dass einfach alle Inhalte aus etwas aufzählt. Das Ergebnis ist der Inhalt des Feldes, dass geloopt wird.
for. ..in zählt nur die properties eines Objekts, dass ergebnis sind also Zahlen von 0 bis x

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

was muss in einem Modul deklariert und was wird importiert ?

A

Unsere eigene Komponenten und Pipes werden unter declarations deklariert, unter imports werden alle 3rd party bzw. von Angular erstellten Module deklariert bzw. hier geimportet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Was macht man mit Pipes in Angular?

A

Der gegebene Wert, geht durch die Pipe und wird anhand der Pipe transformiert wie z.B nur Uppercaase, Datum, nummer, decimal, percent, json, currency etc.
Custom Pipes

17
Q

Nenne die 4 Wege von Data Binding in Angular zwischen dem Dom und einem Component

A
  1. Interpolation: Component > Dom {{pageTitle}}
    2.Property Binding: Component > Dom
    <img></img>
  2. Event Binding : Dom > Component
    (click)=”toggleImage()”
  3. Two-Way Binding: Dom <> Component
18
Q

Wie macht man Styles in CSS in Angular ?

A

Man gibt im @Component an styleUrls: [”./product-list.component.css”]
oder Inline oder nur styles:

19
Q

Was macht ein Component Nest-able ?

A

Indem er nur Teil einer größeren View ist, einen Selector hat und optional mit dem Container in dem er sich befindet kommuniziert

20
Q

Was ist ein Service ?

A

Eine klasse mit einem focused purpose.
Features eines Services sind, dass er unabhängig von anderen Components ist, er shared data oder logic zwischen Components verteilen kann