Způsob, jakým dnes můžeme vyvíjet aplikace, značně snížil složitost vývoje, a přestože zahrnuje nové technologie, které se na první pohled mohou zdát poněkud komplikované, ve skutečnosti pomáhají nejen vytvářet lepší aplikace, ale také být přizpůsobeny aktuálním požadavkům na použitelnost.
Jednou z těchto technologií, kterou můžeme použít, je AngularJS, což je rámec MVW (Model-View-Whatever), což pro vás znamená Model-View-Whatever-works-, je založeno na JavaScriptu a umožňuje nám poskytovat naše dokumenty HTML statické vlastnosti dynamické funkce a použití vázání vložit data do našeho HTML pomocí vlastních směrnic rámce.
Angular funguje docela dobře, ale máme jeho novou iteraci a umožňuje mnohem více rozšířit funkčnost rámce, pak se podívejme, jak můžeme začít používat Úhlová 2 za pouhých 10 minut.
1. Získání strojopisu a úhlu 2
Abychom tuto implementaci provedli, budeme pracovat tím nejoptimálnějším možným způsobem, který použijeme Strojopis což je jazyk, který umožňuje rozšířit funkce JavaScript zaměřit se na používání tříd a objektů.
Získat tolik Strojopis Co Úhlová 2 je nutné, abychom měli Node.js, stejně jako jeho správce balíčků v našem počítači, pokud je stále nemáme, můžete se podívat na soubor první kroky s Node.js v tomto tutoriálu.
Jakmile máme Node.js a správce balíčků NPM můžeme spustit příkazy, abychom získali to, co potřebujeme:
npm install -g tsd@^0.6.0 tsd install angular2 es6-slib rx rx-liteKromě toho musíme nainstalovat kompilátor Strojopis protože prohlížeč nerozpozná soubory .ts:
npm install -g typescript@^1.5.0-betaPo spuštění bychom měli pomocí konzoly vidět instalaci modulů, kompilátoru a knihoven frameworků.
ZVĚTŠIT
Nakonec musíme nainstalovat pouze místní server, abychom mohli naši aplikaci provozovat profesionálně, proto v naší konzole a prostřednictvím NPM provedeme následující:
npm install -g http -server
2. Vytváření naší aplikace
Jakmile máme vše potřebné pro provoz naší aplikace, vytvoříme složku, kde budeme mít soubory projektu, můžeme to nazvat úhlové10min, a uvnitř vytvoříme soubor s názvem aplikace.ts a naše obvyklé index.html.
První věc, kterou uděláme, je přidání tříd a komponent do našeho souboru application.ts, proto první věc, kterou musíme udělat, je import Úhlová 2 jak následuje:
import {Component, View, bootstrap} z 'angular2 / angular2';Chcete -li ověřit fungování našeho kompilátoru ve složce našeho projektu, provedeme následující:
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.tsS tím, co bychom měli od konzoly obdržet, byla kompilace úspěšně dokončena a že také čeká na změny v souboru, a to z důvodu použití parametru -watch.
ZVĚTŠIT
Nyní vytvoříme naši komponentu, kde budeme deklarovat soubor volič které použijeme v našem HTML kódu, stejně jako v našem pohledu, kde zahrneme šablonu, kam změny vložíme.
@Component ({selector: 'my-app'}) @View ({template: ''})Protože náš kompilátor sleduje změny a některé jsme zahrnuli, je normální, že v naší konzole vidíme nějakou aktivitu.
Nyní musíme pouze provést deklaraci naší třídy a inicializovat objekty uvnitř konstruktoru, které budou těmi, které budou následně vyprázdněny v pohledu. Nakonec použijeme funkci bootstrap (), která bude mít na starosti vykreslování komponent na naší stránce.
třída myComponent {název: řetězec; konstruktor () {this.name = 'Jonathan'; }} bootstrap (myComponent);Náš strojopisný kód již máme hotový a pokud se podíváme do naší složky, měli bychom mít JavaScript, který je výsledkem naší kompilace .ts.
ZVĚTŠIT
3. Vytváření HTML
Nakonec musíme postavit HTML, proveďte splatné importy a zahrňte selektory, které deklarujeme v našem souboru .ts, proto zahrneme system.js, což nám umožní provést import našeho souboru, podívejme se na obsah našeho HTML:
Úhlová 2 za 10 minutJakmile to bude hotové, stačí spustit náš server a spustit naši aplikaci, za tímto účelem zastavíme kompilátor a spustíme server následujícím příkazem:
http-serverTím se nastaví server v localhost: 8080 a umožní nám to přístup k naší aplikaci.
Uvidíme data definovaná v našem souboru Strojopis jsou ty, které jsou vloženy do naší aplikace, tímto způsobem oddělujeme logiku naší aplikace a můžeme mít čistý dokument HTML, který zpracovává pouze voliče, které jsme vytvořili díky Úhlová 2, což nám dává aplikaci, která pracuje optimálněji a efektivněji s vynaložením co nejmenšího úsilí.
