Обяснен ъглов интерфейс на командния ред

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 нов
  • ng сервирайте
  • ng генериране
  • ng build
  • ng актуализация

Ключовите термини за всеки от тях са доста показателни. Заедно те съставляват това, което ще ви трябва, за да ударите земята с Angular. Разбира се, има много повече. Всички команди са описани в документацията на CLI на GitHub1. Вероятно ще откриете, че командите, изброени по-горе, ще покрият необходимите основи.

ng нов

ng newсъздава нова Angular файлова система. Това е сюрреалистичен процес. Моля, придвижете се до местоположението на файла, желано за ново поколение приложения. Въведете тази команда, както следва, заменяйки [name-of-app]с каквото си искате: ng new [name-of-app].

Трябва [name-of-app]да се появи файлова система под папката . Чувствайте се свободни да изследвате какво се крие вътре. Опитайте се да не правите промени все още. Всичко, от което се нуждаете, за да стартирате първото си приложение на Angular, е пакетирано заедно в тази генерирана файлова система.

ng сервирайте

За да стартира приложението, ng serveкомандата трябва да се изпълни в [name-of-app]папката. Навсякъде в папката ще направи. Върховният CLI трябва да разпознае, че е в среда, генерирана с ng new. Той ще се изпълни, ако това е едно условие. Давай напред и да го опитате: ng serve.

По подразбиране приложението работи на порт 4200. Можете да прегледате приложението Angular, като навигирате localhost:4200във всеки уеб браузър. Angular работи във всички браузъри. Освен ако не използвате стара версия на Internet Explorer, приложението ще се появи. Той показва официалното лого Angular заедно със списък с полезни връзки.

Добре, приложението работи. Надяваме се да функционира, но трябва да знаете какво се случва под капака. Обърнете се към [name-of-app]файловата система. Навигирайте [name-of-app] -> src -> app. В това се крият файловете, отговорни за това, което сте видели localhost:4200.

ng генериране

На .componentфайловете определят ъглов компонент включително нейната логика ( .ts), стил ( .css), оформление ( .html) и тестване ( .spec.ts). В app.module.tsособено се откроява. Заедно тези две групи файлове работят заедно като componentи module. И двете, componentи moduleса два отделни примера за ъглови схеми. Схемите класифицират различните целеви блокове на кода, които могат да се генерират с ng generate.

За целите на тази статия разберете, че moduleекспортирате и импортирате активи към и от дървото на базовите компоненти. А componentсамата се отнася с една част от потребителския интерфейс. Логиката, стилът, оформлението и тестването на това устройство остават капсулирани в различните .componentфайлове.

Що се отнася до ng generateтази команда, може да генерира скелети за всяка от наличните ъглови схеми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

Ъгловият е преден инструмент. 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:”в angular.json. Ще се генерира файл, в който оригиналното приложение е напълно компилирано. Ако държат “outputPath:”една и съща, съставен приложението ще бъде в: [name-of-app] -> dist -> [name-of-app].

ng актуализация

В ъгловата клиентска актуализация направете автоматично актуализиране на всички ъглови и npm пакети до най-новите версии.

Ето синтаксиса и опциите, с които може да се използва ng update.

ng update [package]

Настроики

  • суха тренировка --dry-run (alias: -d)

    Изпълнете, без да правите промени.

  • сила --force

    Ако е невярно, ще се изведе грешка, ако инсталираните пакети са несъвместими с актуализацията.

  • всичко --all

    Дали да актуализирате всички пакети в package.json.

  • следващия --next

    Използвайте най-голямата версия, включително бета и RC.

  • само за мигриране --migrate-only

    Извършете само миграция, не актуализира инсталираната версия.

  • от --from

    Версия, от която да се мигрира. Предлага се само с един пакет, който се актуализира, и само при миграция.

  • да се --to

    Версия, до която да се приложат миграции. Предлага се само с един пакет, който се актуализира, и само при миграции. Изисква от да бъде посочен. Установено е по подразбиране на инсталираната версия.

  • регистър --registry

    Регистърът на NPM, който да се използва.

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

Моля, проверете тези връзки, localhost:4200ако още не сте го направили. Не забравяйте да тичате, ng serveпреди да го отворите. С по-добро разбиране на CLI, вече сте готови да научите повече за това, което се генерира от най-важните му команди.

Повече информация:

  • Най-добрите ъглови примери
  • Най-добрите уроци за Angular и AngularJS
  • Как да проверим ъгловите реактивни форми