Vinklet 2 på 10 minutter

Den måde, hvorpå vi kan udvikle applikationer i dag, har reduceret kompleksiteten i udviklingen betydeligt, og på trods af at de inkluderer nye teknologier, der i starten kan virke noget komplicerede, hjælper de faktisk ikke kun med at opbygge bedre applikationer, men også til at blive tilpasset de nuværende brugervenlighedskrav.

En af disse teknologier, som vi kan bruge, er VinkelJS, som er en MVW -ramme (Model-View-Uanset), der oversættes til Model-View-Whatever-works-for dig, det er baseret på JavaScript og giver os mulighed for at levere vores dokumenter HTML statiske funktioner i dynamisk funktionalitet og til at bruge bindinger at injicere data i vores HTML ved hjælp af rammernes egne direktiver.

Angular fungerer ganske godt, men vi har en ny iteration af det, og det giver mulighed for at udvide funktionaliteten af ​​rammen meget mere, så lad os se, hvordan vi kan begynde at bruge Vinkel 2 på bare 10 minutter.

1. Hent TypeScript og Angular 2

For at gennemføre denne implementering arbejder vi på den mest optimale måde, for dette vil vi bruge Typeskrift som er et sprog, der gør det muligt at udvide funktionaliteten af JavaScript at fokusere det på at bruge klasser og objekter.

At få så meget TypeScript Hvad Vinklet 2 det er nødvendigt, at vi har Node.js, såvel som dens pakkeleder på vores computer, hvis vi stadig ikke har dem, kan du tage et kig på første trin med Node.js i denne vejledning.

Når vi har Node.js og pakkelederen NPM vi kan køre kommandoerne for at få det, vi har brug for:

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

Derudover skal vi installere compileren TypeScript da browseren ikke genkender .ts -filer:

 npm installer -g typescript@^1.5.0-beta

Når de er udført, skal vi se ved konsol installationen af ​​modulerne, kompilatoren og rammebibliotekerne.

FORSTØRRE

Endelig skal vi kun installere en lokal server, for at køre vores applikation på en professionel måde, for dette i vores konsol og gennem NPM udfører vi følgende:

 npm install -g http -server

2. Bygger vores applikation

Når vi har alt, hvad der er nødvendigt for driften af ​​vores applikation, opretter vi en mappe, hvor vi vil have projektfilerne, vi kan kalde det kantet 10 min, og indeni skal vi oprette en fil kaldet application.ts og vores sædvanlige index.html.

Den første ting, vi skal gøre, er at tilføje klasser og komponenter til vores application.ts -fil, for dette er det første, vi skal gøre, at importere Vinklet 2 som følger:

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

For at kontrollere, at vores kompilator er i mappen i vores projekt, vil vi udføre følgende:

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

Med hvad vi skulle modtage af konsollen, at kompilationen er blevet gennemført med succes, og at den også venter på ændringer i filen, er det på grund af at have brugt parameteren -watch.

FORSTØRRE

Nu opretter vi vores komponent, hvor vi vil erklære vælger som vi vil bruge i vores HTML -kode, samt vores opfattelse, hvor vi vil inkludere skabelonen, hvor vi vil injicere ændringerne.

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

Da vores kompilator ser efter ændringer, og vi har inkluderet nogle, er det normalt, at vi ser noget aktivitet i vores konsol.

Nu mangler vi kun at erklære vores klasse og initialisere objekterne inde i konstruktøren, der vil være dem, der derefter tømmes i visningen. Endelig bruger vi bootstrap () -funktionen, der skal stå for gengivelse af komponenterne på vores side.

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

Vi har allerede vores Typescript -kode færdig, og hvis vi tjekker vores mappe, skal vi have et JavaScript, der er resultatet af vores kompilering af .ts.

FORSTØRRE

3. Bygger HTML

Endelig er vi nødt til at bygge HTML, udføre den foreskrevne import samt inkludere de vælgere, som vi erklærer i vores .ts -fil, for dette vil vi inkludere system.js, som giver os mulighed for at udføre importere af vores fil, lad os se indholdet af vores HTML:

 Vinklet 2 på 10 minutter 

Når dette er gjort, behøver vi kun at køre vores server og køre vores applikation, for dette stopper vi kompilatoren og udfører serveren med følgende kommando:

 http-server

Dette vil oprette en server i lokal vært: 8080 og det giver os adgang til vores applikation.

Vi vil se de data, der er defineret i vores fil TypeScript er dem, der injiceres i vores applikation, adskiller vi på denne måde vores applikations logik, og vi kan have et rent HTML -dokument, der kun håndterer de selektorer, som vi har oprettet takket være Vinklet 2, hvilket giver os en applikation, der fungerer mere optimalt og effektivt med den mindst mulige indsats.