Prezentare generală a AngularJS
La Brat Tech LLC în 2009, dezvoltatorii Misko Hevery și Adam Abrons au dezvoltat un cadru AngularJS după care a avut loc o revoluție în dezvoltarea front-end și în construirea de aplicații cu o singură pagină. AngularJS este un cadru javascript, care leagă elementele Html cu obiectele javascript. Legarea datelor și injecția de dependență sunt unele dintre principalele caracteristici ale AngularJs, care economisesc timp în scrierea codurilor îndelungate, făcând mai ușor dezvoltatorii și browserele să funcționeze. Cum se realizează acest lucru va fi profund explicat în continuare, dar deocamdată vă amintiți doar aceste terminologii. În acest subiect, vom afla despre versiunea AngularJS.
Versiuni de AngularJS
AngularJS este versiunile Angular 1.x și după aceea se dezvoltă Angular 2 care este diferit de Angular 1.x. lucrări.
De ce versiunea AngularJS și cum funcționează?
AngularJS ne ajută să dezvoltăm aplicații interactive cu o singură pagină. Prin aplicații cu o singură pagină, vreau să spun că pagina singură pe care ai vizitat-o va încărca toate celelalte conținuturi folosind javascript. Această caracteristică ajută aplicația să fie rapidă și eficientă.
Când folosim javascript și html pentru a construi aplicații, va trebui să legați vizualizarea de model folosind funcții și obiecte JS. Dar dacă credeți că aceste legături bidirecționale ale unei date într-o aplicație industrială practică aceeași abordare devine obositoare cu coduri îndelungate. Acesta este unul dintre motivele principale pentru care a fost nevoie să înveți și să dezvolți AngularJS.
Trebuie să învățați câteva concepte de bază înainte de a începe să dezvoltați aplicații pe care AngularJS este bazat pe:
- Model: Modelul conține date, obiecte și logică.
- Vizualizare: este prezentarea vizuală a aplicației, care este, de asemenea, numită interfață de utilizator.
- Vizualizare la modelul cu două căi de legare: Obiectul javascript, adică obiectul pe care doriți să-l legați la un DOM Html, de exemplu, o casetă text, o introducere sau orice etichete Html și invers poate fi făcut cu ușurință folosind unele biblioteci AngularJS predefinite.
- Controlere: Controlerele sunt funcții javascript care conectează modelul și vizualizarea.
- Servicii: serviciile AngularJS sunt funcții javascript care îndeplinesc o sarcină sau o funcționalitate specifică, care este întreținută și testată de javascript. Unele dintre exemplele de servicii sunt $ application, $ http, $ rootScope.
- Expresii: expresiile sunt utilizate pentru a lega datele cu Html. Această caracteristică este cunoscută și sub denumirea de interpolare. Expresiile sunt scrise cu bretele cretate ((expression)). Expresiile sunt evaluate și pot fi scrise fără etichete html.
- Module: Modulele funcționează ca un container care conține diferite părți ale aplicației unghiulare, cum ar fi controlerul, serviciile, directivele etc.
Directive și domeniu de aplicare
Să ne concentrăm pe unele dintre directivele predefinite și modul în care acestea funcționează efectiv. Cea mai mare parte a acestei directive începe cu „ng” preluat de la Angular
1 Domeniul de aplicare
- Domeniul de aplicare definește obiectul javascript cu care datele pot fi accesibile de la Model la HTML. Scopul funcționează ca un conector între cei doi.
- Unele servicii de aplicare sunt $ scop, $ rootScope. „$” definește că aceste servicii sunt predefinite și nu pot fi modificate. Amintiți-vă, HTML-ul nu este sensibil la majuscule și majuscule, dar AngularJS este sensibil la litere mari și mici, astfel încât $ Scope va arunca o eroare ca nedefinită.
- Este necesar să le declaram în funcția noastră de controler și unghiular îl va injecta automat.
2. controler ng
- Această directivă este utilizată pentru a crea o instanță / obiect al controlerului prin care HTML DOM va comunica cu logica reală.
- HTML spune că orice etichetă cu un „-” va fi ignorată în timpul creării Html DOM.
- Odată creată DOM, interpretul unghiular găsește o directivă ng-controller și creează o instanță a controlerului special care furnizează și un serviciu de valoare $.
- Există multe controloare ng într-o singură pagină HTML.
3. aplicație ng
- Această directivă acționează ca un container care conține controlere, directive, filtre, expresii etc. Înregistrează sau pornește aplicația sau modulul.
- Există o singură aplicație ng în html-ul tău. Sub o singură aplicație ng, poate exista multe controloare ng.
Acest lucru inițiază un obiect de aplicație cu serviciul $ rootScope.
- Astfel, variabilele / funcțiile $ rootScope sunt accesibile într-o aplicație completă.
4. model ng
- ng-model este folosit pentru a lega datele de la html la obiectul model. Oferă legătură în două sensuri.
5. ng-dacă
- Pentru a executa declarații condiționale pe etichetele Html ng-dacă este utilizat. Dacă starea este falsă, DOM nu include această divizare pe DOM.
6. ng-bind
- În loc de a utiliza (()) pentru interpolare, se poate utiliza și ng-bind.
7. ng-dezactivat
- Pe baza unei condiții, un element din vedere poate fi dezactivat.
8. ng-spectacol
- Dacă condiția dată pentru ng-show este adevărată, atunci elementul particular este afișat pe DOM.
9. ng-ascunde
- Dacă condiția dată pentru ng-hide este adevărată, atunci elementul particular va rămâne ascuns în DOM.
10. ng-repeta
- Se va repeta div-ul sau intervalul particular pe Html cu lungimea tabloului sau lista furnizată.
11. ng-click
- Când faceți clic pe evenimentul pe elementul html, acesta va efectua funcționalitatea sau sarcina furnizate.
Sfat: Cel mai bun mod de a învăța orice limbă este codificarea. Deci, să vedem primul nostru cod.
Exemple de versiune AngularJS
Iată câteva dintre exemplele date mai jos
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
ieşire:
Prenume: Iosif
Prenume: Alex
Numele tău este: Joseph Alex
Există câteva puncte pe care să le concentrezi din fragmentul de codare de mai sus:
- La linia 3, un fișier angular.min.js este adăugat în pagină, care va încărca toate bibliotecile necesare pentru rularea aplicației AngularJS.
- AngularJS are în majoritate 2 biblioteci angular.js și o versiune comprimată a acestui fișier sub formă de angular.min.js.
- La linia 5 puteți vedea directiva ca o aplicație ng, care este ignorată de Html în timp ce creați Html DOM și preluată de AngularJS ca una dintre directivele sale pentru a porni aplicația.
- La linia 6, 7 este folosit modelul care va lega textul pe care îl veți introduce în caseta de text la variabilele nume și nume. Amintiți-vă că aceste variabile sunt sensibile cu majuscule.
- La linia 8 vezi expresia ((fname + "" + lname)) care unghiular va evalua și va afișa datele introduse în casetele de text. Aceasta este cunoscută sub numele de interpolare.
Haideți să explorăm printr-un alt exemplu:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Nume:
Numele de familie:
Numele clientului este ((clientName)) și vârsta este ((customerAge))
În acest exemplu, la linia 5 este creată o aplicație cu numele CustomerApp, care va include toate părțile din aplicație. La următoarea linie, un controller este creat și este denumit ca firstController. Domeniul de aplicare $ este declarat ca parametru funcțional. AngularJS o va injecta automat în aplicație pentru utilizare directă, dezvoltatorul nu trebuie să o creeze explicit.
Această caracteristică este cunoscută sub denumirea de injecție de dependență. Într-o manieră similară, ng-controller este utilizat pentru același controler sub eticheta ng-app. Nu uitați că domeniul de aplicare al aplicației sau al controlerului va fi acolo unde se termină div-ul sau orice definiți în aplicație sau controler. În acest caz, nu puteți accesa controlerul sau aplicația după linia 16.
Articole recomandate
Acesta este un ghid pentru Ce este versiunea AngularJS. Aici discutăm versiunile AngularJS cu directive, sfera de aplicare și cum funcționează AngularJS. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -
- AngularJS Architecture
- Aplicație unghiulară JS
- AngularJS Testing Unit
- Cariera în AngularJS
- Ce este unghiul 2?