Kutni 2 za 10 minuta

Način na koji danas možemo razvijati aplikacije znatno je smanjio složenost razvoja, pa unatoč uključivanju novih tehnologija koje se na prvu mogu činiti donekle kompliciranim, one zapravo pomažu ne samo u izgradnji boljih aplikacija, već i u prilagodbi trenutnim zahtjevima upotrebljivosti.

Jedna od ovih tehnologija koju možemo koristiti je AngularJS, koji je okvir MVW (Model-Pogled-Svejedno) što se prevodi kao Model-View-Whatever-works-for you, temelji se na JavaScript-u i omogućuje nam da dostavimo naše dokumente HTML statičke značajke dinamičke funkcionalnosti i korištenje vezivanja za ubrizgavanje podataka u naš HTML koristeći vlastite direktive okvira.

Angular radi prilično dobro, ali imamo njegovu novu iteraciju i dopušta mnogo više proširenja funkcionalnosti okvira, pa da vidimo kako možemo početi koristiti Ugao 2 u samo 10 minuta.

1. Dobivanje TypeScript -a i Angular -a 2

Kako bismo proveli ovu implementaciju, radit ćemo na najoptimalniji mogući način, za to ćemo koristiti Strojopis koji je jezik koji omogućuje proširenje funkcionalnosti JavaScript usredotočiti na korištenje klasa i objekata.

Da biste dobili toliko TypeScript Što Kutni 2 potrebno je da imamo Node.js, kao i upravitelja paketa na našem računalu, ako ih još uvijek nemamo, možete pogledati prvi koraci s Node.js u ovom vodiču.

Kad jednom imamo Node.js i upravitelja paketa NPM možemo pokrenuti naredbe da bismo dobili ono što nam je potrebno:

 npm install -g tsd@^0.6.0 tsd install angular2 es6-obećanje rx rx-lite 

Dodatno moramo instalirati kompajler TypeScript budući da preglednik ne prepoznaje .ts datoteke:

 npm install -g typcript@^1.5.0-beta

Nakon izvođenja, trebali bismo vidjeti putem konzole instalaciju modula, prevoditelja i knjižnica okvira.

POVEĆAJTE

Konačno, moramo samo instalirati lokalni poslužitelj, kako bismo našu aplikaciju pokrenuli na profesionalan način, za to u našoj konzoli i kroz NPM izvršavamo sljedeće:

 npm install -g http -poslužitelj

2. Izrada naše aplikacije

Nakon što imamo sve potrebno za rad naše aplikacije, stvaramo mapu u kojoj ćemo imati datoteke projekta, koje možemo nazvati kutna10min, a unutra ćemo stvoriti datoteku pod nazivom aplikacija.ts i naše uobičajeno index.html.

Prvo što ćemo učiniti je dodati klase i komponente u našu datoteku application.ts, jer ovo prvo što moramo učiniti je uvoz Kutni 2 kako slijedi:

 uvoz {Component, View, bootstrap} iz 'angular2 / angular2';

Kako bismo provjerili rad našeg prevoditelja koji se nalazi u mapi našeg projekta, izvršit ćemo sljedeće:

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

Uz ono što bismo trebali dobiti od konzole da je kompilacija uspješno dovršena i da također čeka promjene u datoteci, to je zbog upotrebe parametra -watch.

POVEĆAJTE

Sada stvaramo našu komponentu, gdje ćemo deklarirati selektor koji ćemo koristiti u našem HTML kodu, kao i naš prikaz gdje ćemo uključiti predložak u koji ćemo unijeti promjene.

 @Komponenta ({selector: 'my-app'}) @View ({predložak: ''})

Kako naš prevoditelj gleda promjene i mi smo neke uključili, normalno je da vidimo neku aktivnost u našoj konzoli.

Sada moramo samo napraviti deklaraciju naše klase i inicijalizirati objekte unutar konstruktora koji će biti oni koji će se tada isprazniti u prikazu. Na kraju koristimo funkciju bootstrap () koja će biti zadužena za iscrtavanje komponenti na našoj stranici.

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

Naš je kod Typescript već završen, a ako provjerimo u našoj mapi, trebali bismo imati JavaScript koji je rezultat naše kompilacije .ts.

POVEĆAJTE

3. Izgradnja HTML -a

Konačno, moramo izgraditi HTML, izvršiti dužni uvoz, kao i uključiti birače koje deklariramo u našoj .ts datoteci, za to ćemo uključiti system.js, što će nam omogućiti izvođenje uvoz naše datoteke, pogledajmo sadržaj našeg HTML -a:

 Kutni 2 za 10 minuta 

Nakon što to učinimo, moramo samo pokrenuti naš poslužitelj i pokrenuti našu aplikaciju. Za to zaustavljamo prevoditelj i izvršavamo poslužitelj sa sljedećom naredbom:

 http poslužitelj

Ovo će postaviti poslužitelj u localhost: 8080 i to će nam omogućiti pristup našoj aplikaciji.

Vidjet ćemo podatke definirane u našoj datoteci TypeScript jesu li oni koji su ubrizgani u našu aplikaciju, na ovaj način odvajamo logiku naše aplikacije i možemo imati čisti HTML dokument koji rukuje samo selektorima koje smo stvorili zahvaljujući Kutni 2, dajući nam aplikaciju koja radi optimalnije i učinkovitije uz najmanje moguće napore.