Angular 2 vs.Angular 1: diferențe cheie

recent, previzualizarea dezvoltatorului Angular 2 a fost lansată. Acest lucru are unele modificări esențiale în comparație cu Angular 1. Angular 2 este scris în întregime în Typescript și îndeplinește specificațiile ECMAScript 6. Deși nu se poate construi o întreagă aplicație cu ea, deoarece unele specificații nu au fost încă implementate sau sunt încă supuse schimbării, noul mod de gândire devine deja clar.

în cadrul Comunității unghiulare, nu există întotdeauna un consens, ceea ce a dus deja la părăsirea echipei de diverși contribuabili. Angular 2 va fi o mare schimbare pentru dezvoltatori în comparație cu 1.x.dezvoltarea bazată pe componente și orientarea obiectelor sunt mult mai ușoare, pe care le voi explica mai târziu. Alte funcționalități, cum ar fi domeniile și controlerele, sunt anulate complet.

pe bază de componente

Angular 2 este în întregime pe bază de componente. Controlerele și $scope nu mai sunt utilizate. Acestea au fost înlocuite cu componente și directive. Componentele sunt directive cu un șablon. Următorul fragment de cod, listarea 1, arată cum este construită o componentă. Această componentă este în HTML numit cu < angularComponent > tag-ul, numele selectorului în HTML.

Listing 1 Listing 1

toate componentele utilizate trebuie făcute cunoscute prin bootstrap. De asemenea, trebuie importate pe pagină.

directive

specificația directivelor este simplificată considerabil, deși acestea pot fi încă modificate. Cu adnotarea @ Directive, o directivă poate fi declarată. Acest lucru este prezentat în Lista 2. Acesta este un set limitat de posibilități. În blocul’ ascultători gazdă’, funcțiile standard pot fi legate de propriile implementări.

Listă 2

listarea 2

directivele pot fi utilizate și în componente, acest lucru se aplică atât directivelor proprii, cât și directivelor predefinite. De exemplu, Directiva” NgFor „și” hover ” într-o componentă pot fi utilizate. Acestea vor fi importate inițial și apoi făcute cunoscute în @ View.

injecție de dependență

datorită modelului îmbunătățit de injecție de dependență în Angular2 există mai multe oportunități pentru munca bazată pe componente / obiecte. Injecția de dependență este formată din 3 părți. Injectorul, care conține API-urile pentru a injecta dependențele și a face injecția de dependență disponibilă. Legăturile fac posibilă denumirea dependențelor. În cele din urmă dependențele reale ale obiectului sunt generate astfel încât să poată fi injectate.

în acest moment, un obiect este trecut în constructorul componentei, acesta trebuie trecut doar prin vizualizarea injectorului, așa cum se arată în Lista 3. Obiectele care sunt închise în parantezele pătrate pot fi apoi utilizate pentru a injecta.

 Listă 3

listarea 3

unele adnotări suplimentare au fost adăugate, care pot spori posibilitățile de injectare dependență, de exemplu @InjectPromise adnotare. Cu această adnotare se poate realiza asincronitatea, iar obiectul este injectat doar așa cum a fost creat. În acest moment va fi injectat un obiect de promisiune specific. Cu adnotarea @ opțională, se poate injecta o valoare sau o bibliotecă opțională.

un exemplu de injecție de dependență este următoarea declarație:

Titlu imagine

o aplicație specială de injecție dependență este HTTP. Prin utilizarea httpInjectables, care există în pachetul angular/http, un obiect HTTP poate fi injectat. Pe acest obiect se pot efectua operații de repaus. De exemplu, a fost utilizat un server de testare public cu un răspuns REST. Se poate numi astfel:

http.obține(‘http://jsonplaceholder.typicode.com/posts/1’)

ce este TypeScript și care sunt beneficiile ECMAScript 6

EcmaScript 6 are clase, un exemplu tipic de clasă este (listare 4):

listare 4

listarea 4

în versiunile anterioare ale ECMAScript, totul era încă definit de un prototip. Acum clasele sunt definite și o face aproape la fel de ușor de citit ca și codul Java. ECMAScript 6 are, de asemenea, moștenire completă. Cu super (parametri) la constructorul părintelui se numește. În plus, variabilele statice pot fi declarate.

TypeScript este o extensie a ECMAScript, de fapt:

TypeScript = ES6 + Types + adnotări

TypeScript este de fapt de la Microsoft, ceea ce înseamnă că noul Angular este, de asemenea, probabil să fie popular pentru dezvoltatorii.net. TypeScript este o formă de JavaScript care cunoaște tipuri și clase și pot fi compilate la JavaScript. Este open source. TypeScript include multe aspecte ale orientării obiectului, cum ar fi moștenirea și interfețele. De asemenea, are generice și lambdas.

deoarece Angular2 folosește TypeScript, funcționalitatea TypeScript în sine și bibliotecile sale pot fi utilizate. Angular este doar un cadru care cupluri caracteristici diferite. Alte biblioteci pot fi utilizate cu ușurință. De exemplu, puteți utiliza interfața MongoDB deoarece are deja un conector în TypeScript.

WebSockets este o altă caracteristică care nu este direct ceva de la Angular2, dar poate fi ușor implementată și suportul a fost adăugat la specificație. Putem defini un WebSocket ca acesta:

var socket = new WebSocket ("ws: // localhost: 3000);

pe soclu putem primi mesaje definind o funcție onMessage (). De asemenea, putem emite modificări. Dacă construim un server WebSocket, putem obține modificări în timp real.

TypeScript nu va fi utilizat în browser. Codul programului este compilat în JavaScript. Acest lucru se poate realiza cu „Traceur”. Deoarece specificația JavaScript ECMAScript 6 a necesitat, de asemenea, un plug-in suplimentar pentru a fi utilizat, deoarece browserele nu sunt încă potrivite în acest scop.

generice

TypeScript are generice care pot fi utilizate în interfața. Ca un exemplu folosește o clasă de sex masculin și feminin, care sunt ambele derivate din persoană (listarea 5). Ambele pot pregăti mâncarea, cu toate acestea, rezultatul este diferit. Unul pare să fie capabil să pregătească alimente crude, iar celălalt poate face mâncare delicioasă.

titlul imaginii

listarea 5

în unghiular, fiecare clasă sau directivă care este utilizată într-o componentă care trebuie mai întâi importată în componentă înainte de a putea fi utilizată efectiv. În lista 6, Directiva NgFor a fost importată pentru a utiliza toate clasele pentru medicamentele generice.

listă 6

listarea 6

lista” foods ” este acum afișată cu Angular, a fost utilizată următoarea bucată de HTML:

listare 7

listarea 7

browserul afișează apoi o listă. Acest exemplu este relativ simplu, mai târziu când vom discuta formulare vom vedea că vor fi posibile opțiuni mai avansate.

Lambda cu TypeScript

în TypeScript, Lambda-urile sunt disponibile. Următoarea bucată de cod face din fiecare șir din messageStrings un mesaj nou cu acest șir ca conținut. Șirul este decât împins în lista de mesaje.

 IListing 8

listarea 8

o altă aplicație a lambdas este HTTP GET. Http get furnizează un obiect care nu poate fi utilizat direct, ci un subiect RxJS. Cu ajutorul metodei toRx (), o putem transforma într-o observabilă. După aceasta ne putem abona la acest observabil prin utilizarea .Abonează-te. Fiecare schimbare poate fi acum mapată.

Titlu imagine

formulare și validări

formularele și validările sunt un aspect important al dezvoltării frontend. În cadrul Angular 2 sunt definite constructorul de formulare și grupul de Control. Grupul de Control constă dintr-o listă de Control. Listarea 9 arată modul în care două câmpuri sunt adăugate la grupul de Control. Fiecare adăugare este un Control și așa cum ar putea fi scris ca un nou Control();

listare 9

listarea 9

câmpul gol este valoarea inițială, dar aceasta poate, desigur, să utilizeze și o valoare din Baza de date. Apoi, acest lucru poate fi numit în HTML ca acesta.

listă 10

listarea 10

acum putem accesa erorile de fiecare control ca aceasta, „< < aceasta.orderForm.controale.naam.erori >>”.

putem defini și ControlGroups în ControlGroups, acest lucru permite validarea câmpurilor la nivel de formular, la validare este la nivel de formular ca fiind un grup de control, următoarea cuibărire conține controalele reale. Aceste validări pot fi apoi invocate cu ” <<acest lucru.orderForm.erori>>”.

fiecare Control sau validare poate avea propria implementare. Acest lucru face posibilă construirea propriei biblioteci cu funcții și controale personale. Reutilizarea va fi ușor de realizat. Combinat cu generice și moștenire este posibil să se definească o dată care utilizează o regulă cu generice. Acum, cu moștenire și diferite tipuri de reguli este posibil să se definească un palet de controale. De exemplu, regula generică este data este dimensiunea potrivită, linia adăugată cu generice, data trebuie să fie de cel puțin 18 ani în trecut.

de asemenea, formularele și controalele încă suferă modificări și este de așteptat ca mai multe operațiuni standard vor fi incluse.

mai mult posibil

în acest moment, nu toate specificațiile sunt puse în aplicare pe deplin și sunt încă în schimbare. Direcția este foarte clară, dar în acest moment, o eliberare minoră ar putea provoca o eroare în codul dvs.

este un mare pas înainte ca frontend-ul să fie acum complet format din componente și directive și să poată utiliza toate caracteristicile din alte biblioteci JavaScript. Este ușor să comunicați cu baza de date și să utilizați WebSockets. De asemenea, a devenit o modalitate mai bună de a crea directive și componente care sunt foarte ușor de integrat cu alte cadre. Nu mai este un cadru tipic JavaScript, este compilat în JavaScript, dar, de fapt, fiecare limbă poate fi utilizată dacă poate fi compilată în JavaScript.

combinația de Angular2 cu TypeScript oferă o mare oportunitate în programarea orientată obiect în frontend. Natura declarativă o face mult mai clară.

toate acestea arată foarte promițătoare și probabil vor schimba modul în care dezvoltăm frontend-uri. Probabil că trebuie să așteptăm până când toate implementările frontend sunt terminate.

Lasă un răspuns

Adresa ta de email nu va fi publicată.