Vinklet 2 på 10 minutter

Måten vi kan utvikle applikasjoner på i dag har redusert kompleksiteten i utviklingen betraktelig, og til tross for at den inkluderer nye teknologier som i begynnelsen kan virke noe kompliserte, hjelper de faktisk ikke bare med å bygge bedre applikasjoner, men også til å bli tilpasset gjeldende brukervennlighetskrav.

En av disse teknologiene vi kan bruke er AngularJS, som er et MVW -rammeverk (Modell-visning-uansett) som oversettes som Model-View-Whatever-works-for you, den er basert på JavaScript og lar oss levere våre dokumenter HTML statiske trekk ved dynamisk funksjonalitet og bruk av bindinger å injisere data i HTML -koden vår ved hjelp av rammeverkets egne direktiver.

Angular fungerer ganske bra, men vi har en ny iterasjon av det, og det gjør det mulig å utvide funksjonaliteten til rammeverket mye mer, så la oss se hvordan vi kan begynne å bruke Angular 2 på bare 10 minutter.

1. Få TypeScript og Angular 2

For å gjennomføre denne implementeringen skal vi jobbe på en mest mulig optimal måte, for dette vil vi bruke Typeskrift som er et språk som gjør det mulig å utvide funksjonaliteten til JavaScript å fokusere den på å bruke klasser og objekter.

Å få så mye TypeScript Hva Vinklet 2 det er nødvendig at vi har Node.js, så vel som pakkebehandleren på datamaskinen vår, hvis vi fortsatt ikke har dem, kan du ta en titt på første trinn med Node.js i denne opplæringen.

Når vi har Node.js og pakkelederen NPM vi kan kjøre kommandoene for å få det vi trenger:

 npm install -g tsd@^0.6.0 tsd install angular2 es6-løfte rx rx-lite 

I tillegg må vi installere kompilatoren TypeScript ettersom nettleseren ikke gjenkjenner .ts -filer:

 npm install -g typescript@^1.5.0-beta

Når de er utført, bør vi se ved konsoll installasjonen av modulene, kompilatoren og rammebibliotekene.

FORSTØRRE

Til slutt trenger vi bare å installere en lokal server, for å kjøre applikasjonen vår på en profesjonell måte, for dette i konsollen vår og gjennom NPM utfører vi følgende:

 npm install -g http -server

2. Bygg vår applikasjon

Når vi har alt som er nødvendig for driften av applikasjonen vår, lager vi en mappe der vi vil ha prosjektfilene, vi kan kalle det vinkel 10 min, og inne skal vi lage en fil som heter application.ts og vår vanlige index.html.

Det første vi skal gjøre er å legge til klassene og komponentene i vår application.ts -fil, for dette er det første vi må gjøre er å importere Vinklet 2 som følger:

 importere {Component, View, bootstrap} fra 'angular2 / angular2';

For å bekrefte at kompilatoren vår er i mappen til vårt prosjekt, skal vi utføre følgende:

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

Med det vi skal motta av konsollen at samlingen er fullført vellykket og at den også venter på endringer i filen, er det på grunn av å ha brukt parameteren -watch.

FORSTØRRE

Nå lager vi komponenten vår, der vi skal erklære velgeren som vi vil bruke i HTML -koden vår, så vel som i vårt syn hvor vi vil inkludere malen der vi vil injisere endringene.

 @Component ({selector: 'my-app'}) @View ({template: ''})

Siden kompilatoren vår ser etter endringer og vi har tatt med noen, er det normalt at vi ser aktivitet i konsollen.

Nå trenger vi bare å erklære klassen vår og initialisere objektene inne i konstruktøren som vil være de som deretter vil tømmes i utsikten. Til slutt bruker vi bootstrap () -funksjonen som skal stå for gjengivelse av komponentene på siden vår.

 klasse myComponent {name: string; constructor () {this.name = 'Jonathan'; }} bootstrap (myComponent);

Vi har allerede vår Typescript -kode ferdig, og hvis vi sjekker inn mappen vår, bør vi ha et JavaScript som er resultatet av vår samling av .ts.

FORSTØRRE

3. Bygg HTML

Til slutt må vi bygge HTML, utføre den nødvendige importen, samt inkludere velgerne som vi erklærer i vår .ts -fil, for dette vil vi inkludere system.js, som lar oss utføre import av filen vår, la oss se innholdet i HTML -koden vår:

 Vinklet 2 på 10 minutter 

Når dette er gjort, trenger vi bare å kjøre serveren vår og kjøre applikasjonen vår, for dette stopper vi kompilatoren og kjører serveren med følgende kommando:

 http-server

Dette vil sette opp en server i lokal vert: 8080 og det vil gi oss tilgang til applikasjonen vår.

Vi vil se dataene definert i filen vår TypeScript er de som injiseres i applikasjonen vår, på denne måten skiller vi logikken til applikasjonen vår, og vi kan ha et rent HTML -dokument som bare håndterer velgerne som vi har opprettet takket være Vinklet 2, gir oss en applikasjon som fungerer mer optimalt og effektivt med minst mulig innsats.