Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Angular > Angular Basics > Flashcards

Angular Basics Flashcards

1
Q

Jakie moduły możemy wyróżnić w Angularze?

A

ES 2015 modules, TypeScript modules, AngularJS modules, Angular modules

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

Z czego składa się komponent?

A

Komponent składa się z klasy, widoku (template) i metadanych (@Dekorator)

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

W jakim module znajduje się dekorator @Component?

A

import ‘@angular/core’;

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

Jakie podstawowe parametry przyjmuje dekorator @Component?

A

Dekorator przyjmuje obiekt z parametrami {selector: ‘nazwa’, templateUrl: ‘../template.html’, styles: [‘cos.css’]}

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

Jaki parametry dekoratora @Component pozwala na zdefiniowanie nazwy selektora?

A

selector

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

Jaki parametr dekoratora @Component pozwala na zdefiniowanie szablonu wewnątrz dekoratora (inline)?

A

template

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

O czym należy pamiętać definiując szablon wewnątrz dekorator @Component?

A

O umieszczeniu go wewnątrz ‘backticks’ - kod

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

W jaki sposób wyeksportować klasę z pliku ts?

A

Dodając słówko ‘export’ - np. export class Student {…}

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

Za pomocą jakiej komendy można zainstalować globalnie narzędzia konsolowe Angular’a?

A

npm install -g @angular/cli

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

Za pomocą jakiej komendy Angular CLI można stworzyć nowy projekt?

A

ng new nazwaAplikacji

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

Za pomocą jakiej komendy Angular CLI można uruchomić aplikację i otworzyć w przeglądarce?

A

ng serve –open

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

Jak dodać nowy komponent z pomocą Angular CLI?

A

ng g c nazwaKomponentu

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

Do czego służy moduł Angular’owy?

A

Organizacja aplikacji, dostarcza środowisko “template resolution environment”, służy do określania granic między modułami

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

Z czego składa się moduł Angular?

A

Z klasy TypeScript z adnotacją @NgModule

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

Z jakiej biblioteki pochodzi adnotacja @NgModule?

A

Z biblioteki @angular/core

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

Jakie parametry przyjmuje dekorator @NgModule?

A

Przyjmuje obiekt json z parametrami {imports: [BrowserModule], exports: […], declarations: [AppComponent], bootstrap: [AppCompoent]}

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

Do czego służy parametr bootstrap aplikacji?

A

Służy do określenie początkowego komponentu aplikacji. W aplikacji wyłącznie jeden moduł może mieć parametr boostrap.

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

Jak zaimportować style z zewnętrznego pliku do style.css (styli globalnych)?

A

Można wykorzystać klauzulę @import “~/bootstrap/dist…”

Ścieżka domyślnie znajduje się w folderze node_modules

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

Jak określić/zmienić plik w którym znajdują się style globalne?

A

Zmodyfikować plik angular.json i sekcje styles

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

Jak wykorzystać interpolacje wewnątrz szablonu komponentu?

A

Skorzystać z {{ tytul }} - podwójnych nawiasów

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

Czy wewnątrz znacznika interpolacji możemy umieścić wyrażenia?

A

Tak. np. {{ cena + 10 }}

22
Q

Czy interpolacja reprezentuje wiązanie z szablonu do klasy, czy z klasy do szablonu?

A

Reprezentuje powiązanie (binding) z klasy do szablonu

23
Q

Czy interpolacja reprezentuje wiązanie z jedno czy dwustronne?

A

Reprezentuje wiązanie jednostronne (one-way binding)

24
Q

W jakim module znajdują się dyrektywy strukturalne *ngIf i *ngFor?

A

W module @angular/common

25
Q

W jakim module znajduje się BrowserModule?

A

W module @angular/plaform-browser

26
Q

Do czego służy BrowserModule?

A

Służy do renderowania naszej aplikacji w przeglądarce

27
Q

Jakie są dwa podstawowe podejścia do pracy z fomularzami w Angularze?

A

Template-driven i reactive forms

28
Q

Jakiego rodzaju dyrektywą jest *ngFor i *ngIf?

A

To przykłady dyrektyw strukturalnych

29
Q

Czy po zaimportowaniu BrowserModule powinniśmy importować CommonModule w celu użycia *ngIf i *ngFor?

A

Nie, ponieważ BrowserModule importuje i eksportuje CommonModule

30
Q

Czy BrowserModule może być zaimportowany w dowolnym miejscu?

A

Nie. BrowserModule powinien być tylko importowany wewnątrz AppModule

31
Q

Jak wykorzystać w szablonie komponentu dyrektywę *ngIf w sytuacji kiedy wewnątrz klasy posiadamy pole publiczne number[] studenci w celu wyświetlenia elementu <div> tylko wtedy kiedy istnieją jacyś studenci?</div>

A

W widoku dodajemy atrybut *ngIf w następujący sposób:

<div>0">
.....
</div>

32
Q

W jaki sposób skorzystać z dyrektywy *ngFor wewnątrz szablonu komponentu w sytuacji kiedy w klasie znajduje się tablica obiektów Student posiadających pola firstName i lastName (chcemy wyświetlić tablicę)?

A

W widoku umieszczamy:

      {{st.firstName}}
      {{st.lastName}}
33
Q

Jaka jest różnica między for…or i for…in?

A

for. .or służy do iterowania po iterable. W przypadku tablicy zwróci tam elementy znajdujące się pod kolejnymi indeksamu.
for. .in służy do iterowania po właściwościach obiektu. W przypadku tablicy zwróci nam indeksu (np. 0, 1, 2) zamiast wartości elementów w danej tablicy.

34
Q

W jaki sposób wykonać wiązanie (binding) do atrybutu elementu np. src w elemencie img?

A

W tym celu korzystamy z “property binding”, czyli korzystamy z nawiasów kwadratowych?
np.
<img></img>
…

35
Q

W jaki sposób uruchomić metodę reagując na zdarzenie w elemencie z szablonu komponentu - np. chcemy zareagować na klikniecie na przycisku?

A

Korzystamy wiązania z szablonu do klasy.
Np.

a w klasie

nazwaMetody():void{
…
}

36
Q

W jaki sposób zdefiniować wiązanie w obie strony w momencie wpisania tekstu to kontrolki ?

A

Możemy skorzystać z dyrektywy “banana in a box”.
Np.

a w klasie

nazwaPola:string=”Jakas wartość”;

37
Q

Jaki moduł musimy zaimportować, aby skorzystać ze składni [(ngModel)]?

A

Musimy zaimportować moduł FormsModule z @angular/forms

38
Q

Jakie zdarzenia możemy wykorzystać w cyklu życia komponentu?

A

OnInit, OnChange i OnDestroy

39
Q

Z jakiego modułu możemy zaimportować interfejs OnInit, OnChange lub OnDestroy?

A

@angular/core

40
Q

Czy komponent musi implementować interfejs OnInit w celu uruchomienia metody na początku cyklu życia komponentu?

A

Nie, wystarczy, że zdefiniujemy metodę o odpowiedniej sygnaturze. Interfejsu są wykorzystywanego w tym wypadku wyłącznie na poziomie IDE.

41
Q

Za pomocą jakiej dyrektywy można zadeklarować parametr w komponencie do którego komponent nadrzędny może przekazać dane?

A

Za pomocą dyrektywy @Input (@angular/core)

42
Q

W jakim module znajduje się adnotacja @Input?

A

W module @angular/core

43
Q

W jaki sposób w module nadrzędnym przekazać dane do atrybutu z dyrektywą @Input?

A

Np.

44
Q

Jak przekazać dane z komponentu podrzędnego do komponentu nadrzędnego?

A

Z pomocą zdarzeń.

45
Q

Jak zadeklarować zdarzenie w komponencie?

A

Tworzymy EventEmitter, czyli wewnątrz komponentu deklarujemy:
@Output()
notify: EventEmitter=new EventEmitter();

Następnie wywołujemy zdarzenie w następujący sposób:
this.notify.emit(‘wiadomość’);

46
Q

W jaki sposób zarejestrować się w komponencie nadrzędnym na zdarzenie udostępnianie przez komponent podrzędny?

A

Np.

<div>…</div>

47
Q

Za pomocą jakiej dyrektywy/dekoratora możemy zdefiniować serwis?

A

Za pomocą dyrektywy/dekoratora @Injectable z modułu @angular/core

48
Q

W jaki sposób możemy zarejestrować serwis w kontenerze zależności?

A

Jako singleton na poziomie globalnym (root) lub na poziomie komponentu (wtedy będzie widoczny tylko tam i będzie tworzonych wiele jego instancji).

49
Q

Jak należy skonfigurować dekorator @Injectable(), aby zarejestrować serwis na poziomie globalnym?

A 
Dodajemy obiekt konfiguracyjny z atrybutem providedIn: 'root'
Np:
@Injectable(
{
     providedIn: 'root'
}
)
50
Q

Do czego służy RxJs i Observables?

A

Pozwala na traktowanie zdarzeń jako kolekcji elementów, które

Angular (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions