Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

Angular je robustný rámec JavaScriptu na vytváranie jednostránkových aplikácií. Spoločnosť Google vyvinula softvér a udržiava ho spolu s celosvetovými prispievateľmi.

Podobne ako React, aj Angular môžete použiť na vytváranie rôznych front-end aplikácií vrátane webových, mobilných a desktopových systémov. Niektoré odvetvia uprednostňujú Angular, pretože je komplexný a stabilný.

Dozvieme sa viac o Angular klonovaním projektu z GitHubu a jeho lokálnym spustením.

Predpoklady pre klonovanie

Na rozdiel od iných rámcov je klonovanie a spustenie aplikácie Angular jednoduché. Budete klonovať projekt GitHub. Skôr ako začnete, uistite sa, že spĺňate nasledujúce požiadavky:

  • Mali by ste mať nainštalovanú stabilnú verziu Node.js. Ak nie, učte sa ako nainštalovať Nodejs na Ubuntu alebo nainštalujte Nodejs na Windows.
  • Mal by si mať nainštalovaný Git.
  • Mali by ste mať účet GitHub.
instagram viewer

1. Nainštalujte správcu balíkov uzlov

Správca balíkov uzlov (npm) je softvérové ​​úložisko pre balíčky JavaScript. npm má rozhranie CLI (Command Line Interface), ktoré vykonáva rôzne úlohy. CLI môžete použiť na stiahnutie, inštaláciu a nasadenie softvéru.

Keď nainštalujete Node.js, prichádza s balíkom npm. Ak chcete skontrolovať verzie balíka Node.js a npm, spustite na termináli nasledovné:

Ak chcete skontrolovať nainštalovanú verziu Node.js, vytlačte verziu pomocou nasledujúceho príkazu:

uzol --verzia

Verziu npm môžete skontrolovať pomocou rovnakej možnosti:

npm --verzia

2. Nainštalujte Angular CLI

Angular CLI môžete použiť na vykonávanie rôznych vývojových úloh. Úlohy zahŕňajú generovanie aplikácií, testovanie a nasadenie. Ak chcete nainštalovať Angular CLI, spustite nasledujúci príkaz:

$ npm inštalácia -g @angular/cli

Ak chcete skontrolovať verziu Angular CLI, spustite príkaz:

$ ng verzia

3. Nájdite projekt na GitHub

Budete klonovať Giphy-replika projekt z GitHubu:

Prejdite na zelené tlačidlo označené kód. Kliknutím naň zobrazíte rozbaľovací zoznam. Skopírujte odkaz HTTP alebo SSH. Ktorýkoľvek z týchto dvoch bude stačiť.

4. Lokálne klonujte projekt

Najprv vytvorte priečinok a pomenujte ho Angular-Clone. Nezabudnite prejsť do priečinka pomocou nasledujúceho príkazu:

cd Angular-Klonovať

Potom spustite git klon príkaz na skopírovanie projektu do vášho priečinka.

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

Ďalej skontrolujte priečinok Angular-Clone a zistite, či je vnútri klon Giphy-Replica. Bežať ls na zobrazenie obsahu priečinka:

ls

Prejdite do priečinka:

cd Giphy-replika

V tomto bode si môžete prezrieť súbory projektu v editore kódu podľa vlastného výberu alebo si ich prezerať cez webové rozhranie GitHub.

5. Nainštalujte balíky npm

Na spustenie klonovaného projektu musíte nainštalovať všetky balíky a závislosti. Ak chcete nainštalovať balíky, spustite:

npm Inštalácia

Ak narazíte na nejaké hlásenia o zraniteľnosti, opravte ich pomocou:

Oprava auditu npm

6. Otvorte projekt v prehliadači

Teraz máte všetky požiadavky na spustenie projektu, môžete ho spustiť a otvoriť v prehliadači. Začnite budovaním a servisom projektu:

ng slúžiť

Potom otvorte http://localhost: 4200/ v prehliadači na zobrazenie projektu.

Môžete použiť Angular CLI automaticky otvoriť projekt v prehliadači:

$ ng slúžiť -o

Tento príkaz vytvorí aplikáciu, spustí server a sleduje aktualizácie súborov.

Vo vašom prehliadači by ste mali vidieť webovú stránku Giphy-Replica:

Prečo klonovať uhlový projekt?

Namiesto toho, aby ste začali projekt od začiatku, môžete ho naklonovať z GitHubu. Klonovanie projektu s otvoreným zdrojovým kódom a jeho úprava na vlastné použitie šetrí čas pri spúšťaní projektu od začiatku. Ak je to relevantné, môžete tiež prispieť akýmikoľvek užitočnými zmenami späť do upstream projektu.

Angular, ktorý bol zvolený za štvrtý najobľúbenejší front-end framework v roku 2021, neprestáva udivovať každým vydaním. Dodáva sa so skvelými balíkmi, ktoré podporujú vývoj jednostránkových aplikácií. Použite tento vynikajúci rámec na vytváranie aplikácií svetovej triedy.