Ce este AngularJS? ArchiTextură, caracteristici și avantaje

Ce este AngularJS?

AngularJS este un framework Model-View-Controller open-source scris în JavaScenariuAngularJS a fost unul dintre cele mai populare framework-uri web din anii 2010 și este folosit pentru dezvoltare.ping în mare parte aplicații cu o singură pagină. Acest framework a fost dezvoltat de un grup de dezvoltatori din Google însăși.

Datorită sprijinului absolut al Google și cu idei provenite de la un forum comunitar extins, framework-ul a fost menținut actualizat pe tot parcursul existenței sale active. De asemenea, a încorporat principalele tendințe de dezvoltare din acea perioadă, motiv pentru care atât de mult cod de producție rulează încă pe acesta și astăzi.

Un aspect terminologic merită rezolvat din timp. AngularJS este descris pe scară largă ca un framework MVC, ceea ce reprezintă un punct de plecare util. Echipa AngularJS însăși a preferat eticheta MVW (Model-View-Whatever), deoarece timpul de execuție se comportă mai aproape de Model-View-ViewModel decât de MVC-ul clasic. Oficialul Documentație AngularJS îl numește un cadru structural pentru aplicații web dinamice. Odată ce am stabilit acest lucru, iată cum se îmbină piesele.

AngularJS Architectură

AngularJS urmează arhitectura MVC. Diagrama framework-ului MVC este prezentată mai jos:

AngularJS ArchiDiagrama de tectură

Fiecare dintre cele trei straturi are o funcție clară:

• Controllerul reprezintă stratul care are logica de afaceri. Evenimentele utilizatorului declanșează funcțiile care sunt stocate în controlerul dumneavoastră. Evenimentele utilizator fac parte din controler.
• Vizualizările sunt folosite pentru a reprezenta stratul de prezentare care este furnizat utilizatorilor finali.
• Modelele sunt folosite pentru a vă reprezenta datele. Datele din modelul dvs. pot fi la fel de simple ca doar a avea declarații primitive. De exemplu, dacă întrețineți o aplicație de student, modelul dvs. de date ar putea avea doar un ID de student și un nume. Sau poate fi și complex, având un model de date structurat. Dacă mențineți o cerere de proprietate de mașină, puteți avea structuri care să definească vehiculul în sine în ceea ce privește capacitatea motorului, capacitatea de locuri etc.

În practică, controlerul rareori introduce manual datele în vizualizare. AngularJS urmărește modelul și reîmprospătează vizualizarea automat, iar această sincronizare automată este susținută de setul de funcții descris în continuare.

Caracteristicile AngularJS

AngularJS are următoarele caracteristici cheie care îl fac unul dintre cele mai puternice framework-uri de pe piață:

1. MVC – Cadrul este construit pe faimosul concept de MVC (Model-View-Controller). Acesta este un model de design utilizat în toate aplicațiile web moderne. Acest model se bazează pe împărțirea stratului logic de afaceri, a stratului de date și a stratului de prezentare în secțiuni separate. Împărțirea în diferite secțiuni se face astfel încât fiecare să poată fi gestionată mai ușor.
2. Legarea modelului de date – Nu este nevoie să scrieți cod special pentru a lega datele de controalele HTML. Acest lucru poate fi realizat de AngularJS prin simpla adăugare a câtorva fragmente de cod.
3. Scrierea mai puțin cod – Când se efectuează manipularea DOM o mulțime de JavaScenariu trebuia scris pentru a proiecta orice aplicație. Dar cu AngularJS, veți fi uimiți de cantitatea mai mică de cod pe care trebuie să o scrieți pentru manipularea DOM.
4. Unitate Testarea gata – Designerii de la Google nu numai că a dezvoltat AngularJS, ci a dezvoltat și un framework de testare numit „Karma”, care ajută la proiectarea testelor unitare pentru aplicațiile AngularJS.
5. Directivele – Marcatori precum ng-app, ng-model și ng-repeat adăugați comportament elementelor HTML obișnuite.

Aceste funcții sunt cel mai ușor de înțeles după ce le-ați rulat, așa că următoarea secțiune construiește o pagină funcțională de la zero.

Cum să configurezi AngularJS și să construiești prima ta aplicație

A citi despre legătura de date e una, iar a-i urmări funcționarea e cu totul altceva. AngularJS nu are nevoie de manager de pachete, de bundler și de compilator, așa că prima ta aplicație este un singur fișier HTML care rulează direct de pe hard disk.

Pasul 1) Adăugați biblioteca AngularJS

Încărcați biblioteca dintr-o rețea CDN cu o singură etichetă de script. Versiunea 1.8.3 este versiunea finală de AngularJS, așa că fixați pagina la acea versiune exactă, mai degrabă decât la una flotantă.

Pasul 2) Marcați rădăcina aplicației cu ng-app

Directiva ng-app îi spune compilatorului AngularJS ce parte a paginii deține. Plasarea ei pe eticheta html dă întregul document framework-ului, iar valoarea pe care i-o dai denumește modulul pe care urmează să-l creezi.

Pasul 3) Legarea datelor cu ng-model și o expresie

Directiva ng-model leagă un element de intrare la o proprietate din domeniul de aplicare, iar o expresie cu acolade duble afișează aceeași proprietate în altă parte a paginii. Deoarece legarea este bidirecțională, typing în casetă actualizează imediat titlul, fără un gestionator de evenimente propriu.

Pasul 4) Adăugați un controler pentru logică

Un controler este un simplu JavaFuncție de script care primește obiectul $scope și îi setează valorile inițiale. Înregistrarea sa în modul îl face disponibil directivei ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Pasul 5) Rulați pagina și verificați rezultatul

Salvați fișierul ca index.html și deschideți-l în orice browser. La început, titlul este „Salut, lume!” și se rescrie singur la fiecare apăsare de tastă. Nu este implicat niciun server web și niciun pas de compilare.

Dacă nu apare nimic, deschideți consola browserului și confirmați că scriptul CDN s-a încărcat și că numele modulului din ng-app se potrivește exact cu numele transmis către angular.module, deoarece o nepotrivire eșuează silențios. Acea pagină mică demonstrează deja punctele forte descrise în continuare.

Avantajele AngularJS

Iată avantajele AngularJS:

• Deoarece este un framework open source, vă puteți aștepta ca numărul de erori sau probleme să fie minim.
• Legare bidirecțională – AngularJS menține sincronizate stratul de date și cel de prezentare. Nu este nevoie să scrieți cod suplimentar. JavaCod script pentru a menține sincronizate datele din codul HTML și stratul de date. AngularJS va face acest lucru automat pentru dvs. Trebuie doar să specificați ce control este legat de ce parte a modelului dvs.
• Rutare – AngularJS se poate ocupa de rutare, ceea ce înseamnă trecerea de la o vizualizare la alta. Aceasta este cheia fundamentală a aplicațiilor cu o singură pagină; prin intermediul căreia puteți trece la diferite funcționalități din aplicația web pe baza interacțiunii utilizatorului, rămânând totuși pe aceeași pagină.
• AngularJS acceptă testarea, ambele Testarea unității și Testare de integrare.
• Extinde HTML prin furnizarea propriilor elemente numite directive. La nivel înalt, directivele sunt markeri pe un element DOM (cum ar fi un atribut, un nume de element și un comentariu sau o clasă CSS) care îi spun compilatorului HTML AngularJS să atașeze un comportament specificat elementului DOM respectiv. Aceste directive ajută la extinderea funcționalității elementelor HTML existente pentru a oferi mai multă putere aplicației web.

Avantajele AngularJS

O perspectivă echilibrată contează la fel de mult, așa că compromisurile sunt prezentate în continuare.

Dezavantaje și limitări ale AngularJS

Fiecare framework oferă ceva în schimb, iar AngularJS nu face excepție. Acestea sunt limitările cel mai des raportate de echipele care se ocupă de mentenanța aplicațiilor AngularJS:

• Niciun strat de securitate propriu – AngularJS nu oferă nici autentificare, nici autorizare, așadar ambele trebuie aplicate pe server.
• Dependență totală de JavaScenariu – Dacă un vizitator dezactivează JavaScript, pagina revine la markup-ul gol și nu se afișează.
• Performanța ciclului de digestie – Modificările sunt detectate prin compararea repetată a valorilor urmărite, astfel încât paginile cu câteva mii de legături pot părea lente.
• O curbă abruptă de învățare – Domeniile de aplicare, directivele, fabricile, serviciile și furnizorii se suprapun și există adesea mai multe modalități de a obține același rezultat.
• Vizibilitatea motorului de căutare – Vizualizările sunt asamblate în browser, așadar este nevoie de muncă suplimentară, cum ar fi pre-randarea, înainte ca roboții de căutare să indexeze paginile în mod fiabil.
• Nicio altă actualizare – Din 31 decembrie 2021 nu există corecții oficiale, așadar o vulnerabilitate nou descoperită rămâne neremediată decât dacă un furnizor comercial furnizează o soluție.

Acest ultim punct împinge majoritatea echipelor către framework-ul succesor, care este un produs diferit în ciuda numelui comun.

AngularJS vs Angular: Care este diferența?

AngularJS și Angular sunt frecvent confundate deoarece numele sunt foarte apropiate, însă sunt framework-uri separate, cu limbaje, arhitecturi și linii de lansare diferite. AngularJS se referă doar la seria 1.x descrisă pe această pagină. Angular înseamnă versiunea 2 și fiecare versiune ulterioară acesteia, o rescriere completă lansată în 2016, care este încă dezvoltată activ. Code nu se mișcă între ele fără o muncă de migrație deliberată.

Consecința practică este că un controler AngularJS nu poate fi pur și simplu integrat într-un proiect Angular. Migrarea înseamnă rescrierea fiecărui controler ca o componentă, așadar planificați-o ca o adevărată lucrare de inginerie, mai degrabă decât ca un upgrade. Pe scurt, tratați AngularJS ca o abilitate de mentenanță și Angular ca platforma pentru noi dezvoltări.

Întrebări frecvente