3 motive pentru a alege AngularJS pentru următorul proiect

AngularJS este un cadru JavaScript relativ nou de către Google, conceput pentru a vă face cât mai ușor posibilă dezvoltarea dvs. frontală. Există o mulțime de cadre și plugin-uri disponibile. Ca atare, uneori se poate dovedi dificil să treci prin tot zgomotul pentru a găsi instrumente utile.

Iată trei motive pentru care ați putea alege AngularJS pentru următorul proiect.

1 - A fost dezvoltat de Google

Angular este construit și întreținut de ingineri specializați de Google.

Acest lucru poate părea evident, dar este important să rețineți că multe (nu toate) cadre sunt făcute de pasionați în comunitatea open source. În timp ce pasiunea și conducerea au forjat cadre, cum ar fi Cappucino și Knockout, Angular este construit și întreținut de ingineri specializați (și foarte talentați) de la Google. Acest lucru înseamnă că nu aveți doar o comunitate deschisă mare de învățat, dar de asemenea aveți ingineri calificați, disponibili pentru a vă ajuta să obțineți răspunsurile la întrebările Angulare.

Aceasta nu este prima încercare a Google la un cadru JavaScript; ei au dezvoltat pentru prima oară Web Toolkit-ul lor cuprinzător, care compilează Java până la JavaScript, și a fost utilizat de echipa Google Wave pe scară largă. Odată cu creșterea numărului de coduri HTML5, CSS3 și JavaScript, atât Google, cât și limbajul de back-end, Google a dat seama că web-ul nu era destinat să fie scris doar în Java.

AngularJS a venit să standardizeze structura aplicațiilor web și să furnizeze un șablon viitor pentru modul în care ar trebui dezvoltate aplicațiile de pe partea clientului.

Versiunea 1.0 a fost lansată acum 6 luni (în decembrie 2012) și este utilizată de o serie de aplicații, de la hobby la produse comerciale. Adoptarea AngularJS ca un cadru viabil pentru dezvoltarea clientului devine rapid cunoscută întregii comunități de dezvoltare web.

Deoarece AngularJS este construit de Google, puteți fi siguri că aveți de-a face cu un cod eficient și fiabil, care să se potrivească cu proiectul dvs. Dacă sunteți în căutarea unui cadru cu o bază solidă, Angular este alegerea dvs.!

2 - Este cuprinzător

Dacă sunteți familiarizați cu proiectele, cum ar fi Qunit, Mocha sau Jasmine, atunci nu veți avea probleme în a învăța API-ul de testare a unităților Angular.

Angular, similar cu Backbone sau JavaScriptMVC, este o soluție completă pentru dezvoltarea rapidă a front-end-ului. Nu sunt necesare alte pluginuri sau cadre pentru a construi o aplicație web bazată pe date. Iată o prezentare generală a funcțiilor de stand-out ale lui Angular:

REST Easy. Acțiunile mai rapide devin repede standardul pentru comunicarea de la server către client. Într-o singură linie de JavaScript, puteți să discutați rapid cu serverul și să obțineți datele de care aveți nevoie pentru a interacționa cu paginile dvs. web. AngularJS transformă acest lucru într-un simplu obiect JavaScript, ca Modele, urmând modelul MVVM (Model View View-Model).
MVVM la salvare! Modelele vorbesc cu obiectele ViewModel (prin ceva numit obiectul $ scope scope), care ascultă modificările modelelor. Acestea pot fi apoi livrate și redate de Vizualizări, care reprezintă codul HTML care vă exprimă codul. Vizualizările pot fi redirecționate folosind obiectul $ routeProvider, astfel încât să puteți conecta adânc și să vă organizați vizualizările și controlorii, transformându-le în adrese URL navigabile. AngularJS oferă, de asemenea, controale fără stat, care inițializează și controlează domeniul de aplicare $ obiect.
Legarea datelor și injectarea dependenței. Totul din modelul MVVM este comunicat automat în interfața de utilizator ori de câte ori se schimbă ceva. Acest lucru elimină nevoia de împachetări, preluători / setteri sau declarații de clasă. AngularJS se ocupă de toate acestea, astfel încât să puteți exprima datele dvs. la fel de simplu ca și primitivele JavaScript, cum ar fi matricele sau cât de complexe doriți, prin tipuri personalizate. Deoarece totul se întâmplă automat, puteți cere dependențele dvs. ca parametri în funcțiile serviciului AngularJS, mai degrabă decât un gigant principal() sunați pentru a vă executa codul.
Extinde codul HTML. Cele mai multe site-uri construite astăzi sunt o serie gigantică de
etichete cu claritate semantică mică. Trebuie să creați clase extinse și exhaustive de CSS pentru a exprima intenția fiecărui obiect din DOM. Cu Angular, puteți utiliza codul HTML ca XML, oferindu-vă posibilități nesfârșite pentru etichete și atribute. Angular realizează acest lucru, prin intermediul compilatorului său HTML și folosirea directivelor pentru declanșarea comportamentelor bazate pe sintaxa nou creată pe care o scrie.
Îți face șablonul HTML. Dacă sunteți obișnuiți cu Mustache sau Hogan.js, atunci puteți să înțelegeți sintaxa bracket a motorului templating al lui Angular, deoarece este doar HTML. Angular traversează DOM pentru aceste șabloane, care adapostesc directivele menționate mai sus. Șabloanele sunt apoi transmise compilatorului AngularJS ca elemente DOM, care pot fi extinse, executate sau reutilizate. Aceasta este cheia, deoarece, acum, aveți componente DOM brute, mai degrabă decât șiruri de caractere, permițând manipularea directă și extinderea arborelui DOM.
Întrebări la nivel de întreprindere. După cum sa menționat mai sus, AngularJS nu necesită cadre sau pluginuri suplimentare, inclusiv teste. Dacă sunteți familiarizați cu proiectele, cum ar fi Qunit, Mocha sau Jasmine, atunci nu veți avea probleme în a învăța API-ul de testare a unităților Angular și scenariul Runner, care vă va îndruma prin executarea testelor dvs. cât mai aproape de starea actuală a aplicației de producție pe cat posibil.

Acestea sunt principiile fundamentale care ghidează AngularJS la crearea unei baze de date front-end eficiente, bazate pe performanță și care pot fi întreținute. Atâta timp cât aveți o sursă de stocare a datelor, AngularJS poate face toate ridicările grele ale clientului, oferind în același timp o experiență bogată și rapidă pentru utilizatorul final.

3 - Începeți în procesul-verbal

Noțiuni de bază cu AngularJS este incredibil de ușor. Cu câteva atribute adăugate la codul HTML, puteți avea o aplicație angulară simplă în mai puțin de 5 minute!

Adaugă ng-app directivă eticheta astfel încât unghiul să știe să ruleze pe pagină:
Adăugați unghiul

 Adăugați cod HTML obișnuit. Directivele AngularJS sunt accesate prin intermediul atributelor HTML, în timp ce expresiile sunt evaluate cu notație dublă:  Activitățile de astăzi
   Activity.name

  ng-controler directiva stabilește un spațiu de nume, unde putem plasa JavaScript Angular pentru a manipula datele și pentru a evalua expresiile în HTML. ng-repeat este un obiect de repetoare unghiular, care instruiește Angular să păstreze în continuare elemente de listă atâta timp cât avem activități de afișare și să folosim acest lucru 
 element ca un șablon pentru modul în care vrem ca toți să arate.
  Când doriți să luați ceva de la Angular, preluați datele cu un fișier JavaScript care conține o funcție al cărei nume corespunde controlerului pe care l-ați prezentat în codul HTML:
 
 ("nume": "Drop", "name": "Drop", "nume": "", "Nume": "Du-te la serviciu", "nume": "Scrieți un articol Nettuts" Faceți cunoștință cu prietenii ", " name ":" Du-te la culcare "]; 
 Așa cum am menționat anterior, creăm o funcție cu același nume ca și ng-controler directive, astfel încât pagina noastră poate găsi funcția Angular corespunzătoare pentru a inițializa și executa codul nostru cu datele pe care dorim să le luăm. Trecem în domeniul de aplicare $ pentru a accesa șablonul activitati listă pe care am creat-o în vizualizarea noastră HTML. Apoi oferim un set de activități de bază cu cheia, Nume, care corespunde activitateproprietatea Nume pe care am enumerat-o în notația noastră dublă, și o valoare, care este un șir reprezentând activitățile pe care vrem să le realizăm astăzi.
  În timp ce această aplicație este completă, nu este prea practică. Cele mai multe aplicații web găzduiesc o mulțime de date stocate pe serverele la distanță. Dacă aveți datele stocate pe un server undeva, putem înlocui pur și simplu matricele cu un apel de la AJAX API al lui Angular:
 
 funcția ActivitiesListCtrl (domeniul de aplicare) $ http.get ('activities / list.json') succes (function (data) $ scope.activities = data;
 Am înlocuit pur și simplu obiectul nativ al array JavaScript cu hash-uri cu o funcție specializată HTTP GET, furnizată de API-ul Angular. Trecem în numele fișierului pe care ne uităm să-l aducem de la server (în acest caz, un fișier de activități JSON) și suntem returnați o promisiune de la Angular, mult în același mod în care modelul de promisiune funcționează în jQuery.
   Aflați mai multe despre promisiunile din jQuery aici pe Nettuts+. 
 
 Această promisiune ne poate executa apoi succes atunci când datele au fost returnate și tot ceea ce trebuie să facem este să legăm datele de întoarcere la activitățile noastre, care, după cum sa spus anterior, au fost furnizate prin injectarea de dependență, prin intermediul domeniul de aplicare $ parametru.
 O listă statică de sarcini este plăcută, dar puterea reală rezultă din cât de ușor putem manipula pagina fără a fi nevoie să configurați o grămadă de funcții JavaScript pentru a asculta și a răspunde la interacțiunile utilizatorilor. Imaginați-vă că trebuie să sortați lista noastră de activități în ordine alfabetică. Ei bine, pur și simplu adăugăm un selector pentru a permite utilizatorului să sorteze lista: 
Fel:
 
 Adaugă model directivă la scăderea: