Angular, nástupca AngularJS, je vývojová platforma pre vytváranie mobilných a desktopových aplikácií pomocou TypeScript a / alebo JavaScript a ďalších jazykov. Angular je populárny na vytváranie veľkoobjemových webov a podporuje webové, mobilné webové stránky, natívne mobilné aplikácie a natívne desktopové aplikácie.
Vývojový tím Angular core je rozdelený medzi zamestnancov spoločnosti Google a silnú komunitu; čoskoro to nezmizne. Okrem svojich rozsiahlych schopností má platforma Angular silný externý ekosystém: Niekoľko významných IDE podporuje Angular, má štyri dátové knižnice, existuje pol tucta užitočných nástrojov a viac ako tucet sád komponentov používateľského rozhrania a existujú desiatky Uhlové knihy a kurzy. V roku 2015, keď som spoločnosti AngularJS udelil cenu Bossie Award, som vysvetlil, že ide o rámec JavaScript AJAX modelu model-view-whatever (MVW), ktorý rozširuje HTML so značkami pre dynamické zobrazenia a obojsmerné viazanie údajov. Angular je obzvlášť vhodný na vývoj jednostránkových webových aplikácií a na prepojenie formulárov HTML s modelmi a radičmi JavaScriptu. Nový Angular je napísaný skôr v stroji ako v JavaScripte, čo má veľa výhod, ako vysvetlím.
Podivne znejúci vzor „model-view-whatever“ je pokusom zahrnúť modely model-view-controller (MVC), model-view-view-model (MVVM) a model-view-presenter (MVP) pod jednu. prezývka. Rozdiely medzi týmito tromi úzko súvisiacimi vzormi sú to, o čom programátori radi tvrdo polemizujú; vývojári Angular sa rozhodli odhlásiť z diskusie.
V zásade Angular automaticky synchronizuje údaje z vášho používateľského rozhrania (zobrazenia v AngularJS a šablóny v Angular 2 a vyššie) s vašimi objektmi JavaScript (modelom) prostredníctvom obojsmernej dátovej väzby. Aby sme vám pomohli lepšie štruktúrovať aplikáciu a uľahčili jej testovanie, Angular učí prehliadač, ako robiť vkladanie závislostí a inverziu riadenia. Nový Angular (verzia 2 a vyššia) nahrádza pohľady a radiče komponentmi a prijíma štandardné konvencie, ktoré uľahčujú porozumenie a umožňujú vývojárom sústrediť sa na vývoj modulov a tried ECMAScript 6. Inými slovami, Angular 2 je celkové prepísanie AngularJS, ktoré sa snaží lepšie implementovať rovnaké nápady. Šablóny uhlového pohľadu, ktoré majú dosť jednoduchú syntax, sú kompilované do JavaScriptu, ktorý je dobre optimalizovaný pre moderné motory JavaScriptu. Nový smerovač komponentov v Angular 2 umožňuje delenie kódu (lenivé načítanie), aby sa znížilo množstvo kódu dodaného na vykreslenie pohľadu.
Stiahnutie Začíname s Angular Stiahnite si tento výukový program Angular v pohodlnom formáte PDFPrečo Angular? A kedy to nie je dobrá voľba?
Výber rámca JavaScriptu pre webovú aplikáciu je druh procesu, ktorý vyvoláva náboženské vojny medzi vývojármi. Nie som tu preto, aby som proselytizoval Angular, ale chcem, aby ste poznali jeho výhody a nevýhody. V ideálnom prípade by ste si mali zvoliť rámec, ktorý je vhodný pre vašu aplikáciu, pričom treba brať do úvahy schopnosti vašej organizácie a rámce, ktoré používate v iných aplikáciách. Všeobecne má Angular dobré nástroje a je vhodný pre skutočne veľké projekty s vysokou premávkou. Angular, ako kompletný prepis z AngularJS, bol od základu navrhnutý pre použitie na mobilných zariadeniach a pre vysoký výkon. Rovnako ako jeho predchodca robí väzby údajov ľahko a dobre.
Angular používa vzor webových komponentov, ale nie webové komponenty ako také. Nie je to Polymér, ktorý vytvára skutočné webové komponenty, aj keď Polymerové webové komponenty môžete použiť v uhlových aplikáciách, ak chcete. Úhlový používa inverziu vzorov riadenia (IoC) a závislosť injekcie (DI) a opravuje niektoré problémy s ich implementáciou AngularJS.
Angular používa smernice a komponenty, ktoré kombinujú logiku so značkami HTML. Jeden myšlienkový smer hovorí, že zmiešanie logiky s prezentáciou je kardinálnym hriechom. Iná myšlienková škola hovorí, že mať všetko, čo program deklaruje na jednom mieste, uľahčuje rozvoj a porozumenie. To je otázka, o ktorej sa budete musieť rozhodnúť sami, pretože som sa ocitol na rôznych stranách otázky pre rôzne projekty.
Angular má nejaké problémy s dokumentáciou, časté problémy so spätnou kompatibilitou a veľa konceptov, ktoré by sa mal nový vývojár naučiť. Na druhej strane má Angular obrovský ekosystém, ktorý vypĺňa medzery v dokumentácii Angular webovými návodmi, videami a knihami tretích strán.
O stroji TypeScript
Angular je implementovaný v TypeScripte, kačice napísanej nadmnožine JavaScriptu, ktorá sa prenáša do JavaScriptu. Všeobecne sa aplikácie TypeScript ľahšie udržiavajú v produkčnom rozsahu ako JavaScript. Jednoduchý proces určovania, či sú vaše typy správne v čase kompilácie, eliminuje veľkú triedu bežných chýb JavaScriptu a znalosť typov umožňuje editorom, nástrojom a IDE byť užitočnejšími pri dokončovaní, refaktoringu a kontrole kódu.
Som náhodou veľkým fanúšikom TypeScriptu. Považujem za oveľa produktívnejšie pracovať na veľkom projekte TypeScript, ako pracovať na veľkom projekte JavaScript. S jazykom JavaScript naozaj nikdy neviem, či v kóde číhajú chyby, ktoré čakajú na to, že ma uhryznú, bez ohľadu na to, ako často spúšťam JSHint. S TypeScriptom sa cítim oveľa bezpečnejšie, aspoň keď som pridal voliteľné typy, triedy, moduly a rozhrania.
Začíname: Nainštalujte si Angular, TypeScript a Visual Studio Code
Z tohto dôvodu si nainštalujeme softvér a môžeme začať.
Nainštalujte si Node.js a NPM
Predtým, ako urobíte čokoľvek iné, musíte nainštalovať Node.js a NPM, správcu balíkov uzlov, pretože tvoria základ väčšej časti inštalácie a nástrojov Angular. Ak chcete zistiť, či sú nainštalované, a ak áno, ktoré verzie sú nainštalované, prejdite do príkazového riadku konzoly alebo terminálu a zadajte nasledujúce dva príkazy:
$ uzol -v $ npm -v
V mojom počítači je nahlásená verzia Node.js v6.9.5 a verzia NPM je 3.10.10. To sú momentálne aktuálne verzie s dlhodobou podporou, ako môžem zistiť pri pohľade na //nodejs.org/. Ak sú vaše verzie aktuálne, môžete prejsť na ďalšiu časť. Ak sa niektorý príkaz nenájde alebo je niektorá verzia zastaraná, mali by ste si nainštalovať aktuálne verzie. Moje verzie sú aktuálne, pretože som nedávno znovu nainštaloval Node, ako je to znázornené na snímke obrazovky nižšie. Inštalácia súborov Node.js aj NPM je záležitosťou prehliadania stránok nodejs.org, stlačenia zeleného tlačidla LTS a vykonania pokynov.
Po dokončení inštalácie znova skontrolujte verzie, aby ste sa ubezpečili, že sú skutočne aktualizované. Viem, že opakovanie kontroly znie paranoidne, ale dobrý programátor potrebuje zdravú dávku paranoje, aby sa vyhol chybám, a prerušené inštalácie nie sú neobvyklé.
1. Nainštalujte Angular
Existujú dva spôsoby, ako nainštalovať a používať Angular. Najprv vám ukážem metódu rozhrania príkazového riadku (CLI), a to z niekoľkých dôvodov. Prvý je, že to lepšie zapadá do spôsobu, akým rád pracujem. Druhým je to, že CLI generuje úplnejšiu štartovaciu aplikáciu ako osivo QuickStart. Tretie je, že krok čistenia v pokynoch na začatie procesu QuickStart vyzerá, že by mohol spôsobiť zmätok, ak sa použije v nesprávnom čase alebo v nesprávnom adresári.
Prejdite na stránku //angular.io/ a kliknite na jedno z troch tlačidiel Začíname. Všetci idú na rovnaké miesto, do služby Angular QuickStart.
Prečítajte si túto stránku znova a môžete vyskúšať príklad QuickStart na serveri Plunker prostredníctvom odkazu po prvom bloku kódu. Len čo si myslíte, že môžete nasledovať @ Komponent funkcia dekorátora a výraz väzby uhlovej interpolácie {{názov}}, kliknite na odkaz CLI QuickStart vľavo. Nerobte si starosti s tým, ako sa implementuje funkcia dekoratéra a interpolačná väzba: k tomu sa dostaneme.
1a. Nainštalujte a otestujte Angular-CL
Podľa pokynov nastavíme vývojové prostredie CLI. Prvým krokom je globálna inštalácia Angular a jeho CLI s npm:
$ npm inštalácia -g @ angular / cli
Ak budete pozorne sledovať, ako inštalácia pokračuje, uvidíte pred serverom Angular a jeho rozhraním CLI nainštalovaných množstvo predpokladov a nástrojov. Ak existujú varovania, nebojte sa o ne. Ak sa vyskytnú chyby, možno ich budete musieť opraviť; Varovania som videl iba sám. Bezpečné preinštalovanie Angular CLI je bezpečné kedykoľvek.
Ďalším krokom je vytvorenie nového projektu s Angular CLI. Moje som vložil do adresára s názvom Pracovať v priečinku môjho domáceho používateľa.
$ cd práca $ ng nová moja aplikácia
Ako je uvedené v pokynoch, generovanie novej aplikácie Angular trvá niekoľko minút. Je vhodný čas na uvarenie peknej šálky čaju alebo kávy.
Na snímke obrazovky uvidíte, že som dvakrát skontroloval svoju verziu TypeScript (tsc -v) po inštalácii Angular CLI. Áno, bolo to trochu paranoidné. A áno, je to dobrý nápad aj pre vás. Ak ste TypeScript ešte nenainštalovali, postarajme sa o to teraz:
$ npm install –g strojopis
Už sme skoro tam. Ďalej vstúpte do nového adresára a podajte aplikáciu.
$ cd moja aplikácia $ ng slúži
Ako vám server povie, načúva na porte 4200. Takže otvorte kartu prehliadača na // localhost: 4200 a uvidíte obrázok vľavo.
Zostatok na stránke CLI QuickStart vás informuje o zmene vlastnosti title a jej CSS. Pokojne to urobte s čímkoľvek programovanie editor (nie textový procesor!), ktorý ste náhodou nainštalovali, alebo počkajte, kým nainštalujete Visual Studio Code neskôr. Okno prehliadača sa bude aktualizovať automaticky, kedykoľvek uložíte, pretože server sleduje kód a aktualizácie týkajúce sa zmien.
Po dokončení procesu server ukončite stlačením klávesovej skratky Control-C v okne terminálu.
1b. Nainštalujte osivo Angular QuickStart
Iba urobte tento krok, ak ste preskočili krok 1a. Ak urobíš oboje krokov, táto inštalácia zosvetlí časť inštalácie CLI a budete ju musieť znova urobiť, ak ju budete chcieť znova použiť. Pokyny na inštaláciu semena QuickStart ponúkajú dve možnosti spustenia procesu: stiahnutie semena a jeho rozbalenie alebo alternatívne klonovanie semena, a to nasledovne:
$ git clone //github.com/angular/quickstart.git rýchly štart
Bez ohľadu na to, ktorú možnosť získate na získanie kódu, ďalšie kroky sú rovnaké:
$ cd rýchly štart
(alebo ako ste priečinok pomenovali)
$ npm inštalácia$ npm štart
The npm nainštalovať krok robí v podstate to isté ako $ npm inštalácia -g @ angular / cli krok vo verzii CLI inštalácie, až na to, že inštaluje TypeScript a robí nie nainštalujte Angular CLI, pretože to nie je na zozname závislostí v balíček.json. V skutočnosti, ak je už Angular CLI nainštalovaný, tento skript bude odinštalovať to.
The npm štart krok spustí tento skript:
"start": "súčasne \" npm beh build: watch \ "\" npm run serve \ ""
Aby to bolo možné rozšíriť, skripty build: watch a serve sú:
"build: watch": "tsc -p src / -w"
a
"serve": "lite-server -c = bs-config.json"
Už som to spomínal tsc je kompilátor TypeScript? The -p voľba nastaví adresár projektu na kompiláciu a -w možnosť hovorí, že sleduje vstupné súbory.
The npm štart krok (súčasné spustenie dvoch skriptov) urobí v podstate to isté ako ng slúžiť krok vo verzii CLI inštalácie, až na to, že je pravdepodobné, že si vyberiete iný port, navyše automaticky načíta stránku, ktorú zobrazuje, vo vašom predvolenom prehliadači a stránka bude vyzerať ako obrázok vľavo.
Po dokončení hry s aplikáciou Angular QuickStart proces ukončite iba stlačením klávesov Ctrl + C alebo zatvorením okna terminálu. Môžete ho znova spustiť návratom do adresára a spustením ng slúžiť.
Ďalším (voliteľným) krokom v pokynoch k semenu QuikStart je ten, ktorý ma znervózňuje: Povie vám, aby ste odstránili nepodstatné súbory pomocou rm -rf v systéme MacOS alebo del vo Windows. Ak sa to rozhodnete urobiť, pred spustením skriptu, ktorý ste skopírovali z dokumentačnej stránky, aspoň raz skontrolujte, či sa nachádzate v správnom adresári. Po začatí pridávania súborov do projektu to neskúšajte.
Bez ohľadu na to, či ste postupovali podľa inštrukcií CLI alebo QuickStart seed, vašim ďalším krokom bude preskúmanie zdrojového kódu projektu Angular. Na tento účel si nainštalujeme editor pracujúci v uhle.
2. Nainštalujte kód Visual Studio
Stránka Angular resources odporúča tri IDE: IntelliJ IDEA, Visual Studio Code a WebStorm. Používam všetky tri, ale pre účely tohto cvičenia je Visual Studio Code najlepšou voľbou, pretože je to bezplatný a otvorený zdroj. Prejdite na domovskú stránku Visual Studio Code a stiahnite si aktuálnu stabilnú verziu pre svoju platformu a potom nainštalujte balík.
Po nainštalovaní Visual Studio Code ho spustite a otvorte adresár, v ktorom je uložený váš základný projekt. Na mojom počítači Mac je projekt generovaný CLI na ~ / work / my-app a semeno je na ~ / work / quickstartmaster. Vaše umiestnenie sa bude líšiť v závislosti od toho, či ste vykonali inštaláciu rozhrania CLI alebo počiatočnú inštaláciu, a všetkých možností, ktoré ste vykonali v súvislosti s ich cieľovými adresármi. Zdrojový strom by mal vyzerať asi takto:
Kód Visual Studio podporuje TypeScript už po vybalení, takže už nie je potrebné nič inštalovať. Ak si chcete neskôr nainštalovať ďalšie jazyky, je to ľahké na paneli Rozšírenia, ktorý sa ľahko zobrazí kliknutím na ikonu dole v ľavom hornom rohu. Do vyhľadávacieho poľa v hornej časti panela Rozšírenia zadajte názov požadovaného jazyka alebo nástroja. Kliknutím na hornú ikonu vľavo hore sa môžete vrátiť do Prieskumníka súborov.
