Angular Basics

Question 1

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

Answer 1

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

Question 2

Z czego składa się komponent?

Answer 2

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

Question 3

W jakim module znajduje się dekorator @Component?

Answer 3

import ‘@angular/core’;

Question 4

Jakie podstawowe parametry przyjmuje dekorator @Component?

Answer 4

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

Question 5

Jaki parametry dekoratora @Component pozwala na zdefiniowanie nazwy selektora?

Answer 5

selector

Question 6

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

Answer 6

template

Question 7

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

Answer 7

O umieszczeniu go wewnątrz ‘backticks’ - kod

Question 8

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

Answer 8

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

Question 9

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

Answer 9

npm install -g @angular/cli

Question 10

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

Answer 10

ng new nazwaAplikacji

Question 11

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

Answer 11

ng serve –open

Question 12

Jak dodać nowy komponent z pomocą Angular CLI?

Answer 12

ng g c nazwaKomponentu

Question 13

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

Answer 13

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

Question 14

Z czego składa się moduł Angular?

Answer 14

Z klasy TypeScript z adnotacją @NgModule

Question 15

Z jakiej biblioteki pochodzi adnotacja @NgModule?

Answer 15

Z biblioteki @angular/core

Question 16

Jakie parametry przyjmuje dekorator @NgModule?

Answer 16

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

Question 17

Do czego służy parametr bootstrap aplikacji?

Answer 17

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

Question 18

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

Answer 18

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

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

Question 19

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

Answer 19

Zmodyfikować plik angular.json i sekcje styles

Question 20

Jak wykorzystać interpolacje wewnątrz szablonu komponentu?

Answer 20

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

Question 21

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

Answer 21

Tak. np. {{ cena + 10 }}

Question 22

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

Answer 22

Reprezentuje powiązanie (binding) z klasy do szablonu

Question 23

Czy interpolacja reprezentuje wiązanie z jedno czy dwustronne?

Answer 23

Reprezentuje wiązanie jednostronne (one-way binding)

Question 24

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

Answer 24

W module @angular/common

Question 25

W jakim module znajduje się BrowserModule?

Answer 25

W module @angular/plaform-browser

Question 26

Do czego służy BrowserModule?

Answer 26

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

Question 27

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

Answer 27

Template-driven i reactive forms

Question 28

Jakiego rodzaju dyrektywą jest *ngFor i *ngIf?

Answer 28

To przykłady dyrektyw strukturalnych

Question 29

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

Answer 29

Nie, ponieważ BrowserModule importuje i eksportuje CommonModule

Question 30

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

Answer 30

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

Question 31

Jak wykorzystać w szablonie komponentu dyrektywę *ngIf w sytuacji kiedy wewnątrz klasy posiadamy pole publiczne number[] studenci w celu wyświetlenia elementu

tylko wtedy kiedy istnieją jacyś studenci?

Answer 31

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

0"> .....

Question 32

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ę)?

Answer 32

W widoku umieszczamy: {{st.firstName}} {{st.lastName}}

Question 33

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

Answer 33

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.

Question 34

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

Answer 34

W tym celu korzystamy z "property binding", czyli korzystamy z nawiasów kwadratowych? np. ...

Question 35

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

Answer 35

Korzystamy wiązania z szablonu do klasy. Np. a w klasie nazwaMetody():void{ ... }

Question 36

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

Answer 36

Możemy skorzystać z dyrektywy "banana in a box". Np. a w klasie nazwaPola:string="Jakas wartość";

Question 37

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

Answer 37

Musimy zaimportować moduł FormsModule z @angular/forms

Question 38

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

Answer 38

OnInit, OnChange i OnDestroy

Question 39

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

Answer 39

@angular/core

Question 40

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

Answer 40

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

Question 41

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

Answer 41

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

Question 42

W jakim module znajduje się adnotacja @Input?

Answer 42

W module @angular/core

Question 43

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

Answer 43

Np.

Question 44

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

Answer 44

Z pomocą zdarzeń.

Question 45

Jak zadeklarować zdarzenie w komponencie?

Answer 45

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ść');

Question 46

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

Answer 46

Np. |

...

Question 47

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

Answer 47

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

Question 48

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

Answer 48

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

Question 49

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

Answer 49

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

Question 50

Do czego służy RxJs i Observables?

Answer 50

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