Hoek 2 in 10 minuten

De manier waarop we tegenwoordig applicaties kunnen ontwikkelen, heeft de complexiteit van ontwikkelingen aanzienlijk verminderd, en ondanks het feit dat er nieuwe technologieën zijn toegevoegd die op het eerste gezicht misschien wat ingewikkeld lijken, helpen ze niet alleen om betere applicaties te bouwen, maar ook om ze aan te passen aan de huidige bruikbaarheidseisen.

Een van deze technologieën die we kunnen gebruiken is: AngularJS, wat een MVW-raamwerk is (Model-View-Whatever) wat zich vertaalt als Model-View-Whatever-works-for you, het is gebaseerd op JavaScript en stelt ons in staat om onze documenten te verstrekken HTML statische kenmerken van dynamische functionaliteit en om de bindingen om gegevens in onze HTML te injecteren met behulp van de eigen richtlijnen van het framework.

Angular werkt redelijk goed, maar we hebben er een nieuwe iteratie van en het maakt het mogelijk om de functionaliteit van het framework veel meer uit te breiden, laten we dan eens kijken hoe we kunnen beginnen met gebruiken Hoek 2 in slechts 10 minuten.

1. TypeScript en Angular krijgen 2

Om deze implementatie uit te voeren gaan we zo optimaal mogelijk te werk, hiervoor gebruiken we getypt dat is een taal die het mogelijk maakt om de functionaliteit van JavaScript om het te focussen op het gebruik van klassen en objecten.

Om zoveel te krijgen TypeScript Wat Hoekig 2 het is noodzakelijk dat we hebben Node.js, evenals de pakketbeheerder op onze computer, als we ze nog steeds niet hebben, kunt u een kijkje nemen op de eerste stappen met Node.js in deze zelfstudie.

Als we hebben Node.js en de pakketbeheerder NPM we kunnen de opdrachten uitvoeren om te krijgen wat we nodig hebben:

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

Bovendien moeten we de compiler installeren TypeScript omdat de browser geen .ts-bestanden herkent:

 npm install -g typescript@^1.5.0-bèta

Eenmaal uitgevoerd, zouden we per console de installatie van de modules, de compiler en de framework-bibliotheken moeten zien.

VERGROTEN

Ten slotte hoeven we alleen een lokale server te installeren, om onze applicatie op een professionele manier te laten draaien, hiervoor in onze console en via NPM voeren we het volgende uit:

 npm install -g http-server

2. Onze applicatie bouwen

Zodra we alles hebben wat nodig is voor de werking van onze applicatie, maken we een map waarin we de projectbestanden zullen hebben, we kunnen deze noemen hoekig10min, en binnenin gaan we een bestand maken met de naam applicatie.ts en onze gebruikelijke index.html.

Het eerste dat we gaan doen, is de klassen en componenten toevoegen aan ons application.ts-bestand, hiervoor moeten we eerst importeren Hoekig 2 als volgt:

 importeer {Component, View, bootstrap} van 'angular2 / angular2';

Om de werking van onze compiler in de map van ons project te verifiëren, gaan we het volgende uitvoeren:

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

Met wat we door de console zouden moeten ontvangen dat de compilatie succesvol is voltooid en dat het ook wacht op wijzigingen in het bestand, dat komt door het gebruik van de -watch parameter.

VERGROTEN

Nu maken we onze component, waar we de . declareren selector die we zullen gebruiken in onze HTML-code, evenals onze weergave waar we de sjabloon zullen opnemen waarin we de wijzigingen zullen injecteren.

 @Component ({selector: 'mijn-app'}) @View ({sjabloon: ''})

Aangezien onze compiler op veranderingen let en we er enkele hebben toegevoegd, is het normaal dat we enige activiteit in onze console zien.

Nu hoeven we alleen nog de declaratie van onze klasse te maken en de objecten in de constructor te initialiseren die dan in de view zullen worden geleegd. Ten slotte gebruiken we de bootstrap () -functie die verantwoordelijk is voor het weergeven van de componenten op onze pagina.

 class myComponent {naam: string; constructor () {deze.naam = 'Jonathan'; }} bootstrap (mijnComponent);

We hebben onze Typescript-code al klaar en als we onze map inchecken, zouden we een JavaScript moeten hebben dat het resultaat is van onze compilatie van de .ts.

VERGROTEN

3. De HTML bouwen

Ten slotte moeten we de bouwen HTML, voer de juiste invoer uit en neem de selectors die we aangeven in ons .ts-bestand, hiervoor zullen we de system.js, waarmee we de kunnen uitvoeren importeren van ons bestand, laten we de inhoud van onze HTML eens bekijken:

 Hoek 2 in 10 minuten 

Zodra dit is gebeurd, hoeven we alleen onze server en onze applicatie uit te voeren, hiervoor stoppen we de compiler en voeren we de server uit met het volgende commando:

 http-server

Dit zal een server opzetten in localhost: 8080 en het geeft ons toegang tot onze applicatie.

We zullen de gegevens zien die in ons bestand zijn gedefinieerd TypeScript zijn die geïnjecteerd in onze applicatie, op deze manier scheiden we de logica van onze applicatie en kunnen we een schoon HTML-document hebben dat alleen de selectors verwerkt die we hebben gemaakt dankzij Hoekig 2, waardoor we een applicatie hebben die met zo min mogelijk inspanning optimaal en efficiënter werkt.