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