Unghiular 2 în 10 minute

Modul în care putem dezvolta aplicații astăzi a redus considerabil complexitatea dezvoltărilor și, în ciuda includerii de noi tehnologii care la început pot părea oarecum complicate, ele ajută de fapt nu numai la construirea de aplicații mai bune, ci și la adaptarea la cerințele actuale de utilizare.

Una dintre aceste tehnologii pe care o putem folosi este AngularJS, care este un cadru MVW (Model-Vizualizare-Orice) care se traduce ca Model-Vizualizare-Orice-funcționează-pentru dvs., se bazează pe JavaScript și ne permite să furnizăm documentele noastre HTML caracteristici statice ale funcționalității dinamice și de a utiliza legături pentru a injecta date în HTML-ul nostru folosind propriile directive ale cadrului.

Angular funcționează destul de bine, dar avem o nouă iterație a acestuia și permite extinderea funcționalității cadrului mult mai mult, apoi să vedem cum putem începe să folosim Unghiular 2 în doar 10 minute.

1. Obținerea TypeScript și Angular 2

Pentru a realiza această implementare vom lucra în cel mai optim mod posibil, pentru aceasta o vom folosi Mecanografiat care este un limbaj care permite extinderea funcționalității JavaScript pentru a o focaliza pe utilizarea de clase și obiecte.

Pentru a obține atât de mult TypeScript Ce Unghiular 2 este necesar să avem Node.js, precum și managerul de pachete de pe computerul nostru, dacă încă nu le avem, puteți arunca o privire la primii pași cu Node.js în acest tutorial.

Odată ce avem Node.js și managerul de pachete NPM putem executa comenzile pentru a obține ceea ce avem nevoie:

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

În plus, trebuie să instalăm compilatorul TypeScript deoarece browserul nu recunoaște fișierele .ts:

 npm install -g typescript@^1.5.0-beta

Odată executate, ar trebui să vedem prin consolă instalarea modulelor, a compilatorului și a bibliotecilor cadru.

MARI

În cele din urmă, trebuie doar să instalăm un server local, să rulăm aplicația într-un mod profesional, pentru aceasta în consola noastră și prin NPM executăm următoarele:

 npm install -g http-server

2. Construirea aplicației noastre

Odată ce avem tot ce este necesar pentru funcționarea aplicației noastre, creăm un folder în care vom avea fișierele proiectului, îl putem numi unghiular 10min, iar în interior vom crea un fișier numit aplicație.ts și obișnuitul nostru index.html.

Primul lucru pe care îl vom face este să adăugăm clasele și componentele la fișierul nostru application.ts, pentru aceasta primul lucru pe care trebuie să-l facem este să importăm Unghiular 2 după cum urmează:

 importați {Component, View, bootstrap} din „angular2 / angular2”;

Pentru a verifica funcționarea compilatorului nostru în dosarul proiectului nostru, vom executa următoarele:

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

Cu ceea ce ar trebui să primim prin consolă, că compilarea a fost finalizată cu succes și că așteaptă, de asemenea, modificări în fișier, asta datorită utilizării parametrului -watch.

MARI

Acum ne creăm componenta, unde vom declara selector pe care îl vom folosi în codul nostru HTML, precum și în vizualizarea noastră unde vom include șablonul în care vom injecta modificările.

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

Deoarece compilatorul nostru urmărește modificările și le-am inclus, este normal să vedem o anumită activitate în consola noastră.

Acum trebuie doar să facem declarația clasei noastre și să inițializăm obiectele din interiorul constructorului care vor fi cele care vor fi apoi golite în vizualizare. În cele din urmă, folosim funcția bootstrap () care va fi însărcinată cu redarea componentelor de pe pagina noastră.

 clasa Componenta mea {nume: șir; constructor () {this.name = 'Jonathan'; }} bootstrap (myComponent);

Avem deja codul nostru Typescript terminat și, dacă verificăm în folderul nostru, ar trebui să avem un JavaScript care este rezultatul compilării .ts.

MARI

3. Construirea codului HTML

În cele din urmă, trebuie să construim HTML, efectuați importurile datorate, precum și includeți selectoarele pe care le declarăm în fișierul nostru .ts, pentru aceasta vom include system.js, care ne va permite să efectuăm import din fișierul nostru, să vedem conținutul codului nostru HTML:

 Unghiular 2 în 10 minute 

Odată ce ați făcut acest lucru, trebuie doar să ne rulăm serverul și să rulăm aplicația, pentru aceasta oprim compilatorul și executăm serverul cu următoarea comandă:

 http-server

Aceasta va configura un server în localhost: 8080 și ne va permite să accesăm aplicația noastră.

Vom vedea datele definite în fișierul nostru TypeScript sunt cele injectate în aplicația noastră, în acest fel separăm logica aplicației noastre și putem avea un document HTML curat care să gestioneze doar selectoarele pe care le-am creat datorită Unghiular 2, oferindu-ne o aplicație care funcționează mai optim și mai eficient folosind cel mai mic efort posibil.