Как да инсталирате Angular на Windows: Ръководство за Angular CLI, Node.js и Инструменти за изграждане

В този урок ще научим как да инсталираме Angular CLI в Windows и да го използваме за създаване на Angular проект.

Какво е Angular CLI?

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

След като инсталирате Angular CLI, ще трябва да изпълните една команда, за да генерирате проект, а друга, за да го обслужвате, използвайки локален сървър за разработка, за да играете с вашето приложение.

Подобно на повечето съвременни инструменти за интерфейс в наши дни, Angular CLI е изграден върху Node.js.

Node.js е сървърна технология, която ви позволява да стартирате JavaScript на сървъра и да изграждате уеб приложения от страна на сървъра. Въпреки това, Angular е предна технология, така че дори ако трябва да инсталирате Node.js на вашата машина за разработка, тя е само за стартиране на CLI.

След като изградите приложението си за производство, няма да имате нужда от Node.js, защото крайните пакети са просто статични HTML, CSS и JavaScript, които могат да се обслужват от всеки сървър или CDN.

Като се има предвид това, ако създавате уеб приложение с пълен стек с Angular, може да ви е необходим Node.js за създаване на задната част, ако искате да използвате JavaScript за предния и задния край.

Вижте стека MEAN - това е архитектура, която включва MongoDB, Express (уеб сървър и REST API рамка, изградена върху Node.js) и Angular. Можете да прочетете тази статия, ако искате да започнете урок стъпка по стъпка.

В този случай Node.js се използва за изграждане на задната част на приложението ви и може да бъде заменен с която и да е технология от страна на сървъра, която искате, като PHP, Ruby или Python. Но Angular не зависи от Node.js, с изключение на своя CLI инструмент и за инсталиране на пакети от npm.

NPM означава Node Package Manager. Това е регистър за хостинг на Node пакети. През последните години се използва и за публикуване на предни пакети и библиотеки като Angular, React, Vue.js и дори Bootstrap.

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

Инсталиране на Angular CLI на Windows

Първо, трябва да имате Node и npm инсталирани на вашата машина за разработка. Има много начини да направите това, като например:

  • използване на NVM (Node Version Manager) за инсталиране и работа с множество версии на node във вашата система
  • използване на официалния мениджър на пакети на вашата операционна система
  • инсталирането му от официалния уебсайт.

Нека го опростим и използваме официалния уебсайт. Просто посетете страницата за изтегляне и вземете двоичните файлове за Windows, след което следвайте съветника за настройка.

Можете да се уверите, че Node е инсталиран на вашата система, като изпълните следната команда в командния ред, който трябва да показва инсталираната версия на Node:

$ node -v 

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

$ npm install @angular/cli 

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

Кратко ръководство за ъглова CLI

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

$ ng version 

Втора команда, която може да се наложи да helpизпълните, е командата за получаване на пълна помощ за използване:

$ ng help 

CLI предоставя следните команди:

add: Добавя поддръжка за външна библиотека към вашия проект.

build (b): Компилира Angular приложение в изходна директория, наречена   dist/  на дадения изходен път. Трябва да се изпълни от директорията на работното пространство.

config: Извлича или задава ъглови конфигурационни стойности.

doc (d): Отваря официалната Angular документация (angular.io) в браузър и търси дадена ключова дума.

e2e (e): Изгражда и обслужва приложение Angular, след което изпълнява тестове от край до край с помощта на Protractor.

generate (g): Генерира и / или модифицира файлове въз основа на схема.

help: Изброява наличните команди и техните кратки описания.

lint (l): Изпълнява инструменти за свързване на кода на приложението Angular в дадена папка на проекта.

new (n): Създава ново работно пространство и първоначално приложение Angular.

run: Изпълнява персонализирана цел, дефинирана във вашия проект.

serve (s): Създава и обслужва вашето приложение, като възстановява промени във файлове.

test (t): Изпълнява модулни тестове в проект.

update: Актуализира вашето приложение и неговите зависимости. Вижте //update.angular.io/

version (v): Извежда Angular CLI версия.

xi18n: Извлича i18n съобщения от изходния код.

Генериране на проект

Можете да използвате Angular CLI за бързо генериране на вашия Angular проект, като изпълните следната команда в интерфейса на вашия команден ред:

$ ng new frontend 

Забележка: frontend е името на проекта. Можете, разбира се, да изберете всяко валидно име за вашия проект. Тъй като ще създадем приложение с пълен стек, използвам  интерфейс като име за приложението отпред.

Както бе споменато по-рано, CLI ще ви попита Бихте ли искали да добавите Angular маршрутизация? и можете да отговорите, като въведете y(Да) или n(Не), което е опцията по подразбиране. Ще ви попита и за формата на таблицата със стилове, който искате да използвате (като CSS). Изберете опциите си и натиснете, за   Enter  да продължите.

Структура на проекта ъглова 8

След това ще създадете своя проект със структура на директория и куп конфигурации и кодови файлове. Той ще бъде най-вече във TypeScript и JSON формати. Нека видим ролята на всеки файл:

  • /e2e/: съдържа от край до край (симулиращо поведение на потребителя) тестове на уебсайта
  • /node_modules/: Всички библиотеки на трети страни са инсталирани в тази папка с помощта на  npm install
  • /src/: съдържа изходния код на приложението. Тук ще се свърши най-много работа
  • /app/: съдържа модули и компоненти
  • /assets/: съдържа статични активи като изображения, икони и стилове
  • /environments/: съдържа специфични за околната среда (производство и разработка) конфигурационни файлове
  • browserslist: необходимо от автопрефиксатора за поддръжка на CSS
  • favicon.ico: favicon
  • index.html: основният HTML файл
  • karma.conf.js: конфигурационният файл за Karma (инструмент за тестване)
  • main.ts: основният изходен файл, от който се стартира AppModule
  • polyfills.ts: полифилми, необходими на Angular
  • styles.css: файлът на глобалната таблица със стилове за проекта
  • test.ts: това е конфигурационен файл за Karma
  • tsconfig.*.json: конфигурационните файлове за TypeScript
  • angular.json: съдържа конфигурациите за CLI
  • package.json: съдържа основната информация за проекта (име, описание и зависимости)
  • README.md: файл за маркиране, който съдържа описание на проекта
  • tsconfig.json: конфигурационният файл за TypeScript
  • tslint.json: конфигурационният файл за TSlint (инструмент за статичен анализ)

Обслужване на вашия проект

Angular CLI предоставя пълна верига от инструменти за разработване на приложения от предния край на вашата локална машина. Като такъв не е нужно да инсталирате локален сървър, за да обслужвате вашия проект - можете просто да използвате   ng serveкомандата от вашия терминал, за да обслужвате проекта си локално.

Първо навигирайте в папката на вашия проект и изпълнете следните команди:

$ cd frontend $ ng serve 

Вече можете да отидете до // localhost: 4200 / адрес, за да започнете да играете с приложението си отпред. Страницата автоматично ще се презареди, ако промените който и да е изходен файл.

Генериране на ъглови артефакти

Angular CLI предоставя ng generateкоманда, която помага на разработчиците да генерират основни ъглови артефакти като модули, компоненти, директиви, тръби и услуги:

$ ng generate component my-component 

my-componentе името на компонента. Ъгловата CLI автоматично ще се добави позоваване на components, directivesи pipesв src/app.module.tsфайла.

Ако искате да добавите своя компонент, директива или конвейер към друг модул (различен от основния модул на приложението app.module.ts), можете просто да добавите пред името на компонента име на модула и наклонена черта:

$ ng g component my-module/my-component 

my-module е името на съществуващ модул.

Заключение

В този урок видяхме как да инсталираме Angular CLI на нашата машина с Windows и го използвахме за инициализиране на нов Angular проект от нулата.

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

Разгледайте другите ни ръководства за Ъглови.

Можете да се свържете с автора или да го последвате чрез личния му уебсайт, Twitter, LinkedIn и Github.