Angular 9 за начинаещи - Как да инсталирате първото си приложение с Angular CLI

Angular е една от най-популярните JavaScript рамки, създадени и разработени от Google. През последните няколко години ReactJS спечели голям интерес и се превърна в най-популярната съвременна JS библиотека в бранша. Но това не означава, че Angular вече не е важен.

Напротив, Angular е втората най-популярна рамка след React според Google Trends (в ​​световен мащаб):

Като преден разработчик съм работил с Angular. Сега бих искал да разгледам някои важни характеристики на Angular в предстоящите си статии:

  • Част 1: Как да инсталирате първото си приложение с Angular CLI (в момента сте тук)
  • Част 2: Ъглови компоненти и интерполация на низове
  • Част 3 : Ъглови директиви и тръби
  • Част 4: Еднопосочно свързване на данни в ъглова
  • Част 5: Ъглово двупосочно обвързване на данни с ngModel

В първата част на моята серия Angular for Beginners ще научите какво представлява Angular & Angular CLI и как да инсталирате първото си приложение Angular с помощта на CLI.

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

Преди да започнете да изучавате Angular, препоръчвам ви да се запознаете със следните езици, ако още не сте:

  • HTML, CSS
  • JavaScript / ES6
  • TypeScript

Ако предпочитате, можете да гледате видеоклипа с уроци по-долу:

Какво е Angular?

Angular е JavaScript рамка, разработена и поддържана от Google за изграждане на приложения отпред. Нека първо започна да обяснявам какво е рамка ...

Какво е рамка?

Framework е пълен пакет със собствени функционалности и библиотеки. Framework има свои собствени правила, нямате голяма гъвкавост и проектът зависи от Framework, който използвате. Angular е пример за рамка.

Angular излезе през 2016 г., но преди Angular имаше AngularJS. Един от най-често задаваните въпроси за Angular е, каква е разликата между AngularJS и Angular?

AngularJS срещу Angular

Тези 2 версии на Angular объркват много разработчици. AngularJS и Angular са напълно различни рамки. Ъгловите версии (като 1, 1.2, 1.5 и т.н.) се наричат ​​Angular JS и като се започне от версия 2 и по-горе се нарича Angular.

  • Ъглови JS → версии от 1.x
  • Ъглов → версия 2 и по-нова

Така че Angular версия 2 е пълно пренаписване на рамката AngularJS и по-новите версии (като 4,5,6 и т.н.) са незначителни промени на Angular версия 2.

В тази серия статии ще научите Angular 2+.

Какво е Angular CLI?

CLI означава интерфейс на командния ред. Angular има свой собствен официален CLI, който ни помага с много неща по време на процеса на разработка.

Angular CLI се използва за автоматизиране на операциите в Angular проекти, вместо да ги прави ръчно. CLI ни ​​подкрепя, разработчиците, в Angular проект от началото до края.

Например, Angular CLI може да се използва за:

  • Конфигурации, настройка на околната среда
  • Изграждане на компоненти, услуги, маршрутна система
  • Стартиране, тестване и внедряване на проекта
  • Инсталиране на библиотеки на трети страни (като Bootstrap, Sass и др.)

и още много. Сега нека видим как да инсталираме първото си Angular App, като използваме CLI стъпка по стъпка.

Стъпка 1: Инсталирайте NPM (Node Package Manager)

На първо място, ще ни трябва Node js. NPM (мениджър на пакети на възли, е част от node js) е инструмент за инсталиране на библиотеки и зависимости на трети страни към нашия проект. Ако все още го нямате, можете да го изтеглите и инсталирате от тук. Също така го обясних стъпка по стъпка във видеото с урока.

Стъпка 2: Инсталирайте Angular CLI

Ако имате инсталиран node js, следващата стъпка е инсталирането на самия Angular CLI на вашия компютър:

npm install -g @angular/cli

g означава глобална инсталация . Ако използвате -g по-късно, можете да използвате CLI във всеки Angular проект на вашия компютър.

Съвет : Въведете ng vв интерфейса на командния ред (или терминал), за да проверите вашата Angular версия.

Стъпка 3: Създайте нов Angular Project

След като инсталацията приключи, можете да използвате Angular CLI, за да създадете нов Angular проект със следната команда:

ng new my-first-app

Тази команда създава нов Angular проект (наречен my-first-app, можете да използвате произволно име) с всички необходими зависимости и файлове. Не е нужно да се притеснявате за нищо, защото CLI го прави автоматично вместо вас.

Стъпка 4: Стартирайте приложението

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

ng serve -- open

Флагът „отворен“ автоматично отваря прозореца на вашия локален браузър.

Angular поддържа сървър на живо , така че можете да видите промените във вашия локал, без да опреснявате страницата на браузъра си. За повече подробности и актуализации проверете и официалната документация.

Заключение

Така че в първата част направихме въведение в Angular, какво е CLI и как да инсталирате първото си приложение Angular. Във втория пост ще научите за ъгловите компоненти и интерполацията на низовете. Останете на линия :)

Ако искате да научите повече за уеб разработката, не се колебайте да ме последвате в Youtube !

Благодаря ви, че прочетохте!