Angular, nástupce AngularJS, je vývojová platforma pro vytváření mobilních a desktopových aplikací pomocí TypeScript a / nebo JavaScript a dalších jazyků. Angular je populární pro vytváření velkoobjemových webů a podporuje web, mobilní web, nativní mobilní a nativní desktopové aplikace.
Vývojový tým Angular core je rozdělen mezi zaměstnance Google a robustní komunitu; brzy to nezmizí. Kromě vlastních rozsáhlých funkcí má platforma Angular silný externí ekosystém: Několik prominentních IDE podporuje Angular, má čtyři datové knihovny, existuje půl tuctu užitečných nástrojů a více než tucet sad komponent uživatelského rozhraní a existují desítky Úhlové knihy a kurzy. V roce 2015, když jsem získal AngularJS cenu Bossie Award, jsem vysvětlil, že se jedná o framework JavaScript-AJAX model-view-whatever (MVW), který rozšiřuje HTML s označením pro dynamická zobrazení a oboustrannou datovou vazbu. Angular je obzvláště vhodný pro vývoj jednostránkových webových aplikací a propojení formulářů HTML s modely a řadiči JavaScriptu. Nový Angular je napsán spíše v jazyce TypeScript než v jazyce JavaScript, což má mnoho výhod, jak vysvětlím.
Podivně znějící vzor „model-view-whatever“ je pokusem zahrnout vzory model-view-controller (MVC), model-view-view-model (MVVM) a model-view-presenter (MVP) pod jednu přezdívka. Rozdíly mezi těmito třemi úzce souvisejícími vzory jsou druhy věcí, o kterých se programátoři rádi divoce hádají; vývojáři Angular se rozhodli odhlásit z diskuse.
V zásadě Angular automaticky synchronizuje data z vašeho uživatelského rozhraní (zobrazení v AngularJS a šablony v Angular 2 a výše) s vašimi objekty JavaScriptu (modelem) prostřednictvím obousměrné datové vazby. Abychom vám pomohli lépe strukturovat vaši aplikaci a usnadnili testování, Angular učí prohlížeč, jak provádět vkládání závislostí a inverzi ovládání. Nový Angular (verze 2 a vyšší) nahrazuje pohledy a řadiče komponentami a přijímá standardní konvence, což usnadňuje pochopení a umožňuje vývojářům soustředit se na vývoj modulů a tříd ECMAScript 6. Jinými slovy, Angular 2 je celkový přepis AngularJS, který se snaží implementovat stejné nápady lepším způsobem. Šablony úhlového pohledu, které mají poměrně jednoduchou syntaxi, jsou kompilovány do JavaScriptu, který je dobře optimalizován pro moderní motory JavaScriptu. Nový směrovač komponent v Angular 2 umožňuje dělení kódu (líné načítání), aby snížil množství kódu dodaného k vykreslení pohledu.
Stáhněte si Začínáme s Angular Stáhněte si tento výukový program Angular v praktickém formátu PDFProč Angular? A kdy to není dobrá volba?
Výběr rámce JavaScriptu pro webovou aplikaci je druh procesu, který vyvolává náboženské války mezi vývojáři. Nejsem tu proto, abych proselytizoval Angular, ale chci, abyste znali jeho výhody a nevýhody. V ideálním případě byste měli vybrat rámec, který je vhodný pro vaši aplikaci, s přihlédnutím k dovednostem ve vaší organizaci a rámcům, které používáte v jiných aplikacích. Obecně má Angular dobré nástroje a je vhodný pro opravdu velké projekty s velkým provozem. Angular, jako kompletní přepis z AngularJS, byl od základu navržen pro použití na mobilních zařízeních a pro vysoký výkon. Stejně jako jeho předchůdce provádí vazby dat snadno a dobře.
Angular používá vzor webové komponenty, ale ne webové komponenty jako takové. Není to polymer, který vytváří skutečné webové komponenty, i když můžete použít polymerní webové komponenty v úhlových aplikacích, pokud si přejete. Angular používá inverzi vzorů ovládání (IoC) a vkládání závislostí (DI) a opravuje některé problémy s jejich implementací AngularJS.
Angular používá směrnice a komponenty, které kombinují logiku se značkami HTML. Jedna myšlenková myšlenka říká, že míchání logiky s prezentací je kardinálním hříchem. Další myšlenkový směr říká, že mít vše, co program deklaruje na jednom místě, usnadňuje rozvoj a porozumění. To je problém, o kterém se budete muset rozhodnout sami, protože jsem se ocitl na různých stranách otázky pro různé projekty.
Angular má nějaké problémy s dokumentací, časté problémy se zpětnou kompatibilitou a mnoho konceptů, které se nový vývojář může naučit. Na druhou stranu má Angular obrovský ekosystém, který vyplňuje mezery v dokumentaci Angular webovými výukami, videi a knihami třetích stran.
O stroji
Úhlová je implementována v TypeScriptu, nadsazené sadě JavaScriptu, která se převádí do JavaScriptu. Obecně se aplikace TypeScript snáze udržují v produkčním měřítku než JavaScript. Jednoduchý proces určování, zda jsou vaše typy správné v době kompilace, eliminuje velkou třídu běžných chyb JavaScriptu a znalost typů umožňuje editorům, nástrojům a IDE být užitečnější při dokončování kódu, refaktoringu a kontrole kódu.
Stal jsem se velkým fanouškem TypeScript. Považuji za mnohem produktivnější pracovat na velkém projektu TypeScript, než pracovat na velkém projektu JavaScriptu. S JavaScriptem opravdu nikdy nevím, jestli v kódu číhají chyby, které čekají, až mě kousnou, bez ohledu na to, jak často běžím JSHint. S TypeScriptem se cítím mnohem bezpečněji, alespoň když jsem přidal volitelné typy, třídy, moduly a rozhraní.
Začínáme: Nainstalujte si Angular, TypeScript a Visual Studio Code
Díky tomu si nainstalujeme software a můžeme začít.
Nainstalujte Node.js a NPM
Než uděláte cokoli jiného, musíte nainstalovat Node.js a NPM, správce balíčků uzlů, protože jsou základem velké části instalace a nástrojů Angular. Chcete-li zjistit, zda jsou nainstalovány, a pokud ano, které verze jsou nainstalovány, přejděte do konzoly nebo terminálového řádku a zadejte následující dva příkazy:
$ uzel -v $ npm -v
V mém počítači je hlášená verze Node.js v6.9.5 a verze NPM je 3.10.10. To jsou v současné době aktuální verze s dlouhodobou podporou, jak vidím při pohledu na //nodejs.org/. Pokud jsou vaše verze aktuální, můžete přejít na další část. Pokud není nalezen žádný příkaz nebo je některá verze zastaralá, měli byste nainstalovat aktuální verze. Moje verze jsou aktuální, protože jsem nedávno znovu nainstaloval Node, jak je znázorněno na následujícím obrázku. Instalace Node.js i NPM je otázkou procházení na nodejs.org, stisknutí zeleného tlačítka LTS a následování pokynů.
Po dokončení instalace znovu zkontrolujte verze, abyste se ujistili, že se skutečně aktualizují. Vím, že opakování kontroly zní paranoidně, ale dobrý programátor potřebuje zdravou dávku paranoie, aby se vyhnul chybám, a přerušené instalace nejsou neobvyklé.
1. Nainstalujte Angular
Existují dva způsoby, jak nainstalovat a používat Angular. Nejprve vám ukážu metodu rozhraní příkazového řádku (CLI), a to z několika důvodů. První je, že to lépe odpovídá způsobu, jakým rád pracuji. Druhým je to, že CLI generuje úplnější spouštěcí aplikaci než osivo QuickStart. Třetím je, že krok čištění v pokynech k semenu QuickStart vypadá, jako by mohl způsobit zmatek, pokud bude použit ve špatnou dobu nebo ve špatném adresáři.
Přejděte na stránku //angular.io/ a klikněte na jedno ze tří tlačítek Začínáme. Všichni jdou na stejné místo, Angular QuickStart.
Přečtěte si prosím tuto stránku znovu a neváhejte vyzkoušet příklad QuickStart na Plunkeru přes odkaz po prvním bloku kódu. Jakmile si myslíte, že můžete následovat @Součástka funkce dekorátoru a výraz vazby úhlové interpolace {{název}}, klikněte vlevo na odkaz CLI QuickStart. Nedělejte si příliš starosti s tím, jak jsou implementovány funkce dekoratérů a interpolační vazba: k tomu se dostaneme.
1a. Nainstalujte a otestujte Angular-CL
Podle pokynů nastavíme vývojové prostředí CLI. Prvním krokem je celosvětová instalace Angular a jeho CLI s npm:
$ npm install -g @ angular / cli
Pokud budete pečlivě sledovat, jak instalace pokračuje, uvidíte před Angular a jeho CLI nainstalovanou řadu předpokladů a nástrojů. Pokud existují varování, nebojte se o ně. Pokud se vyskytnou chyby, možná je budete muset opravit; Varování jsem viděl jen sám. Je bezpečné přeinstalovat rozhraní Angular CLI, kdykoli budete chtít.
Dalším krokem je vytvoření nového projektu s Angular CLI. Dole jsem vložil do adresáře s názvem Práce v mé domovské složce uživatele.
$ cd práce $ ng nová moje aplikace
Jak je uvedeno v pokynech, generování nové aplikace Angular trvá několik minut. To je ten správný čas na vaření dobrého šálku čaje nebo kávy.
Na snímku obrazovky uvidíte, že jsem dvakrát zkontroloval svou verzi TypeScript (tsc -v) po instalaci Angular CLI. Ano, bylo to trochu paranoidní. A ano, je to také dobrý nápad. Pokud jste stroj TypeScript ještě nenainstalovali, postaráme se o to nyní:
$ npm install –g strojopis
Už tam skoro jsme. Dále přejděte do nového adresáře a podejte aplikaci.
$ cd moje aplikace $ ng slouží
Jak vám server řekne, naslouchá na portu 4200. Otevřete tedy kartu prohlížeče na // localhost: 4200 a obrázek se zobrazí vlevo.
Zůstatek na stránce CLI QuickStart vás instruuje, abyste změnili vlastnost title a její CSS. Klidně to udělejte s čímkoli programování editor (ne textový procesor!) jste náhodou nainstalovali, nebo počkejte, až nainstalujete Visual Studio Code později. Okno prohlížeče se automaticky aktualizuje, kdykoli uložíte, protože server sleduje kód a aktualizace změn.
Až skončíte se serverem, stisknutím klávesy Control-C v okně terminálu proces ukončíte.
1b. Nainstalujte osivo Angular QuickStart
Pouze proveďte tento krok, pokud jste přeskočili krok 1a. Pokud udelas oba kroky, bude tato instalace komplikovat instalaci CLI a budete ji muset znovu použít, pokud ji budete chtít znovu použít. Pokyny pro instalaci semene QuickStart nabízejí dvě možnosti spuštění procesu: stažení semene a jeho rozbalení nebo alternativní klonování semene, a to následovně:
$ git clone //github.com/angular/quickstart.git rychlý start
Bez ohledu na to, jakou možnost pro získání kódu zvolíte, jsou další kroky stejné:
$ cd rychlý start
(nebo jakkoli jste pojmenovali složku)
$ npm instalace$ npm start
The NPM instalace krok dělá v podstatě totéž jako $ npm install -g @ angular / cli krok ve verzi CLI instalace, kromě toho, že instaluje TypeScript a dělá ne nainstalujte Angular CLI, protože to není na seznamu závislostí balíček.json. Ve skutečnosti, pokud je Angular CLI již nainstalován, tento skript bude odinstalovat to.
The npm start krok spustí tento skript:
"start": "souběžně \" běh npm běh: sledovat \ "\" běh npm běh \ ""
Chcete-li to rozšířit, skripty build: watch and serve jsou:
"build: watch": "tsc -p src / -w"
a
"serve": "lite-server -c = bs-config.json"
Už jsem to zmínil tsc je kompilátor TypeScript? The -p Možnost nastaví adresář projektu na kompilaci a -w volba říká sledovat vstupní soubory.
The npm start krok (současné spuštění dvou skriptů) udělá v podstatě totéž jako ng sloužit krok ve verzi CLI instalace, kromě toho, že je pravděpodobné, že zvolí jiný port, navíc automaticky načte stránku, kterou zobrazuje, ve vašem výchozím prohlížeči a stránka bude vypadat jako obrázek vlevo.
Až skončíte s aplikací Angular QuickStart, jednoduše stiskněte Ctrl + C nebo zavřete okno terminálu, čímž proces ukončíte. Můžete jej znovu spustit návratem do adresáře a spuštěním ng sloužit.
Dalším (volitelným) krokem v pokynech k QuikStart seed je ten, který mě znervózňuje: Řekne vám, abyste odstranili nepodstatné soubory pomocí rm -rf v systému MacOS nebo del ve Windows. Pokud se to rozhodnete udělat, alespoň před spuštěním skriptu, který jste zkopírovali z dokumentace, zkontrolujte, zda jste ve správném adresáři. Po přidání souborů do projektu to prosím nezkoušejte.
Bez ohledu na to, zda jste postupovali podle pokynů CLI nebo QuickStart seed, dalším krokem bude prozkoumat zdrojový kód projektu Angular. Za tímto účelem si nainstalujte editor s hranatým vědomím.
2. Nainstalujte kód Visual Studio
Stránka Úhlové prostředky doporučuje tři IDE: IntelliJ IDEA, Visual Studio Code a WebStorm. Používám všechny tři, ale pro účely tohoto cvičení je Visual Studio Code nejlepší volbou, protože je to bezplatný a otevřený zdroj. Přejděte na domovskou stránku Visual Studio Code a stáhněte si aktuální stabilní verzi pro svou platformu a pak nainstalujte balíček.
Jakmile je Visual Studio Code nainstalován, spusťte jej a otevřete adresář, který obsahuje váš základní projekt. Na mém Macu je projekt generovaný CLI na ~ / work / my-app a semeno je v ~ / work / quickstartmaster. Vaše umístění se bude lišit v závislosti na tom, zda jste provedli instalaci rozhraní příkazového řádku nebo počáteční instalaci, a jakékoli možnosti, které jste provedli ohledně jejich cílových adresářů. Zdrojový strom by měl vypadat asi takto:
Visual Studio Code podporuje TypeScript ihned po vybalení, není tedy co instalovat. Chcete-li nainstalovat další jazyky později, je to snadné na panelu Rozšíření, který se snadno zobrazí kliknutím na ikonu dole vlevo nahoře. Do vyhledávacího pole v horní části panelu Rozšíření zadejte název požadovaného jazyka nebo nástroje. Do Průzkumníka souborů se můžete vrátit kliknutím na ikonu nahoře vlevo nahoře.
