Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Angular on vankka JavaScript-kehys yksisivuisten sovellusten rakentamiseen. Google on kehittänyt ohjelmiston ja ylläpitää sitä yhdessä maailmanlaajuisten avustajien kanssa.

Kuten React, Angularilla voit luoda erilaisia ​​käyttöliittymäsovelluksia, kuten verkko-, mobiili- ja työpöytäjärjestelmiä. Jotkut teollisuudenalat pitävät Angularista parempana, koska se on kattava ja vakaa.

Opitaan lisää Angularista kloonaamalla projekti GitHubista ja ajamalla se paikallisesti.

Kloonauksen edellytykset

Toisin kuin muut puitteet, Angular-sovelluksen kloonaus ja suorittaminen on yksinkertaista. Kloonaat GitHub-projektin. Ennen kuin aloitat, varmista, että täytät seuraavat vaatimukset:

  • Sinulla pitäisi olla vakaa Node.js-versio asennettuna. Jos ei, opi kuinka asentaa Nodejs Ubuntuun tai asenna Nodejs Windowsiin.
  • Sinun pitäisi onko Git asennettuna.
  • Sinulla pitäisi olla GitHub-tili.
instagram viewer

1. Asenna Node Package Manager

Node Package Manager (npm) on JavaScript-pakettien ohjelmistovarasto. npm: ssä on CLI (Command Line Interface), joka suorittaa erilaisia ​​tehtäviä. Voit käyttää CLI: tä ohjelmistojen lataamiseen, asentamiseen ja käyttöönottoon.

Kun asennat Node.js: n, sen mukana tulee npm-paketti. Tarkista Node.js- ja npm-pakettisi versiot suorittamalla seuraava komento päätteessä:

Tarkista asennetun Node.js-version versio tulostamalla versio seuraavalla komennolla:

solmu --versio

Voit tarkistaa npm-version käyttämällä samaa vaihtoehtoa:

npm --versio

2. Asenna Angular CLI

Voit käyttää Angular CLI: tä erilaisten kehitystehtävien suorittamiseen. Tehtäviin kuuluu sovellusten luominen, testaus ja käyttöönotto. Asenna Angular CLI suorittamalla seuraava komento:

$ npm asennus -g @kulmainen/cli

Tarkista Angular CLI -versio suorittamalla komento:

$ ng versio

3. Etsi projekti GitHubista

Kloonaat Giphy-kopio projekti GitHubista:

Siirry vihreään painikkeeseen Koodi. Napsauta sitä avataksesi avattavan luettelon. Kopioi joko HTTP- tai SSH-linkki. Kumpi tahansa näistä kahdesta käy.

4. Kloonaa projekti paikallisesti

Luo ensin kansio ja anna sille nimi Angular-Clone. Muista mennä kansioon seuraavalla komennolla:

cd Angular-Klooni

Suorita sitten git klooni -komento kopioidaksesi projektin kansioon.

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

Tarkista seuraavaksi Angular-Clone-kansio nähdäksesi, onko klooni Giphy-Replica sisällä. Juosta ls kansion sisällön näyttäminen:

ls

Siirry kansioon:

CD Giphy-kopio

Tässä vaiheessa voit tarkastella projektitiedostoja valitsemallasi koodieditorilla tai tarkastella niitä GitHub-verkkoliittymän kautta.

5. Asenna npm-paketit

Sinun on asennettava kaikki paketit ja riippuvuudet kloonatusta projektista suorittaaksesi sen. Asenna paketit suorittamalla:

npm Asentaa

Jos saat haavoittuvuusraportteja, korjaa ne seuraavasti:

npm-tarkastuksen korjaus

6. Avaa projekti selaimessa

Nyt sinulla on kaikki vaatimukset projektin suorittamiseen, voit suorittaa sen ja avata sen selaimessa. Aloita rakentamalla ja palvelemalla projekti:

palvella

Avaa sitten http://localhost: 4200/ selaimessa nähdäksesi projektin.

Voit käyttää Angular CLI: tä, joka avaa projektin automaattisesti selaimessa:

$ ng palvella -o

Tämä komento rakentaa sovelluksen, käynnistää palvelimen ja tarkkailee tiedostojen päivityksiä.

Sinun pitäisi nähdä selaimessasi Giphy-Replica-verkkosivusto:

Miksi Angular-projekti kloonataan?

Sen sijaan, että aloittaisit projektin tyhjästä, voit kloonata sellaisen GitHubista. Avoimen lähdekoodin projektin kloonaaminen ja sen muokkaaminen omaan käyttöön säästää aikaa projektin aloittamisesta tyhjästä. Voit myös lisätä hyödyllisiä muutoksia takaisin alkupään projektiin, jos se on aiheellista.

Angular äänestettiin neljänneksi suosituimmaksi käyttöliittymäkehykseksi vuonna 2021, ja se hämmästyttää edelleen jokaisen julkaisun myötä. Sen mukana tulee upeita paketteja, jotka tukevat yksisivuisten sovellusten kehittämistä. Käytä tätä erinomaista kehystä maailmanluokan sovellusten rakentamiseen.