Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

Angular je robustní JavaScriptový framework pro vytváření jednostránkových aplikací. Společnost Google vyvinula software a udržuje jej spolu s celosvětovými přispěvateli.

Stejně jako React můžete Angular použít k vytváření různých front-end aplikací, včetně webových, mobilních a desktopových systémů. Některá odvětví preferují Angular, protože je komplexní a stabilní.

Pojďme se dozvědět více o Angular klonováním projektu z GitHubu a jeho lokálním spuštěním.

Předpoklady pro klonování

Na rozdíl od jiných frameworků je klonování a spuštění aplikace Angular jednoduché. Budete klonovat projekt GitHub. Než začnete, ujistěte se, že splňujete následující požadavky:

  • Měli byste mít nainstalovanou stabilní verzi Node.js. Pokud ne, poučte se jak nainstalovat Nodejs na Ubuntu nebo nainstalovat Nodejs na Windows.
  • Měl by jsi mít nainstalovaný Git.
  • Měli byste mít účet GitHub.
instagram viewer

1. Nainstalujte Správce balíčků uzlů

Správce balíčků uzlů (npm) je softwarové úložiště pro balíčky JavaScript. npm má rozhraní CLI (Command Line Interface), které provádí různé úkoly. CLI můžete použít ke stažení, instalaci a nasazení softwaru.

Když nainstalujete Node.js, je dodáván s balíčkem npm. Chcete-li zkontrolovat verze balíčků Node.js a npm, spusťte na terminálu následující:

Chcete-li zkontrolovat nainstalovanou verzi Node.js, vytiskněte verzi pomocí následujícího příkazu:

uzel --verze

Verzi npm můžete zkontrolovat pomocí stejné možnosti:

npm --verze

2. Nainstalujte Angular CLI

Angular CLI můžete použít k provádění různých vývojových úloh. Mezi úkoly patří generování aplikací, testování a nasazení. Chcete-li nainstalovat Angular CLI, spusťte následující příkaz:

$ instalace npm -g @angular/cli

Chcete-li zkontrolovat verzi Angular CLI, spusťte příkaz:

$ ng verze

3. Najděte projekt na GitHubu

Budete klonovat Giphy-replika projekt z GitHubu:

Přejděte na zelené tlačítko označené Kód. Kliknutím na něj zobrazíte rozevírací seznam. Zkopírujte odkaz HTTP nebo SSH. Kterýkoli z těchto dvou bude stačit.

4. Klonujte projekt lokálně

Nejprve vytvořte složku a pojmenujte ji Angular-Clone. Nezapomeňte přejít do složky pomocí následujícího příkazu:

cd Angular-Klonovat

Poté spusťte git klon příkaz pro zkopírování projektu do vaší složky.

git klon https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

Dále zkontrolujte složku Angular-Clone, abyste zjistili, zda je uvnitř klon Giphy-Replica. Běh ls pro zobrazení obsahu složky:

ls

Přejděte do složky:

CD Giphy-replika

V tomto okamžiku si můžete prohlédnout soubory projektu v editoru kódu dle vašeho výběru nebo je zobrazit prostřednictvím webového rozhraní GitHub.

5. Nainstalujte balíčky npm

Chcete-li spustit klonovaný projekt, musíte nainstalovat všechny balíčky a závislosti z klonovaného projektu. Chcete-li nainstalovat balíčky, spusťte:

npm Nainstalujte

Pokud narazíte na nějaké zprávy o zranitelnosti, opravte je pomocí:

Oprava auditu npm

6. Otevřete projekt v prohlížeči

Nyní máte všechny požadavky na spuštění projektu, můžete jej spustit a otevřít v prohlížeči. Začněte tím, že projekt vytvoříte a budete mu sloužit:

ng sloužit

Poté otevřete http://localhost: 4200/ v prohlížeči pro zobrazení projektu.

Můžete použít Angular CLI automaticky otevřít projekt v prohlížeči:

$ ng sloužit -o

Tento příkaz vytvoří aplikaci, spustí server a sleduje aktualizace souborů.

Ve vašem prohlížeči byste měli vidět webovou stránku Giphy-Replica:

Proč klonovat úhlový projekt?

Namísto zahájení projektu od nuly můžete jeden naklonovat z GitHubu. Klonování projektu s otevřeným zdrojovým kódem a jeho úprava pro vlastní použití šetří čas při zahajování projektu od nuly. Pokud je to relevantní, můžete také přispět jakýmikoli užitečnými změnami zpět do upstream projektu.

Angular, který byl zvolen jako čtvrtý nejoblíbenější front-end framework v roce 2021, nepřestává udivovat každým vydáním. Dodává se se skvělými balíčky, které podporují vývoj jednostránkových aplikací. Použijte tento vynikající rámec k vytváření aplikací světové třídy.