AngularJS

Versiunea actuală a paginii nu a fost încă examinată de colaboratori experimentați și poate diferi semnificativ de versiunea revizuită pe 4 mai 2022; verificările necesită 5 modificări .
AngularJS
Tip de framework , biblioteca JavaScript și biblioteca de funcții
Dezvoltator Google
Scris in JavaScript [1]
Prima editie 20 octombrie 2010
Platformă hardware platforma web
ultima versiune
Licență Licență MIT [4] [5]
Site-ul web angularjs.org
 Fișiere media la Wikimedia Commons

AngularJS  este un cadru JavaScript open source . Conceput pentru dezvoltarea aplicațiilor cu o singură pagină [6] . Scopul său este de a extinde aplicațiile browser bazate pe modelul MVC , precum și de a simplifica testarea și dezvoltarea.

Cadrul funcționează cu HTML care conține atribute personalizate suplimentare, care sunt descrise de directive și leagă intrarea sau ieșirea zonei paginii la un model care este variabile JavaScript obișnuite. Valorile acestor variabile sunt setate manual sau preluate din date JSON statice sau dinamice.

Istoricul dezvoltării

AngularJS a fost dezvoltat în 2009 de Misko Heveri și Adam Abrons la Brat Tech LLC ca software-ul din spatele unui serviciu de stocare JSON de megaocteți pentru a facilita dezvoltarea aplicațiilor de întreprindere. Serviciul a fost găzduit pe domeniul „GetAngular.com” și avea mai mulți utilizatori înregistrați înainte de a decide să abandoneze ideea de afaceri și să lanseze Angular ca bibliotecă open source.

Abrons a părăsit proiectul, dar Heveri, care lucrează la Google , a continuat să dezvolte și să întrețină biblioteca împreună cu colegii Google Igor Minar și Voita Jin.

În martie 2014, a fost anunțată dezvoltarea AngularJS 2.0 [7] . Noua versiune a fost scrisă de la zero în TypeScript și era foarte diferită de cea anterioară, așa că ulterior s-a decis să o dezvolte ca un cadru separat numit Angular . Angular 2 a fost lansat pe 15 septembrie 2016 [8] , în timp ce prima versiune a continuat să fie dezvoltată separat ca AngularJS.

În aprilie 2022, odată cu lansarea celei mai recente versiuni 1.8.3, suportul pentru AngularJS a fost întrerupt oficial. [9]

Filosofia Angularului

AngularJS este conceput cu convingerea că programarea declarativă este cea mai bună pentru construirea de interfețe cu utilizatorul și pentru descrierea componentelor software [10] , în timp ce programarea imperativă este excelentă pentru descrierea logicii de afaceri [11] . Cadrul adaptează și extinde HTML tradițional pentru a oferi legături de date bidirecționale pentru conținutul dinamic, permițând sincronizarea automată a modelului și vizualizării. Ca rezultat, AngularJS reduce rolul manipulării DOM și îmbunătățește testabilitatea.

Obiectivele de dezvoltare

Angular urmează modelul de design MVC și încurajează cuplarea slabă între prezentare, date și logica componentelor. Folosind injecția de dependență , Angular aduce servicii clasice pe partea de server, cum ar fi controlere dependente de vizualizare, în partea clientului. În consecință, sarcina de pe server este redusă și aplicația web devine mai ușoară.

Directive Angular încorporate populare

Cu directivele AngularJS, puteți crea etichete și atribute HTML personalizate pentru a adăuga comportament anumitor elemente. [paisprezece]

ng-app Declara elementul ca element rădăcină pentru aplicație. [cincisprezece] ng-bind Înlocuiește automat textul unui element HTML cu valoarea expresiei transmise. ng-model La fel ca ng-bind, oferă numai legare de date în două sensuri. [16] Conținutul elementului se va schimba - unghiular va schimba și valoarea modelului. Valoarea modelului se va schimba - unghiular va schimba textul din interiorul elementului. ng-clasa Definește clase pentru încărcarea dinamică. ng-controller Definește un controler JavaScript pentru evaluarea expresiilor HTML conform MVC. [17] ng-repeat Creează o instanță DOM pentru fiecare element din colecție. [optsprezece] ng-show și ng-hide Afișează sau ascunde elementul, în funcție de valoarea expresiei booleene. ng-switch Creează o instanță a unui șablon dintr-un set de opțiuni, în funcție de valoarea expresiei. ng-view Directiva de bază este responsabilă pentru gestionarea rutelor [19] care acceptă JSON înainte de a reda șabloanele conduse de controlerele specificate. ng-dacă Îndepărtează sau creează o parte a arborelui DOM în funcție de valoarea unei expresii. Dacă valoarea expresiei atribuită lui ngIf este falsă, elementul este eliminat din DOM, în caz contrar elementul nou clonat este inserat în DOM. [douăzeci]

De asemenea, este posibil să creați directive personalizate, inclusiv folosind șabloane în eticheta de script. [21] [22]

Legarea bidirecțională a datelor

Legarea bidirecțională a datelor în AngularJS este cea mai notabilă caracteristică: reduce cantitatea de cod eliberând serverul de a se ocupa de șabloane. În schimb, șabloanele sunt redate ca HTML simplu, umplute cu date conținute într-un domeniu definit în model. Serviciul $scopedin Angular urmărește modificările în model și modifică secțiunea de expresie HTML a vizualizării prin controler. De asemenea, orice modificare a vizualizării se reflectă în model. Acest lucru ocolește necesitatea manipulării DOM și facilitează inițializarea și prototiparea aplicațiilor web [23] .

Plugin pentru Chrome

În iulie 2012, echipa Angular a lansat un plugin pentru browserul Google Chrome numit Batarang [24] care facilitează depanarea aplicațiilor web construite pe Angular. Extensia facilitează detectarea blocajelor și oferă o interfață grafică pentru depanarea aplicațiilor [25] .

Comparație cu Backbone.js

Backbone.js  , o bibliotecă JavaScript bazată pe modelul de design Model-View-Presenter (MVP), are capabilități similare pentru dezvoltarea de aplicații web cu suport pentru o interfață JSON RESTful . Backbone este o bibliotecă foarte ușoară (comprimată și comprimată cu gzip în dimensiunea de ~6,3 KB), dar necesită ca biblioteca Underscore.js să funcționeze și pentru a suporta API-ul REST și a lucra cu elemente DOM, se recomandă includerea unui jQuery- cum ar fi biblioteca: jQuery sau Zepto. Backbone.js a fost creat de Jeremy Ashkenas , care este cunoscut și ca creatorul CoffeeScript .

Cu toate acestea, există și diferențe semnificative:

Legarea datelor Cea mai importantă caracteristică care separă bibliotecile este modul în care modelul și vizualizarea sunt sincronizate. În timp ce AngularJS acceptă legarea de date în două sensuri, Backbone.js se bazează în mare măsură pe codul standard pentru a lega modelul și vizualizarea [26] . ODIHNĂ Backbone.js acceptă bine backend -ul RESTful . De asemenea, este foarte ușor să lucrați cu API-uri RESTful în AngularJS folosind serviciul $resource. În același timp, AngularJS are un serviciu $http mai flexibil care se conectează la servere la distanță folosind obiectul XMLHttpRequest al browserului sau prin JSONP [27] . Șabloane AngularJS folosește o combinație de etichete și expresii HTML personalizate ca șablon [28] . Backbone.js folosește diverse motoare de șabloane, cum ar fi Underscore.js [26] .

Vezi și

Note

  1. Proiectul angularjs Open Source pe Open Hub: Pagina de limbi - 2006.
  2. Versiunea 1.8.3 - 2022.
  3. 1.8.3 ultima revedere (07.04.2022)
  4. angular.js/LICENSE la master angular/angular.js GitHub
  5. Proiectul angularjs Open Source pe Open Hub: Pagina de licențe - 2006.
  6. Aplicație cu o singură pagină folosind AngularJs. Tutorial . Data accesului: 6 noiembrie 2016. Arhivat din original pe 7 noiembrie 2016.
  7. AngularJS 2.0 . Preluat la 14 august 2015. Arhivat din original la 25 august 2015.
  8. Angular, versiunea 2: propriocepție-întărire . angularjs.blogspot.ru. Consultat la 13 octombrie 2016. Arhivat din original la 12 octombrie 2016.
  9. unghiular  . _ npm . Preluat: 22 octombrie 2022.
  10. Înțelegerea componentelor . Data accesului: 20 octombrie 2016. Arhivat din original pe 20 octombrie 2016.
  11. Ce este Angular? . Consultat la 12 februarie 2013. Arhivat din original pe 20 mai 2013.
  12. Testarea unitară . Consultat la 20 octombrie 2016. Arhivat din original pe 17 octombrie 2016.
  13. Testarea E2E . Consultat la 20 octombrie 2016. Arhivat din original la 12 aprilie 2017.
  14. Scriem o directivă simplă
  15. ngApp . Data accesului: 6 noiembrie 2016. Arhivat din original pe 22 octombrie 2016.
  16. Legarea datelor . Consultat la 6 noiembrie 2016. Arhivat din original la 3 ianuarie 2015.
  17. Copie arhivată . Consultat la 6 noiembrie 2016. Arhivat din original la 20 octombrie 2016.
  18. Directiva ngRepeat din modulul ng . Consultat la 6 noiembrie 2016. Arhivat din original la 20 octombrie 2016.
  19. Component Router . Consultat la 20 octombrie 2016. Arhivat din original pe 21 octombrie 2016.
  20. ngIf Angular docs . Consultat la 6 noiembrie 2016. Arhivat din original la 20 octombrie 2016.
  21. Tutorial AngularJS: Ghid cuprinzător. Partea 2. (Directive personalizate). . Consultat la 27 noiembrie 2016. Arhivat din original pe 28 noiembrie 2016.
  22. Șabloane în directive
  23. 5 caracteristici minunate AngularJS . Consultat la 13 februarie 2013. Arhivat din original pe 20 mai 2013.
  24. Pagina de pornire Batarang . Consultat la 12 mai 2013. Arhivat din original la 10 februarie 2015.
  25. AngularJS: Prezentarea AngularJS Batarang . Consultat la 12 mai 2013. Arhivat din original la 2 februarie 2018.
  26. 1 2 Backbonejs vs Angularjs: Demistificarea miturilor (downlink) . Consultat la 13 februarie 2013. Arhivat din original pe 20 mai 2013. 
  27. Cadre Javascript și legare de date (link descendent) . Consultat la 13 februarie 2013. Arhivat din original pe 20 mai 2013. 
  28. directivă de script în modulul ng . Data accesului: 27 noiembrie 2016. Arhivat din original pe 27 noiembrie 2016.

Literatură

Link -uri