Angular - ziua 2

Doua moduri de a prelua un string:

- string interpolation: <img src="{{recipe.imagePath}}"/>

- property binding: <img [src]="recipe.imagePath"/>

Scurtatura pentru un constructor clasic intr-un fisier typescript:

export class Ingredient {
    // fara declararea campurilor

    constructor(public name: string, public amount: number) {
        // fara body
    }
}

Augury: plugin de la Chrome pentru debug si analiza aplicatiei Angular

Decoratori:

- pentru clase

- pentru campuri - cu scopul de a expune proprietatile in exterior: @Input('alias') name: string;

Comunicatia intre componente:

- @Input - semnaleaza ca variabila din ts provine din afara, de la parinte. Parintele o trimite din html folosind paranteze patrate: <app-recipe-item [recipe]="recipeElem"></app-recipe-item>
- @Output - variabila va putea fi vazuta de catre parinte, in html, pe referinta catre copil, parintele o primeste in html folosind parantezele rotunde: <app-shopping-edit (ingredientAdded)="onIngredientAdded($event)"></app-shopping-edit> - aici ingredientAdded face parte din componenta-copil unde este un @Output si un EventEmitter (corelat cu $event)
!!! Trimitere: paranteze patrate; Primire: paranteze rotunde !!!

- prin servicii, cand solutia de mai sus nu este eficienta
Tipul de date EventEmitter: de multe ori (sau intotdeauna?) este un @Output. In ts la o anumita actiune (onSomething()) va apela pe el insusi metoda emit().

Encapsulation: un atribut adaugat la @Component, cu 3 valori posibile:

- ViewEncapsulation.None - te scapa de atribute in plus adaugat automat elementelor - ceea ce adaugi de acum inainte in fisierul css va fi aplicat la nivel global

- ViewEncapsulation.Native - acelasi efect ca si None, dar folosind Shadow mode technology, nu toate browser-ele o suporta

- ViewEncapsulation.Emulated (default)

Local reference: in html, pe un tag, se asigneaza un fel de id la intreg tag-ul: <input type="text" #myid>

Acesta poate fi referentiat mai tarziu in html, pe evenimente: <button (click)="onAdd(myid)">

In metoda onAdd(object) din Typescript, se va primi intreg obiectul de tag.

@ViewChild: @ViewChild('serverContentInput', {static: true}) serverContentInput: ElementRef;

Se adauga {static: true} doar daca se doreste accesarea elementului selectat, in ngOnInit().
Se foloseste atunci cand se face legatura intre html si ts: pe tag-ul din html se adauga "#id", iar in ts se referentiaza prin: @ViewChild('id', {static : false}) idRef: ElementRef;

@ContentChild: cand se foloseste ng-content

Metode trigger:
- ngOnInit() - apelata la initializarea unei componente, se executa dupa constructor -> clasa trebuie sa aiba implements OnInit
- ngOnChanges(changes: SimpleChanges) - cand pe o proprietate care are @Input se petrece o schimbare -> implements OnChanges
Ordinea de rulare pana acum este: constructor, ngOnChanges, ngOnInit.
- ngDoCheck() - ruleaza la orice schimbare in interiorul unei componente cand Angular trebuie sa re-randeze template-ul (proprietati, evenimente, etc). Performanta e ok totusi.
- ngAfterContentInit() - chemata dupa ce un ng-content a fost proiectat intr-un view
- ngAfterContentChecked() - chemata dupa ce un change detector a verificat un ng-content
- ngAfterViewInit() - dupa ce view-ul componentei a fost initializat, ai acces la elementele din DOM
- ngOnDestroy() - chemata inainte sa fie distrusa componenta

Angular

Un framework Javascript care manipuleaza DOM-ul. 

- pentru amestecarea de cod static si cod dinamic intr-un html

- ca filozofie, construieste componente reutilizabile

Prereq: Node

Creare aplicatie noua:

> ng new myapp

Compileaza aplicatia si o face gata sa porneasca:

> ng serve

Browser: http://localhost:4200  -> se va vedea continutul din "myapp\src\app\app.component.html"

Typescript: un framework care ofera tipuri, clase, interfete. La compilare devine un Javascript.

Npm: Node package manager (utilitar)

Bootstrap: un framework pentru stiluri css, vrem versiunea 3:

> npm install --save bootstrap@3

Dupa care se adauga la "styles" in angular.json -> "architect" -> "build",  valoarea"node_modules/bootstrap/dist/css/bootstrap.min.css".

De fapt, html-ul principal este index.html, in care apare <app-root> (un tag care va fi populat dinamic cu elemente din folderul "app", legarea se face in app.component.ts).

Ng injecteaza in pagina principala mai multe script-uri care vor executa inclusiv codul nostru.

Componente: intra ca foldere in app/

Se pot crea manual sau automat:

> ng generate component name-of-the-component

Selector: 

- dupa un tag nume: <nume>

- dupa numele atributului [nume]: <div nume>

- dupa numele clasei .nume: <div class="nume">

- dupa id nu este suportat

Data binding:

- de la Business logic (Typescript) la Template (Html) prin string interpolation & property binding

String interpolation: variabile definite in fisierul ts, si folosite in fisierul html, intre acolade duble  ->{{variabila}} 

Property binding: la fel, dar valoarea este luata dintre ghilimele -> "variabila"

- invers prin event binding

De exemplu, pe un buton se poate apela o metoda: (click)="onMyEvent()" , iar in implementarea din ts sa se schimbe starea unei variabile

- ambele: two way binding

Trebuie adaugat "FormsModule" la imports in app.module.ts

In forma, pe elementul pe care se face binding punem [(ngModel)]="variabila"

Directivele: sunt instructiuni in DOM, cum ar fi componentele. Exemple:

<p *ngIf="serverCreated">Server was created</p> , unde serverCreated este un boolean din fisierul ts.

Adaugand un else:

<p *ngIf="serverCreated; else noServer">

    Server was created, server name is {{serverName}}

</p>
<ng-template #noServer>
  <p>No server was created.</p>
</ng-template>

Directive ale atributelor: nu adauga sau sterg elemente, ci doar modifica elementul pe care sunt pozitionate

* NgStyle: actualizarea dinamica a stilului

<p [ngStyle]="{backgroundColor: getColor()}">Server {{serverId}} with status {{serverStatus}} </p>

* NgClass: adaugarea sau stergerea conditionata a unei clase de stil

<p [ngStyle]="{backgroundColor: getColor()}" [ngClass]="{online: serverStatus === 'Online'}">

Aici, variabila "online" este definita in fisierul ts, in @Component -> styles si se adauga la tag-ul <p> daca variabila serverStatus face egalitate cu acel string.

* NgFor: <app-server *ngFor="let server of servers"></app-server>

"servers" este definit in fisierul ts, daca sunt 2 elemente, va duplica <app-server> de 2 ori.

---

Sursa: Udemy , section 1 + 2

Judecăți de programatori

- Moartea e problemă semi-decidabilă.
Până nu mori nu ai de unde să știi că vei muri, poți avea doar așteptări rezonabile că la un moment dat se va întâmpla.
- I beg to differ. Pastrand analogia, problema este 100% decidabila (stii sigur ca algoritmul se... incheie), doar ca nu poti determina exact timpul de executie.

- Unii din oamenii care sunt acum în viață ar putea tehnic vorbind să fie nemuritori.

Nu cred că se întâmplă, dar nu ai de unde să știi până nu mor. Dacă te bazezi doar pe faptul că niciun om nu a ajuns la 200 de ani, e doar inducție partială pe mulțimea oamenilor care au murit deja, pentru că încă există 7 miliarde de cazuri care încă nu s-au oprit. Din câte știu eu, nu există o vârstă la care organismul să aibă codificat un return forțat, deci asta face problema să nu fie decidabila. Posibil să greșesc în intepretarea mea. Dacă da, unde?

Alte întrebări culese de la interviuri

1. Două dintre următoarele afirmații sunt corecte:
a) hashCode() ajută la localizarea obiectelor în colecții
b) hashCode() trebuie să întoarcă un număr întreg, pozitiv
c) Implementarea lui hashCode() în clasa String este moștenită din Object
d) Două stringuri goale vor produce hashCode() identic

Adevărat: d
Fals: b, c

---

2. Ce afișează următorul program?

public class Main {
    public static void main(String args[]) {       
        int abc [] = {2, 3, 4};
        int def [] = fix(abc);
        System.out.println(abc[0] + abc[1] + abc[2]);
        System.out.println(def[0] + def[1] + def[2] + " ");
    }
   
    private static int [] fix(int [] array) {
        array[1] = 0;
        return array;
    }
}

Răspuns: 6 6
Metoda fix primește ca parametru referința la un obiect int [].

---

3. Care din următoarele situații nu cauzează un thread să se oprească, în mod direct:
a) wait()
b) notify()
c) sleep()
d) încercarea de a citi dintr-un InputStream

---

4. Avem două cuburi prin care vrem să afișăm zilele din calendar. Cum putem dispune cifrele?

Răspuns: Cubul 1 ia cifrele 0, 1, 2, 3, 4, 5 și Cubul 2 ia cifrele 0, 1, 2, 6, 7, 8 (6 se întoarce în 9).

O colecție de întrebări pentru interviuri, ediția București 2020

Java SE
- polimorfism, mostenire
- modificatori de acces în JSE, diferența între protected și default
- cum functioneaza variabilele statice
- despre tipurile de excepții: checked și unchecked
- de ce se folosește finally
- try with resources
- cum se creează un obiect immutable
- diferența intre int si Integer
- despre stringuri, mutabile sau imutabile?
- concatenarea de stringuri din java, de ce e costisitor?
- StringBuilder vs StringBuffer
- care sunt tipurile de colecții: liste, seturi, map etc
- diferența List, Map și Set
- set ordonat--- TreeSet? cum se ordonează?
- diferența între Comparable si Comparator
- parsare XML cu java - cum?

- Struts, Servlet
- filtre din Servlet
- interceptor din Struts2
- JSP e thread safe?
- cum functionau aplicațiile Swing pe mai multe thread-uri - cum stia primul thread ca s-a terminat al doilea?
- JDBC, Hibernate
- de ce să folosesți JDBC comparativ cu un ORM?
- tipuri de statements in JDBC
- cum te protejezi de JDBC injection
- la ce se foloseste Maven, tipuri de scope-uri si la ce sunt folosite

Javascript, HTML
- HTML tags, caracteristici html5
- diferența GET/POST
- cum te protejezi de sniffing pe rețea
- obiecte in javascript, se poate folosi let in Javascript?
- multithreading in Javascript? Dar in html? web workers?
- Ajax - cum funcționeaza
- tipuri de atribute ale unui cookie
- tipuri de atacuri în oasp - top 10 vulnerabilities

Baze de date
- ce este un index într-o BD, ce este un trigger
- SQL: diferenta între delete și truncate (truncate nu activează trigger)
- tipuri de join, diferența între left și right join

Altele
- exemple de ședințe Agile
- design patterns exemple
- singleton si multithreading, cum se poate face thread safe
- REST api (x2)
- Linux exemple de comenzi, comanda pt schimbarea parolei, logare ca admin
- un excel care comunică lent cu o BD, cum se poate depana, primii pași?