Як встановити 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.

Короткий посібник для Angular CLI

Після встановлення Angular CLI ви можете запускати безліч команд. Почнемо з перевірки версії встановленого CLI:

$ ng version 

Другою командою, яку вам може знадобитися запустити, є helpкоманда для отримання повної довідки щодо використання:

$ ng help 

CLI надає такі команди:

add: Додає підтримку зовнішньої бібліотеки до вашого проекту.

build (b): Компілює програму Angular у вихідний каталог, названий   dist/  за вказаним вихідним шляхом. Потрібно виконувати з каталогу робочої області.

config: Отримує або встановлює значення конфігурації Angular.

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): Виводить версію Angli CLI.

xi18n: Витягує повідомлення i18n із вихідного коду.

Створення проекту

Ви можете використовувати Angular CLI для швидкого створення проекту Angular, виконавши наступну команду в інтерфейсі командного рядка:

$ ng new frontend 

Примітка: frontend - це назва проекту. Звичайно, ви можете вибрати будь-яке дійсне ім’я для свого проекту. Оскільки ми створимо повнофункціональний додаток, я використовую  frontend як назву для інтерфейсної програми.

Як вже згадувалося раніше, CLI запитає вас, чи хочете ви додати Angular маршрутизацію? , і ви можете відповісти, ввівши y(Так) або n(Ні), що є опцією за замовчуванням. Він також запитає вас про формат таблиці стилів, який ви хочете використовувати (наприклад, CSS). Виберіть свої варіанти та натисніть,   Enter  щоб продовжити.

Структура проекту Angular 8

Після цього ваш проект буде створений зі структурою каталогів та безліччю конфігурацій та файлів коду. Це буде переважно у форматах TypeScript та JSON. Давайте подивимося роль кожного файлу:

  • /e2e/: містить наскрізні (що імітують поведінку користувачів) тести веб-сайту
  • /node_modules/: Усі сторонні бібліотеки встановлюються в цю папку за допомогою  npm install
  • /src/: містить вихідний код програми. Тут буде зроблено найбільше роботи
  • /app/: містить модулі та компоненти
  • /assets/: містить статичні об’єкти, такі як зображення, піктограми та стилі
  • /environments/: містить конфігураційні файли, що стосуються середовища (виробництва та розробки)
  • browserslist: потрібен автопрефіксу для підтримки CSS
  • favicon.ico: значок
  • 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 з нуля.

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

Ознайомтеся з іншими нашими підручниками з Angular

Ви можете зв’язатися з автором або підписатися на нього через його особистий веб-сайт, Twitter, LinkedIn та Github.