Пояснено кутовий інтерфейс командного рядка

Angular тісно пов'язаний з інтерфейсом командного рядка (CLI). CLI впорядковує генерацію файлової системи Angular. Він має справу з більшістю кулуарних конфігурацій, щоб розробники могли розпочати кодування. CLI також має низьку криву навчання, рекомендовану для будь-якого новачка, який хоче заскочити прямо. Чорт, навіть досвідчені розробники Angular покладаються на CLI!

Встановлення

Для Angular CLI потрібні Node.js та Node Packet Manager (NPM). Ви можете перевірити ці програми за допомогою команди терміналу: node -v; npm -v. Після установки, відкрийте термінал і встановити кутову CLI з допомогою цієї команди: npm install -g @angular/cli. Це можна виконати з будь-якої точки вашої системи. CLI налаштований на глобальне використання з -gпрапором.

Переконайтеся , що CLI є за допомогою команди: ng -v. Це виводить кілька рядків інформації. В одному з цих рядків вказана версія встановленого CLI.

Визнайте, що ngце основний будівельний блок CLI. Усі ваші команди почнуться з ng. Час поглянути на чотири найпоширеніші команди, префікс яких ng.

Ключові команди

  • нг новий
  • нг подавати
  • нг генерувати
  • ng build
  • оновлення

Ключові терміни для кожного з них досить показові. Разом вони складають те, що вам потрібно, щоб вдарити об землю, працюючи за допомогою Angular. Звичайно, їх набагато більше. Усі команди описані в документації CLI GitHub1. Ви, швидше за все, виявите, що перелічені вище команди охоплюватимуть необхідні основи.

нг новий

ng newстворює нову файлову систему Angular. Це сюрреалістичний процес. Перейдіть до місця розташування файлу, бажаного для нового покоління додатків. Введіть цю команду наступним чином , замінюючи [name-of-app]з тим, що ви хочете: ng new [name-of-app].

У папці [name-of-app]повинна з’явитися файлова система . Не соромтеся досліджувати, що лежить усередині. Намагайтеся поки не вносити жодних змін. Все, що вам потрібно для запуску вашого першого додатка Angular, складається в цій генерованій файловій системі.

нг подавати

Для запуску програми ng serveкоманда повинна виконуватися в [name-of-app]папці. Будь-де в межах папки буде робити. CLU Angular повинен визнати, що він знаходиться в середовищі, породженому за допомогою ng new. Він буде працювати, якщо виконувати цю одну умову. Ідіть вперед і спробувати: ng serve.

Програма за замовчуванням працює на порту 4200. Ви можете переглянути програму Angular, перейшовши до localhost:4200будь-якого веб-браузера. Angular працює у всіх браузерах. Якщо ви не використовуєте стару версію Internet Explorer, програма з’явиться. Він відображає офіційний логотип Angular поряд із переліком корисних посилань.

Добре, додаток працює. Сподіваємось, функціонує, але вам потрібно знати, що відбувається під капотом. Зверніться до [name-of-app]файлової системи. Навігація [name-of-app] -> src -> app. У цьому лежать файли, відповідальні за те, що ви бачили localhost:4200.

нг генерувати

Ці .componentфайли визначають кутовий компонент , включаючи його логіку ( .ts), стиль ( .css), розташування ( .html) і тестування ( .spec.ts). app.module.tsОсобливо виділяється. Разом ці дві групи файлів працюють разом як componentі module. Обидва componentі moduleє двома окремими прикладами кутових схем. Схема класифікація цілеспрямованих блоків коди різних generatable з ng generate.

Для цієї статті зрозумійте, що moduleекспорт та імпорт активів до базового дерева компонентів і з нього. Це componentстосується одного розділу інтерфейсу користувача. Логіка, стиль, макет та тестування цього блоку залишаються вкладеними в різні .componentфайли.

Що стосується ng generate, ця команда може генерувати скелети для кожної з доступних Angular схем2. Перейдіть до [name-of-app -> src -> app]. Спробуйте згенерувати новий component, виконавши: ng generate component [name-of-component]. Замініть [name-of-component]тим, що хотіли б. З’явиться новий файл [name-of-component]разом із необхідними componentфайлами.

Ви бачите, що це ng generateприскорює шаблонний код Angular. ng generateтакож підключає речі. Схеми, створені в контексті файлової системи Angular, з'єднуються з кореневим модулем системи. У цьому випадку це буде app.module.tsфайл всередині [name-of-app -> src -> app].

ng build

Angular - це інструмент переднього кінця. CLI виконує свої операції від імені інтерфейсу. ng serveдбає про налаштування серверного сервера. Це тримає розвиток, повністю зосереджений на передній частині. Тим не менш, підключення власного тилу до програми Angular також має бути можливим.

ng buildвиконує цю потребу. Перш ніж випробувати його всередині файлової системи. Перейдіть до [name-of-app] -> angular.json. Подивіться на цю одну рядок коду: "outputPath": "dist/my-app".

Цей рядок конфігурації визначає, куди ng buildскидає свої результати. Результатами є вся програма Angular, зведена в одну папку dist/my-app. Усередині цієї папки існує index.html. Весь додаток Angular може працювати з index.html. ng serveЗвідси немає необхідності. За допомогою цього файлу ви можете легко підключити свій задній кінець.

Дайте йому йти: ng build. Знову ж таки, це повинно виконуватися у файловій системі Angular. На основі ключового значення “outputPath:”in angular.json. Згенерується файл, в якому оригінальна програма повністю скомпільована. Якщо ви зберегли “outputPath:”те ж саме, скомпільований додаток буде: [name-of-app] -> dist -> [name-of-app].

оновлення

В оновленні angular cli ng виконуйте автоматичне оновлення всіх пакунків angular та npm до останніх версій.

Ось синтаксис та варіанти, з якими можна використовувати ng update.

ng update [package]

Варіанти

  • сухий біг --dry-run (alias: -d)

    Пройдіть без змін.

  • сили --force

    Якщо значення false, помилка буде видалена, якщо встановлені пакети несумісні з оновленням.

  • всі --all

    Чи потрібно оновлювати всі пакети в package.json.

  • наступний --next

    Використовуйте найбільшу версію, включаючи бета-версію та RC.

  • лише для міграції --migrate-only

    Виконайте лише міграцію, не оновлюючи встановлену версію.

  • від --from

    Версія, з якої потрібно перейти. Доступно лише з одним пакетом, який оновлюється, і лише для міграції.

  • до --to

    Версія, до якої слід застосовувати міграції. Доступно лише з одним пакетом, який оновлюється, і лише для міграцій. Потрібно від бути вказаним. Виявлено встановлену версію за замовчуванням.

  • реєстру --registry

    Реєстр NPM для використання.

Ці команди охоплюють основи. CLI Angular - це неймовірна зручність, яка прискорює генерацію, налаштування та розширення додатків. Він робить все це, зберігаючи гнучкість, дозволяючи розробнику вносити необхідні зміни.

Будь ласка, перевірте ці посилання, localhost:4200якщо ви ще цього не зробили. Не забудьте побігти ng serveперед тим, як відкрити його. З кращим розумінням CLI ви тепер готові дізнатися більше про те, що генерується його найважливішими командами.

Більше інформації:

  • Найкращі кутові приклади
  • Найкращі підручники з Angular та AngularJS
  • Як перевірити кутові реактивні форми