Angular 2 vs. Angular 1: Key Differences

Nylig Ble Utvikleren Forhåndsvisning Av Angular 2 utgitt. Dette har noen viktige endringer i Forhold Til Angular 1. Angular 2 er skrevet helt I Typescript og oppfyller ECMAScript 6-spesifikasjonen. Selv om man ikke kan bygge et helt program med det, fordi noen spesifikasjoner ikke er implementert ennå eller fortsatt kan endres, blir den nye tankegangen allerede klar.

Innenfor Angular-fellesskapet er det ikke alltid enighet, noe som allerede førte til at ulike bidragsytere forlot laget. Angular 2 vil være en stor endring for utviklere i forhold til 1.X. Komponentbasert utvikling og objektorientering er mye lettere, som jeg skal forklare senere. Andre funksjoner som scopes og kontrollere er kansellert helt.

Komponentbasert

Vinkel 2 er helt komponentbasert. Controllers og $ scope brukes ikke lenger. De har blitt erstattet av komponenter og direktiver. Komponenter er direktiver med en mal. Følgende kodebit, Oppføring 1, viser hvordan en komponent er bygget. Denne komponenten er I HTML kalt med < angularComponent > tag, navnet på velgeren i HTML.

 Oppføring 1 Oppføring 1

Alle komponentene som brukes må gjøres kjent via bootstrap. De må også importeres på siden.

Direktiver

spesifikasjonen for direktiver er betydelig forenklet, selv om de fortsatt kan endres. Med @ – Direktivet kan et direktiv deklareres. Dette vises I Liste 2. Dette er et begrenset sett av muligheter. I blokken ‘vertslyttere’ kan standardfunksjoner knyttes til egne implementeringer.

 Oppføring 2

Oppføring 2

Direktiver kan også brukes i komponenter, dette gjelder både egne direktiver som forhåndsdefinerte direktiver. For eksempel kan direktivet «NgFor» og «hover» i en komponent brukes. Disse vil bli importert først og deretter gjort kjent i @ View.

Avhengighetsinjeksjon

på grunn av den forbedrede avhengighetsinjeksjonsmodellen I Angular2 er det flere muligheter for komponent- / objektbasert arbeid. Avhengighetsinjeksjonen består av 3 deler. Injektoren, som inneholder Apiene for å injisere avhengighetene og gjøre avhengighetsinjeksjon tilgjengelig. Bindinger gjør det mulig for avhengigheter å bli navngitt. Til slutt genereres de faktiske avhengighetene til objektet slik at de kan injiseres.

for øyeblikket sendes et objekt inn i komponentens konstruktør, dette må bare føres gjennom injeksjonsvisningen, som vist i Notering 3. Objektene som er vedlagt i firkantede parenteser, kan deretter brukes til å injisere.

Oppføring 3

Oppføring 3

Noen ekstra merknader er lagt til som kan forbedre mulighetene for avhengighetsinjeksjon, for eksempel @InjectPromise-merknaden. Med denne merknaden asynkronisitet kan oppnås, og objektet er bare injisert som det faktisk har blitt opprettet. I dette øyeblikk vil et bestemt Løfteobjekt bli injisert. Med @optional annotation kan en valgfri verdi eller et bibliotek injiseres.

et eksempel på avhengighetsinjeksjon er følgende erklæring:

Bildetittel

EN spesiell anvendelse av avhengighetsinjeksjon ER HTTP. Gjennom bruk av httpInjectables, som finnes i angular / http-pakken, KAN ET HTTP-objekt injiseres. PÅ dette objektet KAN HVILEOPERASJONER utføres. For eksempel har en offentlig testserver med REST-respons blitt brukt. Det kan kalles slik:

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

Hva Er TypeScript Og Hva Er Fordelene Med ECMAScript 6

EcmaScript 6 har klasser, et typisk eksempel på en klasse er (Oppføring 4):

Oppføring 4

Oppføring 4

i tidligere versjoner Av ECMAScript ble alt fortsatt definert av en prototype. Nå er klasser definert, og det gjør det nesten like lesbart som Java-kode. ECMAScript 6 har også full arv. Med super (parametere) til konstruktøren til foreldrene kalles. Videre kan statiske variabler deklareres.

TypeScript er en utvidelse Av ECMAScript, faktisk:

TypeScript = ES6 + Types + Annotations

TypeScript er faktisk Fra Microsoft, noe som betyr at den nye Angular også sannsynligvis vil være populær for.NET-utviklere. TypeScript er En Form For JavaScript som kjenner typer og klasser og kan kompileres Til JavaScript. Det er åpen kildekode. TypeScript inneholder mange aspekter av objektorientering som arv og grensesnitt. Det har også generikk og lambdas.

Fordi Angular2 bruker TypeScript, kan Funksjonaliteten Til TypeScript selv og dets biblioteker brukes. Angular er bare et rammeverk som par forskjellige funksjoner. Andre biblioteker kan enkelt brukes. For eksempel kan Du bruke MongoDB-grensesnittet fordi det allerede har en kontakt I TypeScript.

WebSockets er en annen funksjon som ikke er direkte Noe Fra Angular2, men det kan enkelt implementeres og støtte er lagt til spesifikasjonen. Vi kan definere En WebSocket som dette:

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

på kontakten kan vi motta meldinger ved å definere en onMessage () – funksjon. Vi kan også avgi endringer. Hvis vi bygger En WebSocket server kan vi få sanntid endringer.

TypeScript vil ikke bli brukt i nettleseren. Programkoden er kompilert Til JavaScript. Dette kan oppnås med «Traceur». Fordi JavaScript ECMAScript 6-spesifikasjonen også har behov for en ekstra plugin som skal brukes fordi nettleserne ennå ikke er egnet til dette formålet.

Generikk

TypeScript har generikk som kan brukes i frontend. Som et eksempel bruker En Mannlig og Kvinnelig klasse som begge er avledet Fra Person (Liste 5). Begge kan tilberede Mat, men resultatet er annerledes. Man ser bare ut til å kunne tilberede rå mat og den andre kan lage deilig mat.

 Bildetittel

Oppføring 5

I Angular, hver klasse Eller direktiv som brukes i en komponent som først må importeres i komponenten før den faktisk kan brukes. I notering 6 Har NgFor-direktivet blitt importert for å bruke alle klasser for generikkene.

 Oppføring 6

Oppføring 6

«foods» – listen kan nå vises Med Angular, følgende stykke HTML har blitt brukt:

Oppføring 7

Oppføring 7

nettleseren viser deretter en liste. Dette eksemplet er relativt enkelt, senere når vi diskusformer vil vi se mer avanserte alternativer vil være mulige.

Lambdas Med TypeScript

i TypeScript er lambdas tilgjengelige. Følgende stykke kode gjør av hver streng i messageStrings en ny melding med denne strengen som innhold. Strengen er enn presset i meldingslisten.

IListing 8

Oppføring 8

En annen applikasjon av lambdas er HTTP GET. Http get leverer et ikke-direkte brukbart objekt, men et rxjs-emne. Med hjelp av toRx () – metoden kan vi forvandle den til En Observerbar. Etter dette kan vi abonnere på dette observerbare ved hjelp av .abonnere. Hver endring kan nå kartlegges.

 Bildetittel

Skjemaer Og Valideringer

Skjemaer og valideringer er en viktig del av frontend utvikling. Innenfor Vinkel 2 Er Skjemabygger og Kontrollgruppe definert. Kontrollgruppen består av en Liste Over Kontroll. Oppføring 9 viser hvordan to felt legges til I Kontrollgruppen. Hvert tillegg er En Kontroll og som kunne skrives som ny Kontroll();

Oppføring 9

Oppføring 9

det tomme feltet er startverdien, men dette kan selvsagt også bruke en verdi fra databasen. Deretter kan dette kalles I HTML som dette.

 Oppføring 10

Oppføring 10

Nå kan Vi få tilgang til feilene til hver kontroll som dette, » <<dette.ordreform.kontroll.naam.feil >>».

Vi kan også definere Kontrollgrupper innen Kontrollgrupper, dette tillater validering av felt På Skjemanivå, på validering er På Skjemanivå som en kontrollgruppe, inneholder neste nesting de faktiske kontrollene. Denne valideringen kan da påberopes med «<<dette.ordreform.feil>>».

Hver Kontroll eller validering kan ha sin egen implementering. Dette gjør det mulig å bygge ditt eget bibliotek med personlige funksjoner og kontroller. Gjenbruk vil være lett å oppnå. Kombinert med generikk og arv er det mulig å definere en dato som bruker en regel med generikk. Nå med arv og ulike typer regler er det mulig å definere en pall av kontroller. For eksempel er den generiske regelen datoen er riktig størrelse, linjen lagt til med generikk, datoen må være minst 18 år tidligere.

Også Skjemaene og Kontrollene gjennomgår fortsatt endringer, og det forventes at flere standardoperasjoner vil bli inkludert.

Mer Mulig

for øyeblikket er ikke alle spesifikasjoner fullt implementert og endrer seg fortsatt. Retningen er veldig tydelig, men for øyeblikket kan en mindre utgivelse føre til feil i koden din.

det er et stort skritt fremover at frontend er nå helt laget av komponenter og direktiver og kan bruke alle funksjonene fra Andre JavaScript-biblioteker. Er det lett å kommunisere med databasen og gjøre bruk Av WebSockets. Det har også blitt en bedre måte å lage direktiver og komponenter som er svært enkle å integrere med andre rammer. Det er ikke lenger et Typisk JavaScript-rammeverk, det er kompilert Til JavaScript, men faktisk kan alle språk brukes hvis det kan kompileres Til JavaScript.

kombinasjonen Av Angular2 med TypeScript gir en stor mulighet i objektorientert programmering i frontend. Den deklarative naturen gjør det mye klarere.

Alt dette ser veldig lovende ut og vil trolig endre måten vi utvikler frontends på. Vi må sannsynligvis vente til alle frontend implementeringer er ferdige.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.