Sunteți pe pagina 1din 3

Curs 1 - AngularJS

AngularJS este un framework (librarie extinsa) JavaScript foarte puternic. Se utilizează în proiectele cu o singură pagină (SPA - Single Page Application). Acesta extinde HTML DOM cu atribute suplimentare facandu-l mai receptiv la acțiunile utilizatorului. AngularJS este open source, complet gratuit și folosit de mii de dezvoltatori din întreaga lume. AngularJS oferă dezvoltatorilor opțiuni de scriere a aplicației de pe partea clientului (folosind JavaScript) într-un mod curat MVC (Model View Controller).

Cerințe preliminare

Cursantul de AngularJS ar trebui să aibe o înțelegere de bază a JavaScript și a oricărui editor de text. Pe măsură ce vom dezvolta aplicații web bazate pe AngularJS, este necesar să aveți o înțelegere a altor tehnologii web precum HTML, CSS, AJAX și PHP/MySQL.

Caracteristici principale

Urmatoarele sunt cele mai importante caracteristici principale ale AngularJS :

Legarea datelor (Data-binding)- este sincronizarea automată a datelor între componente și componente de vizualizare.

Domeniu de aplicare (Scope)- Acestea sunt obiecte care se referă la model. Ele acționează ca un adeziv între controler și vedere.

Controller - Acestea sunt funcții JavaScript care sunt legate de un anumit domeniu de aplicare.

Servicii - AngularJS vin cu mai multe servicii încorporate, spre exemplu $https: pentru a face un XMLHttpRequests. Acestea sunt obiecte singleton care sunt instanțiate o singură dată în app.

Filtre - Acestea selectează un subset de elemente dintr-un matrice și returnează un nou tablou.

Directive - directivele sunt markeri pentru elementele DOM (cum ar fi

elemente, atribute, css și multe altele). Acestea pot fi folosite pentru a crea etichete personalizate HTML care servesc ca widget-uri noi, personalizate.

AngularJS are directive încorporate (ngBind, ngModel

)

Șabloane (Template-uri)- Acestea sunt vizualizarea redată cu informații de la controler și model. Acestea pot fi un singur fișier (ca index.html) sau mai multe vizualizări într-o singură pagină utilizând "partials".

Routing - Este un concept de schimbare a vederilor.

Curs 1 - AngularJS

Orice cu Model View - MVC este un model de proiectare pentru împărțirea unei aplicații în diferite părți (numite Model, View și Controller), fiecare cu responsabilități distincte. AngularJS nu implementează MVC în sensul tradițional, ci mai degrabă ceva mai aproape de MVVM (Model-View- ViewModel).

Legare în Adâncime

- legarea în adâncime vă permite să codificați starea

de aplicație în URL, astfel încât să poată fi marcată. Aplicația poate fi apoi restaurată din URL în aceeași stare.

Dependența de injecție - AngularJS are un subsistem de injecție de dependență încorporat care ajută dezvoltatorul, făcând aplicația mai ușor de dezvoltat, înțeleasă și testată.

dependență încorporat care ajută dezvoltatorul, făcând aplicația mai ușor de dezvoltat, înțeleasă și testată.

Curs 1 - AngularJS

Componentele AngularJS

Cadrul AngularJS poate fi împărțit în următoarele trei părți principale:

ng-app - Această directivă definește și leagă o aplicație AngularJS la HTML.

ng-model - Această directivă leagă valorile datelor de aplicație AngularJS la comenzile de intrare HTML.

ng-bind - Această directivă leagă datele aplicației AngularJS de tagurile HTML.

<!doctype html>

<html>

<title>AngularJS – Prima Aplicație</title> </head>

<body> <div ng-app = ""> <label>Nume:</label> <input type = "text" ng-model = "numeleDvs" placeholder = "Cum va numiti?"> <hr />

<h1>Bun venit <span ng-bind = "numeleDvs"></span>!</h1> </div>

</body>

</html>

Cum se integrează AngularJS cu HTML:

(1) ng-app - este directiva ce indică începutul aplicației AngularJS. (2) ng-model - directiva ce creează apoi o variabilă de model numită "numeleDvs" care poate fi utilizată cu pagina HTML și în cadrul div-ului cu directiva ng-app. (3) ng-bind - directiva ce va utiliza apoi modelul de nume pentru a fi afișat în eticheta html span ori de câte ori utilizatorul introduce ceva în caseta de text.

Eticheta de închidere </ div> indică sfârșitul aplicației AngularJS.