Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.

Angular е стабилна JavaScript рамка за изграждане на приложения с една страница. Google разработи софтуера и го поддържа заедно със сътрудници от цял ​​свят.

Подобно на React, можете да използвате Angular за създаване на различни приложения от предния край, включително уеб, мобилни и настолни системи. Някои индустрии предпочитат Angular, защото е изчерпателен и стабилен.

Нека научим повече за Angular, като клонираме проект от GitHub и го изпълняваме локално.

Предпоставки за клониране

За разлика от други рамки, клонирането и стартирането на Angular приложение е лесно. Ще клонирате проект на GitHub. Преди да започнете, уверете се, че отговаряте на следните изисквания:

  • Трябва да имате инсталирана стабилна версия на Node.js. Ако не, научете се как да инсталирате Nodejs на Ubuntu или инсталирайте Nodejs на Windows.
  • Ти трябва имате инсталиран Git.
  • Трябва да имате акаунт в GitHub.
instagram viewer

1. Инсталирайте Node Package Manager

Мениджър на пакети на възли (npm) е софтуерно хранилище за JavaScript пакети. npm има CLI (интерфейс на командния ред), който изпълнява различни задачи. Можете да използвате CLI за изтегляне, инсталиране и внедряване на софтуер.

Когато инсталирате Node.js, той идва с npm пакет. За да проверите вашите версии на пакети Node.js и npm, изпълнете следното на терминала:

За да проверите инсталираната версия на Node.js, отпечатайте версията със следната команда:

възел --версия

Можете да проверите версията на npm, като използвате същата опция:

npm --версия

2. Инсталирайте Angular CLI

Можете да използвате Angular CLI за изпълнение на различни задачи за разработка. Задачите включват генериране на приложения, тестване и внедряване. За да инсталирате Angular CLI, изпълнете следната команда:

$ npm install -g @ъглов/cli

За да проверите версията на Angular CLI, изпълнете командата:

$ ng версия

3. Намерете проект в GitHub

Ще клонирате Giphy-реплика проект от GitHub:

Придвижете се до зеления бутон с етикет Код. Кликнете върху него, за да се покаже падащ списък. Копирайте HTTP или SSH връзката. Всяко от тези двете ще свърши работа.

4. Клонирайте проекта локално

Първо създайте папка и я наименувайте Angular-Clone. Не забравяйте да отидете в папката със следната команда:

cd Angular-Клонинг

След това стартирайте git клонинг команда за копиране на проекта във вашата папка.

git клонинг https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

След това проверете папката Angular-Clone, за да видите дали клонингът Giphy-Replica е вътре. Бягай ls за да покажете съдържанието на папката:

ls

Отидете до папката:

cd Giphy-реплика

На този етап можете да прегледате файловете на проекта в редактор на код по ваш избор или да ги прегледате чрез уеб интерфейса на GitHub.

5. Инсталирайте npm пакети

Трябва да инсталирате всички пакети и зависимости от клонирания проект, за да го стартирате. За да инсталирате пакетите, изпълнете:

npm Инсталирай

Ако срещнете доклади за уязвимости, поправете ги с:

корекция на одита на npm

6. Отворете проекта в браузър

Сега имате всички изисквания за стартиране на проекта, можете да го стартирате и отворите в браузър. Започнете с изграждане и обслужване на проекта:

ng служи

След това отворете http://localhost: 4200/ в браузър, за да видите проекта.

Можете да използвате Angular CLI автоматично отваряне на проекта в браузър:

$ ng сервирам -o

Тази команда изгражда приложението, стартира сървъра и следи файловете за актуализации.

Във вашия браузър трябва да видите уебсайта Giphy-Replica:

Защо да клонирате Angular проект?

Вместо да стартирате проект от нулата, можете да клонирате такъв от GitHub. Клонирането на проект с отворен код и модифицирането му за ваша собствена употреба спестява време в сравнение със стартирането на проект от нулата. Можете също така да допринесете всякакви полезни промени обратно в проекта нагоре по веригата, ако е уместно.

Гласуван като четвъртата най-популярна рамка за преден край през 2021 г., Angular продължава да учудва с всяко издание. Предлага се със страхотни пакети, които поддържат разработката на едностранични приложения. Използвайте тази отлична рамка за изграждане на приложения от световна класа.