Angular 2 vs. Angular 1: viktiga skillnader

nyligen släpptes utvecklarens förhandsvisning av Angular 2. Detta har några väsentliga förändringar jämfört med Angular 1. Angular 2 skrivs helt i Typescript och uppfyller ECMAScript 6-specifikationen. Även om man inte kan bygga en hel applikation med den, eftersom vissa specifikationer inte har implementerats ännu eller fortfarande kan ändras, blir det nya sättet att tänka redan klart.

inom Angular-samhället finns det inte alltid enighet, vilket redan ledde till att olika bidragsgivare lämnade laget. Angular 2 kommer att bli en stor förändring för utvecklare jämfört med 1.X. komponentbaserad utveckling och objektorientering är mycket enklare, vilket jag förklarar senare. Andra funktioner som omfattningar och styrenheter avbryts helt.

komponentbaserad

Vinkel 2 är helt komponentbaserad. Controllers och $ scope används inte längre. De har ersatts av komponenter och direktiv. Komponenter är direktiv med en mall. Följande kodavsnitt, Lista 1, visar hur en komponent är byggd. Denna komponent är i HTML kallas med< angularComponent > taggen, namnet på väljaren i HTML.

Lista 1 Lista 1

alla komponenter som används måste göras kända via bootstrap. De måste också importeras på sidan.

direktiv

specifikationen för direktiv är avsevärt förenklad, även om de fortfarande kan komma att ändras. Med @ – direktivets anteckning kan ett direktiv deklareras. Detta visas i Lista 2. Detta är en begränsad uppsättning möjligheter. I blocket ’värdlyssnare’ kan standardfunktioner kopplas till sina egna implementeringar.

Lista 2

notering 2

direktiv kan också användas i komponenter, detta gäller både för sina egna direktiv som fördefinierade direktiv. Till exempel kan” ngfor ” och ”hover” – direktivet i en komponent användas. Dessa kommer att importeras initialt och sedan göras kända inom @View.

Beroendeinjektion

på grund av den förbättrade beroendeinjektionsmodellen i Angular2 finns det fler möjligheter till komponent / objektbaserat arbete. Beroendeinjektionen består av 3 delar. Injektorn, som innehåller API: erna för att injicera beroenden och göra beroendeinjektion tillgänglig. Bindningar gör det möjligt för beroenden att namnges. Slutligen genereras objektets faktiska beroenden så att de kan injiceras.

för närvarande passerar ett objekt in i komponentens konstruktör, detta behöver bara passera genom injektorvyn, som visas i Lista 3. Föremålen som är inneslutna i hakparenteserna kan sedan användas för att injicera.

Lista 3

Lista 3

några extra anteckningar har lagts till som kan förbättra möjligheterna till beroendeinjektion, till exempel @ InjectPromise-anteckningen. Med denna anteckning kan asynkronicitet uppnås, och objektet injiceras bara som det faktiskt har skapats. För närvarande kommer ett specifikt Löfteobjekt att injiceras. Med @ optional-anteckningen kan ett valfritt värde eller bibliotek injiceras.

ett exempel på beroendeinjektion är följande förklaring:

bildtitel

en speciell tillämpning av beroendeinjektion är HTTP. Genom att använda httpInjectables, som finns i angular/http-paketet, kan ett HTTP-objekt injiceras. På detta objekt kan vila operationer utföras. Till exempel har en offentlig testserver med ett REST-svar använts. Det kan kallas så här:

http.få(’http://jsonplaceholder.typicode.com/posts/1’)

Vad är TypeScript och vad är fördelarna med ECMAScript 6

EcmaScript 6 har klasser, ett typiskt exempel på en klass är (notering 4):

listning 4

lista 4

i tidigare versioner av ECMAScript definierades allt fortfarande av en prototyp. Nu definieras klasser och det gör det nästan lika läsbart som Java-kod. ECMAScript 6 har också full arv. Med super (parametrar) till konstruktören av föräldern kallas. Dessutom kan statiska variabler deklareras.

TypeScript är en förlängning av ECMAScript, faktiskt:

TypeScript = ES6 + typer + anteckningar

TypeScript är faktiskt från Microsoft, vilket innebär att den nya Angular också sannolikt kommer att vara populär för.NET-utvecklare. TypeScript är en form av JavaScript som känner till typer och klasser och kan kompileras till JavaScript. Det är öppen källkod. TypeScript innehåller många aspekter av objektorientering som arv och gränssnitt. Det har också generika och lambdas.

eftersom Angular2 använder TypeScript kan funktionaliteten i TypeScript själv och dess bibliotek användas. Angular är bara en ram som kopplar ihop olika funktioner. Andra bibliotek kan enkelt användas. Du kan till exempel använda MongoDB-gränssnittet eftersom det redan har en kontakt i TypeScript.

WebSockets är en annan funktion som inte direkt är något från Angular2, men det kan enkelt implementeras och support har lagts till i specifikationen. Vi kan definiera en WebSocket så här:

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

på uttaget kan vi ta emot meddelanden genom att definiera en onMessage () – funktion. Vi kan också avge förändringar. Om vi bygger en WebSocket-server kan vi få förändringar i realtid.

TypeScript kommer inte att användas i webbläsaren. Programkoden sammanställs till JavaScript. Detta kan uppnås med ”Traceur”. Eftersom JavaScript ECMAScript 6-specifikationen också har behövt en extra plug-in som ska användas eftersom webbläsarna ännu inte är lämpliga för detta ändamål.

Generics

TypeScript har generika som kan användas i frontend. Som ett exempel använder en manlig och kvinnlig klass som båda härrör från Person (Lista 5). Båda kan laga mat, men resultatet är annorlunda. Man verkar bara kunna förbereda rå mat och den andra kan göra utsökt mat.

bildtitel

Lista 5

i vinkel, varje klass eller direktiv som används i en komponent som först måste importeras i komponenten innan den faktiskt kan användas. I förteckning 6 har ngfor-direktivet importerats för att använda alla klasser för generika.

lista 6

lista 6

”foods” – listan kan nu visas med Angular, följande bit HTML har använts:

listning 7

lista 7

webbläsaren visar sedan en lista. Detta exempel är relativt enkelt, senare när vi diskuterar formulär kommer vi att se mer avancerade alternativ kommer att vara möjliga.

Lambdas med TypeScript

i TypeScript finns lambdas tillgängliga. Följande kodstycke gör varje sträng i messageStrings ett nytt meddelande med denna sträng som innehåll. Strängen är än tryckt i listan meddelanden.

 IListing 8

lista 8

en annan tillämpning av lambdas är HTTP GET. Http get levererar ett icke-direkt användbart objekt, men ett rxjs-ämne. Med hjälp av toRx () – metoden kan vi omvandla den till en observerbar. Efter detta kan vi prenumerera på denna observerbara genom att använda .prenumerera. Varje förändring kan nu kartläggas.

bild titel

former och valideringar

former och valideringar är en viktig aspekt av frontend utveckling. Inom Angular 2 formulärbyggaren och kontrollgruppen definieras. Kontrollgruppen består av en lista över kontroll. Lista 9 visar hur två fält läggs till i kontrollgruppen. Varje tillägg är en kontroll och som kan skrivas som ny kontroll();

listning 9

lista 9

det tomma fältet är initialvärdet, men det kan naturligtvis också använda ett värde från databasen. Därefter kan detta kallas i HTML så här.

lista 10

lista 10

nu kan vi komma åt felen i varje kontroll så här, ”<<detta.beställningsform.kontroll.naam.fel >>”.

vi kan också definiera ControlGroups inom ControlGroups, detta möjliggör validering av fält på Formulärnivå, på validering är på Formulärnivå som en kontrollgrupp, nästa nesting innehåller de faktiska kontrollerna. Dessa valideringar kan sedan åberopas med ” <<detta.beställningsform.fel>>”.

varje kontroll eller validering kan ha sin egen implementering. Detta gör det möjligt att bygga ditt eget bibliotek med personliga funktioner och kontroller. Återanvändning blir lätt att uppnå. Kombinerat med generika och arv är det möjligt att definiera ett datum som använder en regel med generika. Nu med arv och olika typer av regler är det möjligt att definiera en pall med kontroller. Till exempel är den generiska regeln datumet är rätt storlek, linjen läggs till med generika, datumet måste vara minst 18 år tidigare.

även formerna och kontrollerna genomgår fortfarande förändringar och det förväntas att fler standardoperationer kommer att inkluderas.

mer möjligt

för närvarande är inte alla SPECIFIKATIONER fullt implementerade och ändras fortfarande. Riktningen är mycket tydlig, men just nu kan en mindre utgåva orsaka ett fel i din kod.

det är ett stort steg framåt att frontend nu är helt gjord av komponenter och direktiv och kan använda alla funktioner från andra JavaScript-bibliotek. Är det lätt att kommunicera med databasen och använda WebSockets. Det har också blivit ett bättre sätt att skapa direktiv och komponenter som är mycket lätta att integrera med andra ramar. Det är inte längre ett typiskt JavaScript-ramverk, det sammanställs till JavaScript, men i själva verket kan varje språk användas om det kan kompileras till JavaScript.

kombinationen av Angular2 med TypeScript ger en stor möjlighet i objektorienterad programmering i frontend. Den deklarativa naturen gör det mycket tydligare.

allt detta ser mycket lovande ut och kommer förmodligen att förändra hur vi utvecklar frontends. Vi måste förmodligen vänta tills alla frontend-implementeringar är färdiga.

Lämna ett svar

Din e-postadress kommer inte publiceras.