1. Introducere ………………………….. ………………………….. ………………………….. ……… 6 2. Limbaje de… [612861]

4
Cuprins

1. Introducere ………………………….. ………………………….. ………………………….. ……… 6
2. Limbaje de programare utilizate în dezvoltarea aplicației ………………………….. 7
2.1 HTML5 ………………………….. ………………………….. ………………………….. ……….. 7
2.2 CSS3 ………………………….. ………………………….. ………………………….. …………… 7
2.3 SQL ………………………….. ………………………….. ………………………….. …………….. 8
2.4 JavaScript ………………………….. ………………………….. ………………………….. …….. 9
2.5 Typescript ………………………….. ………………………….. ………………………….. ….. 10
3. Tehnologii web utilizate în realizarea aplicației ………………………….. …………. 11
3.1 Angular 1 ………………………….. ………………………….. ………………………….. …… 11
3.1.1 Conceptul de ansamblu ………………………….. ………………………….. ………….. 13
3.1.2 Data binding ………………………….. ………………………….. …………………………. 14
3.1.3 Controller ………………………….. ………………………….. ………………………….. … 16
3.1.4 Servicii ………………………….. ………………………….. ………………………….. ……. 17
3.2 Angular 2 ………………………….. ………………………….. ………………………….. …… 20
3.2.1 Componente ………………………….. ………………………….. …………………………. 21
3.2.2 Proprietățile de Input și Outpu t ………………………….. ………………………….. .. 22
3.2.3 Ciclul de viață (lifecycle) ………………………….. ………………………….. ……….. 23
3.2.4 Furnizori (providers) ………………………….. ………………………….. ……………… 24
3.2.5 Elementul gazd ă (host element) ………………………….. ………………………….. . 24
3.2.6 Componentele se auto -descriu (self -describing) ………………………….. ……. 26
3.2.7 Directive ………………………….. ………………………….. ………………………….. ….. 26
3.2.8 Injectarea de dependințe ………………………….. ………………………….. ………… 27
3.2.9 API singur ………………………….. ………………………….. ………………………….. .. 29
3.2.10 Legarea de proprietăți (property binding) ………………………….. ……………. 30
3.2.11 Zone ………………………….. ………………………….. ………………………….. ……… 32
3.3 Team Foundation Server ………………………….. ………………………….. …………… 33
3.4 Git ………………………….. ………………………….. ………………………….. …………….. 33
3.5 Bootstrap ………………………….. ………………………….. ………………………….. ……. 33
4. Tipuri de software utilizate în realizarea aplicației ………………………….. ………… 35

5
4.1 Visual Studio 2015 ………………………….. ………………………….. …………………… 35
4.2 Visual Studio Code ………………………….. ………………………….. ………………….. 35
4.3 SQL Workbench ………………………….. ………………………….. ……………………… 36
5. Stud iul comparativ între cele două framework -uri ………………………….. ………… 37
Concluzii ………………………….. ………………………….. ………………………….. ……………. 46
Bibliografie ………………………….. ………………………….. ………………………….. …………. 47
Declarație de autenticitate a lucrării de finalizare a studiilor ………………………….. . 48

6
1. Introducere

Această lucrare are ca scop realizarea unui studiu comparativ între framework -urile
Angular 1 și Angular 2.
În urmă cu numai câțiva ani, o aplicație avea utilizatori de ordinul miilor, în cazul cel
mai favorabil. Odată cu apariția erei tehnologice, numărul utilizatorilor a crescut exponențial,
acesta ajungând rapid la ordinul sutelor de mii, sau chiar a milioanelor. În același timp, au
apărut și cerințele din ce în ce mai complexe din partea utilizatorilor, iar ast fel companiile au
fost nevoite să găsească diferite soluții, care să satisfacă nevoile clienților săi.
În prezent, o aplicație trebuie să fie accesibilă și disponibilă utilizatorilor săi 24 de ore
pe zi, 7 zile pe săptămână, iar astfel este important să se implementeze o bază de date
adecvată, care să suporte conectarea simultană a sute de mii de utilizatori.
Deoarece fiecare utilizator are propriile sale nevoi și cerințe, e foarte posibil ca în
cadrul aceleeași aplicații, să fie nevoie de o customizare dif erită pentru fiecare utilizator în
parte. Cele două framework -uri permit customizarea preferințelor utilizatorilor.
Principalul avantaj al acestora o reprezintă structura flexibilă, dar și faptul că sunt
proiectate în așa fel încât pot customizate , lucru care duce la creșterea performanței.
Pentru realizarea acestui studiu, am realizat o aceeași aplicație scrisă în ambele
framework -uri. Pentru obținerea unor rezultate cât mai exacte, toate operațiile care s -au făcut
în Angular 1, s-au făcut și în Angular 2. Diferențe le dintre cele două framework -uri sunt
foarte mari, de structurarea pe foldere/fișiere, de logică, de modalitatea de scriere a codului.

7
2. Limbaje de programare utilizate în dezvoltarea aplicației

2.1 HTML5

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World
Wide Web , fiind cea de -a 5-a revizuire a limbajului HTML (creat in 1990 și standardizat în
1997 ca HTML4) și este î n curs de dezvoltare încă din octombrie 2011. [1]
Ceea ce cunoaștem astăzi sub termenul HTML5: un ansamblu de tehnologii care
constituie web -ul modern, făcând posibile conținuturi multimedia, animații și aplicații tot mai
sofisticate. Acest termen semnific ă, practic, pentru cei mai neinițiați, tot ceea ce se poate face
cu tehnologiile web moderne, chiar dacă uneori “trucul” respectiv se datorează mai mult
CSS3, de exemplu. [2]

HTML5 a fost conceput pentru a fi compatibil și cu versiunile anterioare, ca urm are,
orice document valid HTML 4 sau XHTML este și HTML5 valid, atâta timp cât folosește
doctype -ul nou. Convenabil, fiindcă acest lucru înseamnă că nu trebuie să o luăm de la capăt
și să uităm tot ce știm despre HTML.

2.2 CSS3

CSS este un acronim, acesta provenind de la Cascading Style Sheets, iar CSS3 este cel
mai nou standard CSS. Acesta a fost împărțit în “module”. Specificațiile vechi au fost
separate în părți mai mici, iar noile specificații au fost de asemenea adaugate.

Cele mai importante mo dule CSS3 sunt:
Selectoarele (Selectors)
Model casetă (Box Model)
Fundaluri și Borduri (Backgrounds and Borders)
Efecte Text (Text Effects)
Transformări 2D/3D (2D/3D Transformations)
Animații (Animations)
Aspect Multi -Coloană (Multiple Column Layout)

8

Inter fața Utilizat or (User Interface) [3 ]

Un lucru foarte important de știut înainte de a începe utilizarea acestor proprietăți, este
faptul că nu toate browser -ele web suportă aceste stiluri, iar de cele mai multe ori, vom fi
nevoiți să apelăm la prefixarea acestora, în funcție de suportul în diferite browsere. Prefixele
pe care le vom apela în funcție de browser sunt:
-webkit – Specific browser -elor Webkit (Google Chrome, Safari și, în curând,
Opera);
-moz- Specific browser -ului Mozilla Firefox;
-ms- Specifi c browser -ului Internet Explorer;
-o- Specific browser -ului Opera. [4 ]

CSS (Cascading Style Sheets), în traducere " foi de stil în cascadă " se ocupă în general
cu aspectul și controlul grafic al elementelor din pagină, cum ar fi: textul, imaginile, fondul,
culorile și așezarea acestora în cadrul ferestrei paginii. CSS folosește stiluri, acestea
înglobează, sub un anumit nume, atribute de formatare care se aplică asupra unui element
individual din pagină, asupra unui grup de elemente sau la nivelul întregulu i document.
Funcționează cu HTML, însă nu este HTML. El extinde funcționalitățile HTML, permițând
redefinirea etichetelor HTML existente.
Un dezavantaj ar fi că unele browsere web nu sunt compatibile cu CSS, astfel că
documentele HTML sunt afișate ca și cu m CSS n -ar exista, dar cele mai cunoscute și utilizate
browsere, cum ar fi: Mozilla Firefox, Google Chrome, Opera, și altele, sunt compatibile CSS.
[5]

2.3 SQL

Limbajul SQL (Structured Query Language) este în prezent unul din cele mai
puternice limbaje s tructurate pentru interogarea bazelor de date relaționale. Este un limbaj
neprocedural și declarativ deoarece utilizatorul descrie ce date vrea să obțină, fără a fi nevoie
să stabilească modalitățile de a ajunge la datele respective. [ 6]
Este un limbaj de programare specific pentru manipularea datelor în sistemele de
manipulare a bazelor de date relaționale (RDBMS), iar la origine este un limbaj bazat pe
algebra relațională. Acesta are ca scop inserarea datelor, interogații, actualizare și ștergere,

9
modific area și crearea schemelor, precum și controlul accesului la date. [ 7]

Instrucțiunile SQL pot fi grupate în:
instrucțiuni de definire a datelor, care permit descrierea structurii BD
instrucțiuni de manipulatea datelor: adaugă, șterge, modifică înregistrăr i
instrucțiuni de selecție a datelor, care permit consultarea BD
instrucțiuni de procesarea tranzacțiilor
instrucțiuni de control al cursorului
instrucțiuni pivind controlul accesului la date [7]

SQL permite atât accesul la conținutul bazelor de date, cât și la structura acestora.

Există 3 metode de bază privind implementarea limbajului SQL:
Apelare directă (Direct Invocation): instrucțiunile sunt introduse direct de la prompter
Modulară (Modul Language): folosește proceduri apelate de programele apli cației
Incapsulată (Embedded SQL): conține instrucțiuni încapsulate în codul de program

La aplicația realizată am folosit atât metoda încapsulată de apelare a instrucțiunilor
SQL pentru manipularea datelor, cât și apelarea directă pentru executarea inst rucțiunilor de
creare a bazei de date împreună cu constrângerile definite pentru aceasta.

2.4 JavaScript

JavaScript este un limbaj de programare orientat pe obiect e bazându -se pe conceptul
prototipurilor . Este folosit mai ales pentru introducerea unor funcționalități în paginile web,
codul Javascript din aceste pagini fiind rulat de către browser . [8]
Limbajul este binecunoscut pentru folosirea sa în construirea paginilor de internet,
fiind folosit și pentru accesul la obiecte încadrate ( embedded objects ) în alte aplicații. A fost
dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub
numele de Mocha, apoi LiveScript, și den umit în final JavaScript. [8]
JavaScript se folosește pentru scriptarea paginilor HTML, adică introducerea unor
scripturi, cum ar fi: verificarea datelor introduse de utilizator, efecte de animație etc.

10
O tehnică tot mai des folosită este AJAX (Asynchronous JavaScript and XML).
Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina
web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM -ului paginii.
Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucât
operația (costisitoare ca timp) de încărcare a unei pagini HTML fiind în mare parte eliminate.
[9]
La realizarea acestei aplicații am folosit JavaScript pentru a valida câmpurile introduse
de utilizator, la parsarea datelor primite de la server și la construcția paginii.

2.5 Typescript

TypeScript este un limbaj de programare open -source dezvoltat de Microsoft. Este un
superset al JavaScript -ului, adăugând op țional static typing și clase bazate pe programarea
orientată pe obiect.
TypeScript -ul fiind un superset al JavaScript -ului, toate programele scrise în
JavaScript sunt valide și în Ty peScript. Compilatorul TypeScript transcompile s în cod
JavaScript.
Acesta adaugă support pentru caracteristici cum ar fi: clase, module și sintaxa de funcții
săgeți cum a fost propus în standardul ECMAScript 2015. [10]

11
3. Tehnologii web utilizate în realizarea aplicației

3.1 Angular 1

Angular JS este un framework structural pentru aplicațiile web dinamice. Vă permite
să utilizați HTML ca limbaj al șabloanelor și vă permite să extindeți sintaxa HTML pentru a
exprima în mod clar și succint componentele aplicației. Data binding și injecția de depe ndință
a Angular JS elimină o mare parte din codul pe care altfel ar trebui să se scrie. Și totul se
întâmplă în browser, făcându -l partenerul ideal pentru orice tehnologie de servere.

Angular JS este ceea ce ar fi fost HTML dacă ar fi fost proiectat pentru aplicații.
HTML este un limbaj declarativ pentru documentele statice .

Impedanța nepotrivită dintre aplicațiile dinamice și documentele statice este deseori rezolvată
cu:
o bibliotecă – o colecție de funcții care sunt utile atunci când scrii aplicații web .
Codul tău este responsabil și cheamă în bibliotecă atunci când consideră că e potrivit.
De exemplu, jQuery.
framework -uri – o implementare specială a unei aplicații web în care codul dvs.
completează detaliile. Framework -ul este responsabil și solicită c odul dvs. atunci când
are nevoie de ceva specific aplicației. De exemplu, durandal, ember, etc.

Angular JS ia o altă abordare, încearcând să minimizeze nepotrivirea impedanței dintre
documentul HTML și ceea ce îi necesită unei aplicații pentru crearea de n oi construcții
HTML. Angular JS învață browser -ul sintaxa nouă printr -o construcție pe care o numim
directivă .
Exemplele includ:
Data binding, ca și în {{}}.
Structuri de control DOM pentru repetarea, afișarea și ascunderea fragmentelor
DOM.
Suport pentru formulare și validarea formularelor.
Atașarea unui nou comportament elementelor DOM, cum ar fi manipularea
evenimentului DOM.

12

Gruparea HTML în componente reutilizabile.

Pentru crearea unei aplicații, Angular JS vine cu următoarea opțiune:
Tot ceea ce aveți nevoie pentru a construi o aplicație CRUD într -un set
coerent: data binding, directive, validarea formularului, rutarea, conectarea profundă,
componente reutilizabile și injecția de dependință.
Istoricul de testare: unit teste, teste end -to-end, mocks și test harnesses .
Seed application cu aspect de director și scripturi de testare ca punct de
plecare.

Angular JS este construit în jurul credinței că, codul declarativ este mai bun decât cel
imperativ atunci când vine vorba de construirea UI -urilor și unirea componentelor software, în
timp ce codul imperativ este excelent pentru a exprima logica de afaceri.
este o idee foarte bună să decuplați manipularea DOM de la logica aplicației.
Acest lucru îmbunătățește dramatic testabilitatea codului.
este o idee cu ad evărat bună să considerați testarea aplicațiilor drept egală cu
importanța scrierii unei aplicații. Dificultatea de testare este dramatic afectată de
modul în care este structurat codul.
este o idee excelentă deconectarea părții client a unei aplicații de partea server.
Acest lucru permite lucrărilor de dezvoltare să progreseze în paralel și permite
reutilizarea ambelor părți.
este foarte util, într -adevăr, dacă framework -ul ghidează dezvoltatorii pe
parcursul întregii călătorii de construire a unei aplicaț ii: de la proiectarea UI, prin
scrierea logicii de afaceri, la testare.
este întotdeauna bine să faci sarcinile comune banale și sarcinile dificile
posibile.

Angular JS vă eliberează de următoarele probleme:
Înregistrarea apelurilor inverse : Înregistrarea apelurilor inverse crează
dezordine în cod așa că, eliminarea acestora este un lucru bun. Eliminând codul
boilerplate reduce foarte mult cantitatea de cod JavaScript pe care trebuie să o scrieți,
astfel vedeți mai ușor ce face aplicația dvs.
Manipularea pr ogramatică HTML DOM : Manipularea HTML DOM este o
piatră de temelie a aplicațiilor AJAX. Descriind în mod declarativ modul în care UI -ul

13
ar trebui să se schimbe în timp ce starea aplicației se modifică, sunteți eliberat de
sarcini de manipulare DOM la nivel scăzut. Cele mai multe aplicații scrise cu
Angular JS nu trebuie să manipuleze în mod programatic DOM -ul, deși puteți dacă
doriți.
Transmiterea datelor către și de la UI : operațiile CRUD reprezintă
majoritatea sarcinilor aplicațiilor AJAX. Fluxul de colect are de date de la server la un
obiect intern la un formular HTML, permițând utilizatorilor să modifice formularul, să
valideze formularul, să afișeze erori de validare, să se întoarcă la un model intern și
apoi să revină la server, creează o mulțime de cod boilerplate. Angular JS elimină
aproape tot aceast boilerplate, lăsând un cod care descrie fluxul global al aplicației
decât toate detaliile implementării.
Scriind tone de cod de inițiere doar pentru a începe : De obicei, trebuie să
scrieți mult cod doar pe ntru a obține o aplicație de bază "Hello World" AJAX care
funcționează. Cu Angular JS puteți să vă face aplicația bootstrap cu ușurință utilizând
serviciile care sunt injectate automat în aplicația dvs. într -un stil de injecție de tip
Guice. Acest lucru vă permite să începeți rapid dezvoltarea caracteristicilor. Ca bonus,
obțineți control complet asupra procesului de inițializare în teste automate. [11]

3.1.1 Conceptul de ansamblu
În tabelul 3.1 am prezentat conceptul de ansamblu al Angular 1.
Concept Descriere
Șablon HTML cu markup -uri adiționale
Directivele extind HTML cu atribute și elemente
personalizate
Model datele afișate utilizatorului în browser și cu
care acesta interacționează
Domeniul de aplicare în care modelul este stocat, astfel
încât controller -ul, directivele și expresiile îl
pot accesa
Expresiile accesează variabilele și funcțiile din
domeniul de aplicare
Compilatorul analizează șablonul și instanțiază directivele

14
și expresiile
Filtrul formatează valoarea unei expresii pentru a f i
afișată utilizatorului
View ce vede utilizatorul (DOM)

Data binding sincronizează datele dintre model și view
Controller controlează logica de afaceri din spatele
view -urilor
Injecția de dependință crează și leagă obiectele și funcțiile
Injector containerul pentru injecția de dependință
Modul un container pentru diferite părți ale aplicației
incluzând controllers, servicii, filtre, directive
care configureaza injectorul
Servicii logică de afaceri reutilizabilă independent de
view -uri
Tabel 3.1 Conceptul de ansamblu

3.1.2 Data binding

În Angular JS acesta este un template cu noile markup -uri suplimentare.
Când aplicația Angular JS pornește, aceste markup -uri din template sunt parsate și
procesate cu ajutorul compilatorului.
Încărcarea, transformarea și randarea DOM -ului este numită view.
Directivele sunt primele care folosesc noile markup -uri. Aplică un comportament
special atributelor sau elementelor HTML.

<div ng-app ng-init="qty=1;cost=2" >
<b>Invoice: </b>
<div>
Quantity: <input type="number" min="0" ng-model ="qty" >
</div>
<div>
Costs: <input type="number" min="0" ng-model ="cost" >

15
</div>
<div>
<b>Total: </b> {{qty * cost | currency}}
</div>
</div>

În exemplul de mai sus folosim atributul ng-app, care este legat de o directivă care
inițializează aplicația automat. Angular JS definește o directive pentru elementul input , care
adaugă un comportament extra elementului. Directiva n g-model stochează/updatează
valoarea input -ului într -o/dint -o variabilă.

Figura 3.1 Data binding

O a doua abordare a noilor markup -uri se face cu ajutorul acoladelor duble {{ expresie
| filtru }}. Când compilatorul întâlnește acest markup, îl v -a înlocui cu valoarea evaluată din
makup.
O expresie în template este un fragment de cod JavaScript care îi permite Angular JS-
ului să citească și să scrie variblele. *Aceste variabile nu sunt globale. Ca în variabilele din
JavaScript funcțiile sunt într -un scop. Angular JS furnizează un scop variabilelor acc esibile
pentru expresii.
Valorile ce sunt stocate în variabile în domeniul de aplicare sunt denumite model .
Exemplul menționat mai sus conține și un filtru . Un filtru formatează valoare expresiei
pentru a fi afișata utilizatorului. Filtrul currency formatează un număr într -un output care va
arăta ca si bani.

16
Cel mai important lucru în exemplul de mai sus este că Angular JS furnizează legaturi
live: indiferent că valoarea input -ului se schimbă, valoarea expresiilor sunt recalculate
automat și DOM -ul este updatat cu valorile respective. Acest concept se numește two-way
data binding .

3.1.3 Controller

Se crează un nou fișier JavaScript care va conține controller -ul. Fișierul specifică o
funcție constructor care va fi folosită pentru crearea instanței controller -ului. Scopul
controller -elor este de a expune variabilele și funcționalitate pentru expresii și directive.

Angular .module ('invoice1' , [])
.controller ('InvoiceController' , function InvoiceController () {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR' ;
this.currencies = ['USD' , 'EUR' , 'CNY' ];
this.usdToForeignRates = {
USD : 1,
EUR : 0.74,
CNY : 6.09
};
this.total = function total(outCurr ) {
return this.convertCurrency (this.qty * this.cost, this.inCurr , outCurr );
};
this.convertCurrency = function convertCurrency (amount , inCurr , outCurr ) {
return amount * this.usdToForeignRates [outCurr ] / this.usdToForeignRates [inCurr ];
};
this.pay = function pay() {
window .alert('Thanks!' );
};
});

17

Figura 3.2 Controller

Am adăugat directiva ng-controller în HTML. Directiva îi transmite Angular JS-ului
că noul InvoiceController este responsabil de elementul cu directiva și toți copii elementului.
Sintaxa InvoiceController as invoice îi spune Angular JS-ului să instanțieze controller -ul și să
îl salveze în variabila invoice în domeniul de apicare.
Am schimbat toate expresiile în varibile de citire și scriere în instanța controller -ului
prefixându -le cu invoice . Valuta este definită în controller și adăugată în template cu ajutorul
ng-repeat . Controller -ul con ține funția total și putem să facem bind rezultatului funcției la
DOM utilizând {{ invoice .total(…) }}. Butonul pentru plată folosește directiva ngClick .
În noul fișier JavaScript creem un modul în care registrăm controller -ul.

3.1.4 Servicii

Acum InvoiceController conține toată logica. Cu cât aplicația crește este indicat
mutarea logicii view -ului independent din controller într -un service , ca să poată fi reutilizat în
alte părți ale aplicației.

Angular .module ('invoice2' , ['finance' ])
.controller ('InvoiceController' , ['currencyConverter' , function
InvoiceController (currencyConverter ) {

18
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR' ;
this.currencies = currencyConverter .currencies ;

this.total = function total(outCurr ) {
return currencyConverter .convert (this.qty * this.cost, this.inCurr , outCurr );
};
this.pay = function pay() {
window .alert('Thanks!' );
};
}
]);

Am mutat funcția convertCurrency și definirea valutelor într -un nou fișier finance.js .
Cu ajutorul injectării dependinței controller -ul va putea folosii noua funcție.
Injectarea dependinței (DI) este un software design pattern care se ocupă cu felul în care
obiectele și funcțiile sunt create și felul în care își află dependințele.

Angular .module ('finan ce', [])
.factory ('currencyConverter' , function () {
var currencies = ['USD' , 'EUR' , 'CNY' ];
var usdToForeignRates = {
USD : 1,
EUR : 0.74,
CNY : 6.09
};
var convert = function (amount , inCurr , outCurr ) {
return amount * usdToForeignRates [outCurr ] / usdToForeignRates [inCurr ];
};
return {
currencies : currencies ,
convert : convert

19
}; });

În Angular JS toate (directivele, filtrele, controller -ele, serviciile etc.) sunt create și
legate prin injecția de dependinț e. Containerul DI este numit injector .
Pentru utilizarea DI, trebuie să existe un loc în care toate lucrurile care ar trebui să lucreze
împreună sunt înregistrate. În Angular JS acesta e rolul modulelor. Când Angular JS pornește
va folosi configurația modulului cu numele dat de directiva ng-app, care include configurația
tuturor modulelor de care depinde.
În exemplul de mai sus, tempalte -ul conține directiva ng-app= ”invoice2” . Acesta îi
comunică Angular JS-ului să folos ească modulul invoice2 ca și modulul principal al aplicației.
Fragmentul de cod Angular .module ('invoice2' , ['finance' ]) specifică, că modulul
invoice2 depinde de modulul finance. Cu aceasta, Angular JS folosește atât InvoiceController
cât și serviciul currencyConverter .
Exită multiple feluri cum să creezi un serviciu. În exemplul de mai sus am folosit o
funcție anonimă ca și funcția factory pentru serviciul currencyConverter . Această funcție ar
trebui să returneze instanța serviciului currencyConverter.
Ca InvoiceController să aibe o referință a funcției currencyConverter este să definim
argumentele funcției în constructor.
InvoiceController în exemplul nostru are ca și argument currencyConverter .
Angular JS știe de dependința dintre controller și service și cheamă controller -ul cu instanța
serviciului ca argument. [12]

Figura 3.3 Servicii

20
3.2 Angular 2

Figura 3.4 Conceptul de baz ă al Angular 2

– Componente, injectarea de dependințe și legături (bindings)

Să presupunem c ă vrem să construim o aplicație în care vor fi listate o serie de
prezentări tehnice, pe care s ă le poți filtra, vedea și nota.

Figura 3.5 View -ul aplica ției

21
3.2.1 Componente

Pentru a construi o aplicație Angular 2, trebuie s ă
definim un set de componente, pentru fiecare element de
UI, ecran și rut ă. O aplicație va avea întotdeauna o
component ă rădăcină (root) care va conține toate celelalte
componente. Cu alte cuvinte, fiecare aplicație Angular 2 va
avea un arbore de component e, care pentru aplicație va
arăta cam așa:
Figura 3.6 Structura aplicației

Application este componenta rădăcină (root). Componenta Filters are input -ul pentru
speaker și butonul pentru filtrare. TalkList este lista pe care o vedem în partea de jos. Și
TalkCmp este un item din acea list ă.

Pentru a înțelege mai ușor ce constituie o componenta în Angular 2, să aruncăm o
privire peste TalkCmp .

TalkCmp.ts:
@Component({
selector: 'talk -cmp',
directives: [FormattedRating, WatchButton, RateButton],
templateUrl: 'talk_cmp.html'
})
class TalkCmp {
@Input() talk: Talk;
@Output() rate: EventEmitter;
//…}

talk_cmp.html
{{talk.title}} {{talk.speaker}}
<formatted -rating [rating]="talk.rati ng"></formatted -rating>
<watch -button [talk]="talk"></watch -button>
<rate -button [talk]="talk"></rate -button>

22
3.2.2 Proprietățile de Input și Output

O component ă are proprietăți de input și output , care pot fi definite în decoratorul
componentei sau folosind property decorators .

class TalkCmp {
@Input() talk: Talk;
@Output() rate: EventEmitter;
//…
}
Datele ajung într-o component ă prin proprietățile de input. Datele ies dintr -o
componenta prin proprietățile de output.

Figura 3.7 Structura aplicației pentru părinte -copil și copil -părinte

Proprietățile de input și output sunt API -ul public al unei componente. Le folosim
când instanțiem o component ă în aplicație .
<talk -cmp [talk]="someExp" (rate)="e ventHandler($event.rating)"></talk -cmp>

Putem seta proprietăți de input folosind legăturile de proprietăți (property bindings ),
cu ajutorul parantezelor drepte. Putem s ă ne subscriem la proprietățile de output cu ajutorul
legăturil or de evenimente ( event bindings ), folosind paranteze.
O component ă are un șablon , care descrie cum este afișată componenta pe pagin ă.

23
@Component({
selector: 'talk -cmp',
directives: [FormattedRating, WatchButton, RateButton],
templateUrl: 'talk_cmp.html'
})
talk_cmp.html
{{talk.title}} {{talk.speaker}}
<formatted -rating [rating]="talk.rating"></formatted -rating>
<watch -button [talk]="talk"></watch -button>
<rate -button [talk]="talk"></rate -button>
Angular are nevoie de două lucruri pentru a știi să afișeze un șablon: lista de directive
care pot fi folosite în șablon și șablonul . Poți defini șablonul extern, folosind templateUrl ,
precum în exemplul de deasupra sau în linie.

@Component({
selector: 'talk -cmp',
directives: [FormattedRating, WatchButton, RateButton],
template: `
{{talk.title}} {{talk.speaker}}
<formatted -rating [rating]="talk.rating"></formatted -rating>
<watch -button [talk]="talk"></watch -button>
<rate -button [talk]="talk"></rate -button>
` })

3.2.3 Ciclul de viață (lifecycle)

Compopentele au un ciclu de viață foarte bine definit, în care poți intra și de care te
poți folosi. Componenta TalkCmp nu se subscrie la niciun eveniment al ciclului său de viață,
dar alte componente pot. De exemplu, aceast ă component ă va fi notificat ă când proprietățile
din input se schimb ă.

24
@Component({
selector: 'cares -about -changes'
})
class CareAboutChanges {
@Input() field1;
@Input() field2;

ngOnChanges(changes) { //.. }
}
3.2.4 Furnizori (providers)

O component ă poate conține o list ă de furnizori (providers) în component ă și copiii săi
mai pot injecta.

@Component({
selector: 'conf -app',
providers: [ConfAppBackend, Logger]
})
class TalksApp { //… }
class TalksCmp {
constructor(backend:ConfAppBackend) { //… }
}
În acest exemplu avem backend -ul și serviciile logger declarate în componenta
rădăcină, lucru care le face disponibile în întreaga aplicație. Componenta talks injectează
serviciul de back -end. Vom vorbi des pre injectarea de dependințe în detaliu în a doua parte.
Pentru moment, am arătat doar c ă o component ă configureaz ă injectarea de dependințe.

3.2.5 Elementul gazd ă (host element)

Pentru a transforma o component ă Angular în ceva ce DOM -ul poate afișa , trebuie s ă
asociem component ei Angular un element din DOM. Aceste elemente se numesc elemente
gazdă (host elements).

25
O component ă poate intracționa cu elementul său gazdă din DOM în urmatoarele feluri:
poate asculta evenimentele sale.
poate s ă-i actualizeze proprietățile.
poate invoca metode pe el.

Componenta, de exemplu, ascult ă pe evenimentele de input folosind hostsListeners,
curăță valoarea și după aceea o stocheaz ă într-un câmp. Angular va sincroniza valoarea
stocat ă cu DOM -ul.

@Component({
selector: 'trimmed -input'
})
class TrimmedInput {
@HostBinding() value: string;
@HostListener("input", "$event.target.value")
onChange(updatedValue: string) {
this.value = updatedValue.trim();
}
}
A se observa , nu interacționez cu DOM -ul direct. Angular 2 are ca scop s ă ofere un
API cu un nivel mai mare, astfel încât platforma nativ ă, DOM -ul, doar va reflecta starea
actual ă a aplicației Angular .
Acest lucru este folositor din mai multe motive:
Face componenta mai ușor de refactorizat
Permite efectuarea de unit teste pe majoritatea funcționalității aplicației, fără a
se atinge de DOM. Asemene a teste sunt ușor de scris și înteles. În plus, sunt mult mai
rapide.
Permite rularea de aplicații Angular într-un worker web.
Permite rularea de aplicații Angular complet înafara browserelor, pe alte
platforme, de exemplu, folosind NativeScript.

Câteodată ai nevoie sa interacționezi cu DOM -ul direct. Angular 2 îți ofera asemenea
API-uri, dar se dorește sa fie folosite cât mai rar posibil.

26
3.2.6 Componentele se auto -descriu (self -describing)

Ce descriu mai jos constituie o component ă:
O component ă știe cum să interacționeze cu elementul său gazdă
O component ă știe cum să se afișeze
O component ă configureaz ă inject area de dependințe
O component ă are un bine definit API public pentru proprietățile de input și
output.

Toate acestea fac ca o component ă Angular 2 sa fie auto -descris ă, pentru ca conține
toate informațiile necesare pentru a fi instanțiată. Asta este extre m de important.
Asta înseamnă ca toate componentele pot fi extrase ca și o aplicație de sine stătătoare .
Nu trebuie s ă fie special ă în niciun fel. Mai mult, orice component ă poate fi incărcată într-un
outlet router. Ca și rezulta t, poți scrie componente care pot fi extras e separat ca și o aplicație,
care pot fi încărcate ca o rută , sau folosite în alte componente direct. Din asta rezult ă un API
mai mic de învățat și de asemenea, face componentele reutilizabile.

3.2.7 Directive

Și în Angular 2 exist ă directive. Componenta este cel mai important tip de directiv ă,
dar nu singurul. O componenta este o directivă cu un șablon. Încă se pot scrie directive
decoratoare de stil, care nu au șabloane.

Figura 3.8 Componentă – Directivă

27
Pe scurt
Compnentele sunt un bloc fundamental din aplicațiile Angular 2.
Au un input și un output bine definit
Au un cilcu de viață bine definit
Se auto -descriu

3.2.8 Injectarea de dependințe

Ideea din spatele injectării de dependințe este una simpl ă. Dac ă ai o component ă care
depinde de un serviciu, nu creezi serviciul acela tu, în schimb, ceri unul în constructor și
framework -ul îți va oferi unul. Facând asta, poți depinde de interfaț ă în loc de tipuri le
concrete. Asta duce la un cod mai decuplat, care pe rmite testabilitate și alte lucruri mărețe .

Figura 3.9 Injectarea dependințelor

Angular 2 vine cu un modul de injectat dependințe. Pentru a vedea cum e folosit, ne
putem uita la următoarea component ă, care afișează lista de discușii , folosind directiv a pentru :

@Component({
selector: 'talk -list',
templateUrl: 'talks.html'
})
class TalkList {
constructor() { //..get the data }
}

28
talks.html
<h2>Talks:</h2>
<div t of talks> {{t.name}} </div>
Hai s ă mock -uim un serviciu simplu care ne va oferi datele:
class TalksAppBackend {
fetchTalks() {
return [
{ name: 'Are we there yet?' },
{ name: 'The value of values' }
];}}
Cum putem folosi acest serviciu? O abordare este sa creăm o instanță a acestui
serviciu în componenta noastr ă,
class TalkList {
constructor() {
var backend = new TalksAppBackend();
this.talks = backend.fetchTalks();
}}
Asta este ok pentru o aplicație demo, dar nu și pentru aplicații reale. Intr -o aplicație
reală, TalksAppBackend nu va returna doar un vector de obiecte, el va face și request -ul http
pentru a primi datele. Asta înseamnă c ă unit testele pentru aceast ă component ă vor face
request -uri reale http – ceea ce nu e o idee foarte grozav ă. Aceast ă problem ă e cauzat ă de
faptul c ă am legat TalkList cu TalksAppBackend și cu noul său operator.

Putem rezolva problema asta injectând o instanța a TalksAppBackend în constructor,
astfel încât să o putem înlocui ușor în teste, așa:

class TalkList {
constructor(backend:TalksAppBackend) {
this.talks = backend.fetchTalks();
}}
Aceasta îi spune lui Angular că TalksList depinde de TalksAppBackend . Acum, avem
nevoie s ă-i spunem lui Angular cum s ă creeze una, și putem face asta adăugând proprietatea
furnizori (providers) acestei componente.

29
@Component({
selector: 'talk -list',
templateUrl: 'talks.html',
providers: [TalksAppBackend]
})
class TalkList {
constructor(backend:TalksAppBackend) {
this.talks = backend.fetchTalks();
}}
Serviciul TalksAppBackend trebuie s ă fie specificat în componenta TalksList sau în
strămoșii acestuia. Deci, dac ă vrei s ă îți scrii aplicațiile în stilul Angular 1, poți configura toți
furnizorii (providers) în componenta rădăcină (root). Asta îi va fac e disponibili pentru orice
component ă din sistem.

@Component({
selector: 'talk -app',
providers: [TalksAppBackend] // registered în the root component, so it can be injected into
any component în the app.
})
class Application { }

@Component({
selector: 'talk -list'
})
class TalkList {
constructor(backend:TalksAppBackend) {
this.talks = backend.fetchTalks();
}}
3.2.9 API singur

Atât Angular 1 cât și Angular 2, vin cu modulele pentru injectarea de dependințe. Dar
în Angular 1 avem mai multe API -uri pentru a injecta dependințe în directive: unele obiecte
sunt injectate dup ă poziție , altele dupa nume. Este puțin confuz ă treaba. Angular 2, vine cu un

30
singur API pentru injectarea de dependințe. Toate sunt injectate în constructo rul componentei.

De exemplu, aceast ă component ă injecteaz ă o instanță a TalksAppBackend (care este
foarte posibil s ă fie un singleton), și un ElementRef , care este unic pentru fiecare component ă.

class TalksList {
constructor(elRef:ElementRef, backend: TalksAppBackend) { }
}
Deci folosim același API pentru a injecta global și local dependințe în componente.
Mai mult de atât, o componentă poate injecta alte componente folosind același API:

class Component {
constructor(ancestor:AncestorCmp) { } }

Pe scurt
Injectarea de dependințe este unul din acele feature -uri la care nu le vezi beneficiul din
prima. Dar cu cât crește mai mult aplicația ta, cu atât mai important ă devine.

Îți permite s ă depinzi de interfețe , nu de tipuri concrete
Din asta rezultă un cod mai decuplat
Asta crește /îmbunătățește testabilitatea
Angular 2 are un singur API pentru injectarea de dependințe

3.2.10 Legarea de proprietăți (property binding)

Angular folosește property binding pentru a sincroniza automat arborele de componente
cu modelul, și DOM -ul cu arborele de componente. Pentru a înțelege de ce este important
acest lucru, ne putem uita încă o dat ă la aceast ă aplicație , în figura 3.1 0.

31

Figura 3.10 View -ul aplica ției

Știm c ă aceast ă aplicație va avea un arbore de componente. În plus, pe lang ă acest
arbore, va avea și un model . Putem spune ca este un simplu obiect JavaScript care arat ă așa:
{
"filters": { "speaker": "Rich Hickey" },
"talks": [{
"title": "Are we there yet?",
"speaker": "Rich Hickey",
"yourRating": null,
"avgRating": 9.0
}]
}
Acum, imagineaz ă-ți că un eveniment schimb ă modelul. S ă spunem că am văzut
aceast ă discuție , chiar mi -a placut, și i-am dat nota 9,9.
{
"filters": { "speaker": "Rich Hickey" },
"talks": [{
"title": "Are we there yet?",
"speaker": "Rich Hickey",
"yourRating": null,
"avgRating": 9.9
} ]}

32
Dacă ar trebui sa găsesc toate locurile care depind de aceast ă nouă valoare și s -o
actualizez manual, ar fi o munc ă obositoare și predispus ă la erori. Vreau ca aplicația să
reflecte aceast ă modificare automat. Pentru asta sunt property bindings .

La finalul VM, Angular va verifica fiecare componentă din arbore le de componente.
Mai specific, va verifica fiecare property binding s (fiecare paranteza dreapt ă, fiecare pereche
de acolade), și va actualiza componentele. Va actualiza și DOM -ul pentru a reflecta starea
actual ă a arborelui de componente.
Doar pro prietăți le de intrare ale compo nentei pot fi actualizate folosind property bindings.

3.2.11 Zone

În Angular 1 trebuie sa îi spui specific framework -ului c ă trebuie s ă ruleze aceast ă
verificare fă când scope.$apply . Nu trebuie sa ne facem griji pentru asta în Angular 2.
Angular 2 folosește Zone, pentru a știi când trebuie s ă ruleze aceast ă verificare. Asta
înseamnă că nu e nevoie să apelezi scope.$apply pentru a integra librării third -party.

Pe scurt
Angular 2 folosește property bindings pentru a sincroniza arborele de
componente cu modelul, și DOM -ul cu arborele de componente.
Angular 2 folosește Zone pentru a știi când s ă facă asta.

Scurtă recapitulare

Directivele, și în particular componentele, sunt cele mai importante părți ale Angular .
Sunt blocurile fundamentale pentru constru cția aplicațiilor Angular 2. Sunt auto -descriptive.
Își descriu API -ul public, care sunt input -urile și output -urile. Își descriu API -ul privat,
care reprezint ă hook -urile pe ciclul ul de viață al componentei, și cum interacționeaz ă acestea
cu elementul gazdă. Unele componente vor depinde de alte componente și servicii. Modulul
pentru injectarea de dependințe va oferi acestea. El va construi arborele de com ponente , care
este nucleul orică rei aplicații Angular 2. În final, property bindings și zonele, fac aplicațiile
Angular 2 interactive.
Acestea sunt blocurile de baz ă care formeaz ă nucleul Angular 2. Dacă se înțeleg aceste

33
concepte, e suficient ca s ă poți începe cu Angular 2, dar pentru construirea unei aplicații reale
va fi nevoie de puțin mai mult decât atât. [13]

3.3 Team Foundation Server

Team Foundation Server (TFS) este un produs Microsoft care oferă un management
de cod sursă (fie cu Team Foundation Versiunea de Control sau Git), raportare,
managementul cerințelor de management de proiect, automated builds, de management de
laborator, de testare și de release management capabilities. Acesta acoperă întregul ciclu de
viață al aplicației, și permite DevOps capabilities. TFS poate fi folosit ca un back -end a
numeroase medii de dezvoltare integrate (IDE), dar este adaptat pentru Microsoft Vis ual
Studio și Eclipse pe toate platformele. [14]

3.4 Git

Git este un sistem revision control pentru platforma UNIX . Ca și Mercurial , Git este
un sistem distribuit și nu întreține o bază de date comună. Este folosit în echipe de dezvoltare
mari, în care membrii echipei acționează oarecum independent și sunt răspândiți pe o arie
geografică mare. [15]
În mod curet, Git este dezvoltat și întreținut de Junio Hamano. Git este publicat sub
licență GPL și este considerat software liber . [15]

În aplica ția mea am folosit Git pentru a -mi versiona fișierele create, astfel având
posibilitatea de a reveni la o versiune stabilă, lucru care s -a dovedit a -mi fi extrem de
folositor.

3.5 Bootstrap

Bootstrap a fost creat de un designer și developer la Twitter, devenind unul din cele
mai populare front -end framework -uri și proiect open source din lu me.
La creare, în 2010, Bootstrap a fost cunoscut ca și Twitter Blueprint, înainte de a
deveni open source. A fost implementată funcționalitatea “responsive” în versiunea Bootstrap
2, întregului framework, într -un stylesheet opțional. Odată cu versiunea B ootstrap 3 a fost
rescrisă întreaga librărie încă o dată, pentru a adăuga funcționalitatea “responsive” și pentru

34
mobile, pentru prima dată. [16]

În aplicația mea am folosit din Bootstrap funcționalitațile care ajută la formatarea
elementelor de formular și cele care ajută la crearea unei interfețe responsive.

35
4. Tipuri de software utilizate în realizarea aplicației

4.1 Visual Studio 2015

Visual Studio îți permite să scrii cod cu acuratețe și eficient fără să pierzi contextul fișierului
în care lucrezi. Foarte ușor poți să vezi în detaliitle stucturii de call, funcțiile asociate, check -in-uri și
statusul testelor. [17]
Caracteristici :
IntelliSense – în timp ce tastezi se face autocomplete, acesta sporing viteza și
acuratețea.
Filtrul dezvoltat GoTo te ajută să găsești cu ușurință codul.
Find All References te ajută să grupezi, să filtrezi și să cauți înăuntrul rezultatelor.
Icoanele light bulb te ajută să identifici și să repari codul cu probleme. [18]

4.2 Visual Studio Code

Visual Studio Code este un editor source code dezvoltat de Microsoft.
Acesta include support pentru debugging, embedded Git control, sintax ă de
evidențiere, compilare de cod inteligentă cât și refactorizare de cod.
Este customizabil. Utilizatorul poate să își schimbe tema editorului, scurtături la taste
și preferințele.
Suportă diferite limbaje de programare și un set de caracteristici. Acestea pot fi găsite
în meniu sau pot f i instalate. [19]
Caracteristici Limbaje
Syntax
highlighting Batch , C++, Clojure , CoffeeScript , DockerFile , Elixir , F#, Go, Pug template
language, Java, HandleBars , Ini, Lua, Makefile , Objective –
C, Perl, PowerShell , Python , R, Razor , Ruby , Rust, SQL, Visual Basic , XML
Snippets Groovy , Markdown , Nim, PHP, Swift

36
Intelligent code
completion CSS, HTML , JavaScript , JSON , Less, Sass, TypeScript
Refactoring C#, TypeScript
Debugging  JavaScript and TypeScript for Node.js projects
 C# and F# for Mono projects on Linux and macOS
 C and C++ on Windows , Linux and macOS
 Python with Python plug -in installed
 PHP with XDebug and PHP Debug plug -in installed

Tabel 4 .1 Caracterisiti Visual Studio Code

4.3 SQL Workbench

Este scris în Java și ar trebui să ruleze pe orice sistem de operare care suportă
JRE(Java Runtime Environment). Scopul principal este să ruleze scripturi SQL, fie interactive
sau statice, și să importe/exporte caracteristici. [20]
Caracteristici:
Editează, inserează și șterge date direct din rezultatele interogărilor
Compară două scheme ale bazelor de date pentru a identifica diferențele
Compară datele din două baze de date și generează codul SQL necesar pentru
migrarea datelor dintr -o bază în alta
Auto -completare pentru tabele și coloane în codurile SQL
Afișează obiectele bazei de date și definițiile acestora
Afișează sursa tebelei
Afișează legat urile între cheile dintre tabele
Etc.

Acest program l -am folosit pentru a crea design -ul bazei de date și pentru a vizualiza
grafic relațiile existente între tabele.

37
5. Studiul comparativ între cele două framework -uri

Angular 1 a ajutat foarte mult dezvolatorii web în a crea rapid aplicații CRUD prin
furnizarea de caracteristici cum ar fi legarea în două sensuri. Prin aceasta timpul de dezvoltare
s-a redus și nu a fost nevoie de manipularea DOM -ului prin selectorii de interogă ri, cum ar fi
librăria jQuery.

Angular 2 este foarte diferit de Angular 1 în ceea ce privește limbajul în care a fost
scris (Typescript), fiind unul dintre cele mai importante caracteristici, mecanismul de
detectare a schimbării din bucla de digestare în Angular 1 până la o implementare
particularizată prin utilizarea zoneiJ în Angular 2.

Angular 1 a redus timpul/efortul de dezvoltare și a furnizat module de integrare pentru
noile caracteristici ușor, însă a dus la o procesare pe partea de client și încar carea de pagini
mai mare. Pentru o aplicație Angular 1 + jQuery, faza de scripting în arborele de apel pentru
funcții dura destul de mult.

Angular 2 a încercat să rezolve problema prin furnizarea un mecanism de detectare a
schimbării și o structurare mai bună de creare/menținere pentru aplicațiile mari.
Cu randarea pe partea de server, inițialul request încarcă pagina, șablonul, css -ul, javascript -ul
și conținutul. Pentru actualizarea paginii, randarea părții de client repetă aceeași pași care i -a
folosit pentru a lua conținutul inițial. Javascriptul este folosit pentru a lua datele JSON și
șabloanele sunt utilizate pentru a crea HTML -ul. [21]

În aplicația noastră randarea pe partea de server pentru Angular 2 va include
compilarea șabloanelor și apelurile AJAX făcute pe partea de server.

Am creat o aplicație manager de contacte atât în Angular 1 cât și în Angular 2.
Aplicația va avea câteva contacte create și îi va permite utilizatorului să adauge, să
editeze și să șteargă contacte.
Acest studiu (prezentat in tabelul …) va compara diferența de performanță dintre
Angular 1 și Angular 2 în ceea ce privește : timpul de încărcare a unei pagini, dimensiunea

38
memoriei, numărul de noduri DOM create, mărimea fișierelor incluse cât și o comparație între
rapoartele de timeline, profile și taburile de rețea ale chrome dev tools pentru o simplă
aplicație creată atât în Angular 1 cât și în Angular 2.

În url este o op țiune pentru a furniza un parametru, no_of_contacts ca să furnizeze
dinamic numărul de contacte din aplicație generate. Vom prezenta în tabelul 5.1 rezultatele
performanței pentru 500 de contacte.

Angular 2 Angular 1
a. Dimensiunea aplicațieri (html+JS) 342.8KB 77.9KB
b. Dimensiunea memoriei 27.8MB 18.6MB
c. Timpul total de încărcare 2530ms 3470ms
d. Pa gina vizibilă la un moment dat 1250ms 3500ms
e. Noduri DOM 24K – 72K 25K – 49K
f. Timpul de scriptare /
Timpul total – (%) 51.9%(1315ms) 76.6%(2661ms)
g. Timpul de randare/
Timpul total – (%) 26.5%(672ms) 9.5%(331ms)

Tabel 5 .1 Rezultatele performanței

Detalii despre mediul de configurare :
OS: macOS Sierra
Browser: Chrome
Angular 1 stack: gulp (for bundling), node -express (for serving files)
Angular 2 stack: Angular -universal starter kit (Webpack, node -express etc.)
NGINX: enabled gzip compression
a) Dimensiunea aplica ției
Aceasta decide timpul de descărcare a fișierelor de către browser, jucând un rol
important, în special când mărimea aplicației devine foarte mare sau când utilizatorii au o
conexiune de internet foar te înceată. F igurile 5.1 și 5.2 sunt din tabul de rețea al chrome dev
tools, ia r dimendiunea aplicației din tabelul 5.1 a fost calculată prin adăugarea fișierelor HTML

39
și JS. Din moment ce HTML -ul este compilat pe server în cazul Angular 2, dimendiunea
acestuia are un rol important. Întrucât în cazul Angular 1, șabloanele sunt prelua te de un apel și
compilarea șabloanelor prin depunerea datelor preluate în șabl on se face pe partea clientului,
figurile 5.3 și 5.4.
Dimensiunea aplicației pentru Angular 2 = 5.8KB (HTML) + 337KB (index.js)
Dimensiunea aplicației pentru Angular 1 = ~2KB(HT ML) + (52.6+12+9.4+1.9)KB

Figura 5.1 Angular 2 tabul de rețea

Figura 5.2 Angular 1 tabul de rețea

40

Figura 5.3 Angular 2: HTML -ul vine compilat de server

Figura 5.4 Angular 1 este partial primit și este compilat pe partea de client
Un alt lucru de observant in tabul de rețea este că niciun apel AJAX este făcut pentru
Angular 2 din moment ce același apel a fost făcut pe partea de server.

41
b) Dimensiunea memoriei

Tab-ul de profile va afi șa distribuția memoriei de că tre obiectele paginii Javascript ș i
nodu rile legate de DOM. Citirile atâ t pentru Angular 1 cât și pentru Angular 2 arat ă bine
pentru aplicaț ia aceasta ; putând fi vizualizate în figurile 5.5 și 5.6.

Figura 5.5 Angular 2 memoria

Figura 5.6 Angular 1 memoria

42
c) Timpul total de încă rcare

Timpul total de încărcare este însumarea încă rcarii, script ării, a randă rii, des enarea,
timpul de inactivitate și multe altele, și este afiș at în partea de jos a tab -ului de cronologie. Se
poate vedea in diagrama de tip placintă î n figurile 5.7 și 5.8 .

Figura 5.7 Angular 2 tabul de timeline

43

Figura 5.8 Angular 1 tabul de timeline

d) Pagina vizibilă la un moment dat

Angular 2 este clar câș tigătorul aici, încâ t apelul HTTP și randarea HTML este făcută
pe server. Pagina vi zibilă la un moment dat, este timp ul la care pagina este randata împreună
cu imaginile ș i prima previzualizare este vizibilă utilizatorului. Pentru a determina
asemanarea, screenshot -urile din tab -ul de cronologie pot fi referite .

Nu este necesar ca atun ci când pagina devine vizibilă, toate legăturile pe evenimentele
să fie complete. Dacă ne referim la diagrama de tip foc , figurile 5.9 și 5.10 , atunci va fi clar că
funcț iile ca și runTask , invokeTask ale zoneJS și subscripția , apelul de la Rx JS a început
legarea ascultă torilor (listeners) dup ă ce partea vizuală a fost randată de Angular 2.

44

Figura 5.9 Angular 2 diagrama foc

Figura 5.10 Angular 1 diagrama foc

Dacă ne reverim la diagrama de tip foc a Angular 1, figura 5.10, marea parte a
timpului și a stack -ului este utilizată de cilclul de digestie (digest cycle).

45
e) Nodurile DOM

Acestea sunt un factor important, încât compilarea internă a ș abloanelor de c ătre un
motor de ș ablonare, de obicei i nserează câteva elemente HTML în plus. Cu câ t e mai “slab”
nodul element, cu atât e mai ușor arborele DOM, cu atâ t mai bine.

f) Timpul de scripting

Timpul de scripting ne dă o idee despre câ t timp are nevoie browserul pentru a
citi/procesa scripturile.

Timpul de scriptare și ra ndare au fost date în termeni de procente în citirile din tabel,
întrucât ne permite să determinăm și să concludem că pentru Angular 2, partea majoră de
lucru facută de catre browser este randarea view -ului.

În cazul Angular 2, deoarece HTML vine precompilat ș i apelurile Ajax sunt
deasemenea fă cute pe serverul nostru, n u este petrecut prea mult timp în scriptare ș i la fel cum
se poate observa ș i in tab -ul de timeline, de îndată ce fiș ierul HTML este primit, randarea
începe. Odată ce randarea este f acută, citirea scripturilor î ncepe, ceea ce face treaba de
legatur ă dintre elementele afișate cu ascultă torii (listeners) lor.

În cazul Angular 1, primul script este primit și procesat, după care se face apelul
AJAX, și câ nd datele sunt primite, sunt pune în șabloane HTML ș i sunt parsate pentru a crea
view -ul, ă ntre acestea, fac e request -urile pentru imagini și după ce sunt gata și primite,
imaginile sunt afisște î n view.

g) Timpul de randare

În faza de randare, browserul își face treaba și randează (afișează) HTML -ul creat î n
view.
Astfel încâ t pentru citirile de mai sus, Angular 2 este clar câștigătorul, fiind peste
Angular 1 în termeni de performanță, dar poate fi ș i pentru serviciul oferit de Angular 2, și
anume randarea pe partea de server. [22]

46
Concluzii

Trecerea de la Angular 1 la Angular 2 poate să fie o adevărată provocare din mai
multe puncte de vedere, printre care amintim necesitatea studierii cu atenție a tehnologiilor și
găsirea soluției optime pentru aplicația respectivă. Deorece în f uncție de versiunea Angular 1,
migrarea la Angular 2 poate fi mai dificilă sau nu.
Angular 2 este mai ușor de învățat și mult mai transparent pentru developer, integrarea
cu librării 3rd party fiind ma i mult mai îmbunătățită decât Angular 1.
Pentru aplicația de față, și anume managerul de contacte , cel mai potrivit framework a
fost Angular 2. Deoarece o astfel de aplicație are în mod obișnuit mii de utilizatori, sau chiar
zeci de mii, Angular 2 a oferit cea mai bună soluție în ceea ce privește viteza cu care se
realizează diversele operații.
Avantajul folosirii framework -ului Angular 2 a fost evidențiat și mai mult prin
realizarea testelor și interpretarea rezultatelor acestora, care a u fost prezentate în capitolul 5 al
acestei lucrări. Angular 2 a oferit timpi de încărcare mult mai mici față de Angular 1, lucru
care este esențial atunci când o aplicație trebuie să ofere suport simultan pentru mii de
utilizatori.
Un alt avantaj al Angular 2 este că acesta este orientat spre mobile, ceea ce la A ngular
1 îi lipsește.
Recent a apărut și Angular 4 care îmbunătățește și mai mult performanța adăugând noi
caracteristici, fiind mai compact și mai rapid.

47
Bibliografie

[1] HTML 5, http://ro.wikipedia.org/wiki/HTML5 , 27 mai 2017
[2] Introducere in html 5 , http://ctrl -d.ro/development/resurse -development/introducere -in-
html5 -partea -i/, 27 m ai 2017
[3] http://www.codebox.ro/forum/Thread -curs-css3-partea -i, 27 mai 2017
[4] Introducere in css 3 , http://ctrl -d.ro/development/resurse -development/introducere -in-css3-
proprietati/ , 27 mai 2017
[5] http://www.marplo.net/curs_css/introducere.html , 27 mai 2017
[6] http://vega.unitbv.ro/~cataron/Courses/BD/BD_Cap_5.pdf , 27 mai 2017
[7] SQL , http://ro.wikipedia.org/wiki/SQL , 27 mai 2017
[8] JavaScript , http://ro.wikipedia.org/wiki/JavaScript , 27 mai 2017
[9] JavaScript , http://vechi.upg –
ploiesti.ro/col/ldumitrascu/pdf/JAVASCRIPT/JAVASCRIPT.pdf , 27 mai 2017
[10] TypeScript , https://en.wikipedia.org/wiki/TypeScript , 27 mai 2017
[11] https://docs. Angular js.org/guide/introduction , 28 mai 2017
[12] Conceptul O verview , https://docs. Angular js.org/guide/concepts# , 29 mai 2017
[13] The Core Concepts of Angular, Victor Savkin , 2016, https://vsavkin.com/the -core-
concepts -of-Angular -2-c3d6cbe04d04 , 30 mai 2017
[14] Team Foundation Server , https://en.wikipedia.org/wiki/Team_Foundation_Server , 1
iunie 2017
[15] Git, http://en.wikipedia.org/wiki/Git , 1 iunie 2017
[16] Bootstrap , http://getbootstrap.com/about/ , 1 iunie 2017
[17] Visual Studio , https://www.visualstudio.com/vs/ , 1 iunie 2017
[18] Visual Studio , https://www.visualstudio.com/vs/ide/ , 1 iunie 2017
[19] Visual Studio Code , https://en.wikipedia.org/wiki/Visual_Studio_Code , 1 iunie 2017
[20] https://www.apachefriends.org/ro/about.html , 1 iunie 2017
[21] Karl Seguin, Client -Side vs. Server -Side Rendering , 2016,
http://openmymind.net/2012/5/30/Client -Side-vs-Server -Side-Rendering/ , 1 iunie 2017
[22] Siddharth Sharma , Performance comparison of AngularJs 1.x and AngularJs 2 through
contacts manager application , 2016 , https://hackernoon.com/performance -comparison -of-
Angularjs -1-x-and-Angularjs -2-throug h-contacts -manger -application -ccb5f00f29b1 , 2 iunie
2017

48
Declarație de autenticitate a lucrării de finalizare a studiilor

Titlul lucrării: Studiu comparativ între framework -urile Angular 1 și Angular 2
Autorul lucrării: Pop Denisa Amalia

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului
de finalizare a studiilor organizat de către Facultatea de Inginerie Electric ă și
Tehnologia Informației din cadrul Universității din Oradea, sesiunea 2017 a
anului universitar 2016 /2017.
Prin prezenta, subsemnata Pop Denisa Amalia, 2920606055095, declar pe
proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un
ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de
caz publicate de al ți autori.
Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte
surse folosite fără respectarea legii române și a convențiilor internaționale
privind drepturile de autor.

Oradea,
Data Semnătura