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 - це повний пакет зі своїми функціоналами та бібліотеками. Фреймворк має свої власні правила, у вас недостатньо гнучкості, і проект залежить від того, який фреймворк ви використовуєте. Angular - це приклад фреймворка.

Angular вийшов у 2016 році, але до Angular існував AngularJS. Одне з найбільш часто задаваних питань про Angular полягає в тому, яка різниця між AngularJS та Angular?

AngularJS проти Angular

Ці 2 версії Angular бентежать багатьох розробників. AngularJS та Angular - це абсолютно різні фреймворки. Версії Angular (наприклад, 1, 1.2, 1.5 тощо) називаються Angular JS, а починаючи з версії 2 і вище - Angular.

  • Angular JS → версії 1.x
  • Angular → версія 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 !

Дякую за читання!