Share
AngularJS este un cadru JavaScript excelent care are câteva caracteristici foarte convingătoare atât pentru dezvoltatori, cât și pentru designeri! În acest tutorial, vom acoperi ceea ce eu consider a fi cele mai esențiale caracteristici, și modul în care acestea pot ajuta să faceți următoarea aplicație web minunat.
Pentru a obține o idee despre ceea ce puteți face cu AngularJS, verificați gama de articole AngularJS de pe Envato Market. Puteți găsi o imagine de recoltare a imaginilor, o aplicație web eCommerce, un editor JSON și multe altele.
Articolele AngularJS de pe Envato Market AngularJS este o tehnologie nouă, puternică, bazată pe client, care oferă o modalitate de a realiza lucruri cu adevărat puternice într-un mod care cuprinde și extinde HTML, CSS și JavaScript, în timp ce susține unele dintre deficiențele sale flagrante. Este ceea ce ar fi fost HTML, dacă ar fi fost construit pentru conținut dinamic.
În acest articol, vom acoperi câteva dintre cele mai importante concepte AngularJS pentru a obține "imaginea de ansamblu". Scopul meu este ca după ce ați văzut câteva dintre aceste caracteristici, veți fi destul de entuziasmați pentru a merge și a construi ceva distractiv cu AngularJS.
Gândiți-vă la modelul dvs. ca fiind singura sursă de adevăr pentru aplicația dvs. Modelul dvs. este locul în care mergeți să citiți sau să actualizați orice în aplicația dvs..
Legarea datelor este probabil cea mai tare și mai utilă caracteristică în AngularJS. Aceasta vă va salva de la scrierea unei cantități considerabile de cod de boilerplate. O aplicație web tipică poate conține până la 80% din baza de cod, dedicată traversării, manipulării și ascultării DOM. Legarea datelor face ca acest cod să dispară, astfel încât să vă puteți concentra asupra aplicației.
Gândiți-vă la modelul dvs. ca fiind singura sursă de adevăr pentru aplicația dvs. Modelul dvs. este locul în care mergeți să citiți sau să actualizați orice în aplicația dvs. Directivele de legare a datelor oferă o proiecție a modelului dvs. în vizualizarea aplicației. Această proiecție este fără probleme și se produce fără nici un efort de la dvs..
În mod tradițional, atunci când modelul se modifică, dezvoltatorul este responsabil pentru manipularea manuală a elementelor DOM și a atributelor pentru a reflecta aceste modificări. Aceasta este o stradă cu două sensuri. Într-o anumită direcție, modelul modifică modificarea unității în elementele DOM. În cealaltă, modificările elementului DOM necesită modificări în model. Acest lucru este în continuare complicat de interacțiunea cu utilizatorul, deoarece dezvoltatorul este apoi responsabil pentru interpretarea interacțiunilor, îmbinarea acestora într-un model și actualizarea vizualizării. Acesta este un proces foarte manual și greoi, care devine dificil de controlat, deoarece o aplicație crește în mărime și complexitate.
Trebuie să existe o cale mai bună! AngularJS cu legături de date bidirectionale se ocupă de sincronizarea dintre DOM și model și invers.
Iată un exemplu simplu, care demonstrează modul de legare a unei valori de intrare la un element.
Bună ziua, numele dvs.!
Acest lucru este extrem de simplu de configurat, și aproape magic ...
Este important să ne dăm seama că AngularJS nu manipulează în nici un moment șablonul ca șiruri de caractere. E tot browserul DOM.
În AngularJS, un șablon este simplu HTML vechi. Vocabularul HTML este extins, pentru a conține instrucțiuni privind modul în care modelul trebuie proiectat în vizualizare.
Șabloanele HTML sunt analizate de browser în DOM. DOM-ul devine apoi intrarea în compilatorul AngularJS. AngularJS traversează șablonul DOM pentru instrucțiuni de redare, numite directive. În mod colectiv, directivele sunt responsabile pentru stabilirea legăturii de date pentru vizualizarea aplicației.
Este important să ne dăm seama că, în nici un moment, AngularJS nu manipulează șablonul ca șiruri de caractere. Intrarea către AngularJS este browserul DOM și nu un șir HTML. Legăturile de date sunt transformări DOM, nu concatenări de șir sau innerHTML schimbări. Folosind DOM ca intrare, mai degrabă decât șiruri de caractere, este cea mai mare diferențiere pe care AngularJS o are de la cadrele sale frate. Folosirea DOM este ceea ce vă permite să extindeți vocabularul directivei și să vă creați propriile directive sau chiar să le abrogați în componente reutilizabile!
Unul dintre cele mai mari avantaje ale acestei abordări este acela că creează un flux de lucru strâns între designeri și dezvoltatori. Designerii pot să-și marcheze HTML-ul așa cum ar face-o în mod normal, iar apoi dezvoltatorii să ia bastonul și să cârligă în funcționalitate, prin legături cu foarte puține eforturi.
Iată un exemplu în care folosesc ng-repeat directivă pentru a trece peste imagini array și să populeze ceea ce este în esență un img șablon.
"Image" descriere ", " miniatură ":" img / image_02.png "," imagine_02.png " descriere ":" descriere imagine 03 ", " thumbnail ":" img / image_04.png "," descriere " : "Descrierea imaginii 04", "thumbnail": "img / image_05.png", "descriere": "descrierea imaginii 05"];
De asemenea, merită menționat faptul că AngularJS nu vă obligă să învățați o nouă sintaxă sau să extrageți șabloanele din aplicația dvs..
AngularJS încorporează principiile de bază din spatele modelului inițial de proiectare a software-ului MVC în modul în care acesta construiește aplicații web client-side.
Modelul MVC sau Model-View-Controller înseamnă multe lucruri diferite pentru diferiți oameni. AngularJS nu implementează MVC în sensul tradițional, ci mai degrabă ceva mai aproape de MVVM (Model-View-ViewModel).
model este pur și simplu datele din aplicație. model este doar obiecte obișnuite JavaScript. Nu este nevoie să moștenim din clase de cadru, să le înfășurăm în obiecte proxy sau să folosim metode speciale de getter / setter pentru a le accesa. Faptul că avem de-a face cu vanilla JavaScript este o caracteristică cu adevărat plăcută, care reduce pe aplicația boilerplate.
A viewmodel este un obiect care oferă date și metode specifice pentru a menține opiniile specifice.
viewmodel este domeniul de aplicare $ obiect care se află în aplicația AngularJS. domeniul de aplicare $ este doar un simplu obiect JavaScript cu un mic API conceput pentru a detecta și a difuza modificări la starea sa.
controlor este responsabil pentru stabilirea starii inițiale și augmentării domeniul de aplicare $ cu metode de control al comportamentului. Este demn de remarcat faptul că controlor nu stochează statul și nu interacționează cu serviciile de la distanță.
vedere este codul HTML care există după ce AngularJS a analizat și a compilat codul HTML pentru a include marcările și legările redate.
Această diviziune creează o bază solidă pentru a vă arhitectura aplicației. domeniul de aplicare $ are o referință la date, controlor definește comportamentul și vedere gestionează aspectul și transmiterea interacțiunii la controlor să răspundă în mod corespunzător.
AngularJS are un subsistem de injecție de dependență încorporat care ajută dezvoltatorul, făcând aplicația mai ușoară pentru a dezvolta, înțelege și testa.
Dependența de injecție (DI) vă permite să vă întrebați dependențele, mai degrabă decât să trebuiască să le căutați sau să le faceți singuri. Gândiți-vă la aceasta ca pe un mod de a spune "Hei am nevoie de X", iar DI este responsabil pentru crearea și furnizarea ei pentru tine.
Pentru a avea acces la serviciile de bază AngularJS, este pur și simplu o chestiune de adăugare a acestui serviciu ca parametru; AngularJS va detecta faptul că aveți nevoie de acest serviciu și vă oferiți o instanță pentru dvs..
funcție EditCtrl ($ scope, $ location, $ routeParams) // Ceva inteligent aici ...
De asemenea, puteți să vă definiți propriile servicii personalizate și să le puneți la dispoziție și pentru injecție.
Accentsconagua
unghiular. ("MyServiceModule", []). fabrică ("notificare", ['fereastră', funcție (câștig) retur funcție (msg) win.alert (msg);;]); funcția myController (scope, notifyService) scope.callNotify = funcție (msg) notifyService (msg); ; myController $ inject = ['scope scope', 'notificare']; Directive sunt caracteristica mea preferată personală a AngularJS. Ați dorit vreodată ca browserul dvs. să facă noi trucuri pentru dvs.? Ei bine, acum poate! Aceasta este una dintre părțile mele favorite ale AngularJS. Este, de asemenea, probabil aspectul cel mai provocator al AngularJS.
Directivele pot fi utilizate pentru a crea etichete HTML personalizate care să servească drept widget-uri noi și personalizate. Ele pot fi, de asemenea, folosite pentru a "decora" elementele cu comportament și pentru a manipula atributele DOM în moduri interesante.
Iată un exemplu simplu de directivă care ascultă un eveniment și îl actualizează domeniul de aplicare $, în consecinţă.
myModule.directive ('myComponent', functie (mySharedService) return restrict: 'E', controller: function ($ scope, $ attrs, mySharedService) .message = 'Directiva:' + mySharedService.message;);, înlocuiți: true, template: ''; ); Apoi, puteți folosi această directivă personalizată, așa cum este.
Crearea aplicației dvs. ca o compoziție a componentelor discrete o face incredibil de ușor de adăugat, actualizați sau ștergeți funcționalitatea după cum este necesar.
Echipa AngularJS se simte foarte puternic că orice cod scris în JavaScript trebuie să vină cu un set puternic de teste. Ei au proiectat AngularJS cu testare în minte, astfel încât să facă testarea aplicațiilor AngularJS cât mai ușor posibil. Deci nu există nici o scuză pentru a nu face asta.
Având în vedere că JavaScript este dinamic și interpretat, mai degrabă decât compilat, este extrem de important ca dezvoltatorii să adopte o mentalitate disciplinată pentru scrierea testelor.
AngularJS este scris în întregime de la sol pentru a fi testabil. Ea vine chiar cu o configurație de tip "end-to-end" și "unitate de test". Dacă doriți să vedeți acest lucru în acțiune, vizitați proiectul pentru semințe unghiulare la adresa https://github.com/angular/angular-seed.
Odată ce aveți proiectul de însămânțare, este un cinch să executați testele împotriva acestuia. Iată cum arată ieșirea:
Documentația API este plină de teste end-to-end care fac o treabă incredibilă de a ilustra modul în care ar trebui să funcționeze o anumită parte a cadrului. După un timp, m-am trezit direct la teste pentru a vedea cum a funcționat ceva și apoi citiți restul documentației pentru a găsi ceva.
Am acoperit sase din numeroasele caracteristici AngularJS pe care le iubesc. Cred că aceste șase caracteristici sunt esențiale nu numai pentru a te ridica și a alerga cu AngularJS, ci și pentru a pune împreună aplicația într-un mod care să fie întreținut și extensibil.
Site-ul pentru AngularJS, http://angularjs.org, are o mulțime de exemple de lucru și o mulțime de documentații excelente. De asemenea, vă recomand să verificați această comunitate uimitoare pe lista de discuții AngularJS.
Dați-mi voie să știu ce credeți!
