Vinkel 2 på 10 minuter

Det sätt på vilket vi kan utveckla applikationer idag har minskat komplexiteten i utvecklingen avsevärt, och trots att de inkluderar ny teknik som till en början kan verka lite komplicerad, hjälper de faktiskt inte bara att bygga bättre applikationer utan också att anpassas till nuvarande användbarhetskrav.

En av dessa tekniker som vi kan använda är AngularJS, som är ett MVW -ramverk (Model-View-Whatever) som översätts till Model-View-Whatever-works-for you, det är baserat på JavaScript och tillåter oss att tillhandahålla våra dokument HTML statiska funktioner i dynamisk funktionalitet och att använda bindningar att injicera data i vår HTML med hjälp av ramens egna direktiv.

Angular fungerar ganska bra, men vi har en ny iteration av det och det gör det möjligt att förlänga ramens funktionalitet mycket mer, låt oss se hur vi kan börja använda Angular 2 på bara 10 minuter.

1. Skaffa TypeScript och Angular 2

För att genomföra denna implementering kommer vi att arbeta på ett så optimalt sätt som möjligt, för detta kommer vi att använda Typskrift vilket är ett språk som gör det möjligt att utöka funktionaliteten för JavaScript att fokusera det på att använda klasser och objekt.

Att få så mycket TypeScript Vad Vinkel 2 det är nödvändigt att vi har Node.js, liksom dess pakethanterare på vår dator, om vi fortfarande inte har dem kan du ta en titt på första stegen med Node.js i denna handledning.

När vi har Node.js och pakethanteraren NPM vi kan köra kommandona för att få det vi behöver:

 npm install -g tsd@^0.6.0 tsd install angular2 es6-love rx rx-lite 

Dessutom måste vi installera kompilatorn TypeScript eftersom webbläsaren inte känner igen .ts -filer:

 npm installera -g typescript@^1.5.0-beta

När de väl har körts bör vi se genom konsolen installationen av modulerna, kompilatorn och rambiblioteken.

FÖRSTORA

Slutligen behöver vi bara installera en lokal server, för att köra vår applikation på ett professionellt sätt, för detta i vår konsol och genom NPM kör vi följande:

 npm installera -g http -server

2. Bygg vår applikation

När vi har allt som är nödvändigt för driften av vår applikation skapar vi en mapp där vi kommer att ha projektfilerna, vi kan kalla det vinkel 10 min, och inuti ska vi skapa en fil som heter application.ts och vår vanliga index.html.

Det första vi ska göra är att lägga till klasserna och komponenterna i vår application.ts -fil, för det första vi måste göra är att importera Vinkel 2 som följer:

 importera {Component, View, bootstrap} från 'angular2 / angular2';

För att verifiera hur vår kompilator finns i mappen i vårt projekt kommer vi att utföra följande:

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

Med vad vi ska få av konsolen att sammanställningen har slutförts framgångsrikt och att den också väntar på ändringar i filen, det är på grund av att ha använt parametern -watch.

FÖRSTORA

Nu skapar vi vår komponent, där vi kommer att deklarera väljare som vi kommer att använda i vår HTML -kod, liksom vår uppfattning där vi kommer att inkludera mallen där vi kommer att injicera ändringarna.

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

Eftersom vår kompilator tittar på förändringar och vi har inkluderat några är det normalt att vi ser lite aktivitet i vår konsol.

Nu behöver vi bara göra en deklaration av vår klass och initialisera de objekt inuti konstruktorn som kommer att vara de som sedan kommer att tömmas i vyn. Slutligen använder vi bootstrap () -funktionen som kommer att ansvara för att göra komponenterna på vår sida.

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

Vi har redan vår Typescript -kod klar, och om vi checkar in vår mapp bör vi ha ett JavaScript som är resultatet av vår sammanställning av .ts.

FÖRSTORA

3. Bygg HTML

Slutligen måste vi bygga HTML, utför den förfallna importen samt inkludera de väljare som vi deklarerar i vår .ts -fil, för detta kommer vi att inkludera system.js, vilket gör att vi kan utföra importera i vår fil, låt oss se innehållet i vår HTML:

 Vinkel 2 på 10 minuter 

När detta är gjort behöver vi bara köra vår server och köra vår applikation, för detta stoppar vi kompilatorn och kör servern med följande kommando:

 http-server

Detta kommer att skapa en server i lokal värd: 8080 och det ger oss tillgång till vår applikation.

Vi kommer att se data definierade i vår fil TypeScript är de som injiceras i vår applikation, på detta sätt separerar vi logiken i vår applikation och vi kan ha ett rent HTML -dokument som bara hanterar de väljare som vi har skapat tack vare Vinkel 2, ger oss en applikation som fungerar mer optimalt och effektivt med minsta möjliga ansträngning.