Автор оригинала: Ahmed Bouchefra.
В этой статье мы покажем основы угловых CLI, и мы будем использовать его для инициализации нового углового 8 проекта.
Что такое угловой CLI?
Угловой CLI является официальным инструментом для инициализации и работы с угловыми проектами. Он спасает вас от хлопот сложных конфигураций и создания инструментов, таких как TeampScript, WebPack и так далее.
После установки угловой CLI вам нужно будет запустить одну команду для создания проекта и другого, чтобы служить ему с помощью локального сервера разработки для воспроизведения с вашим приложением.
Как и большинство современных инструментов Frontend в наши дни, угловая CLI построен на вершине Node.js.
Node.js – это серверная технология, которая позволяет вам запустить JavaScript на сервере и построить веб-приложения для серверов. Тем не менее, угловой – это технология передней части, поэтому, даже если вам нужно установить Node.js на вашу машину для разработки, это только для запуска CLI.
После создания вашего приложения для производства вам не понадобится Node.js, потому что окончательные пакеты являются просто статическими HTML, CSS и JavaScript, которые можно подавать любым сервером или CDN.
Это сказано, если вы Создание полного стекла веб-приложение с угловым , вам может понадобиться node.js для создания задней части, если вы хотите использовать JavaScript для переднего конца и заднего конца.
Проверьте средний стек – это архитектура, которая включает в себя MongoDB, Express (веб-сервер и API-каркас API, построенная на верхней части Node.js) и угловой. Вы можете прочитать это Статья Если вы хотели бы пошаговое учебное пособие, чтобы начать.
В этом случае Node.js используется для создания задней конечной части вашего приложения и может быть заменена любыми технологиями серверов, которую вы хотите, например, PHP, Ruby или Python. Но угловые не зависят от Node.js, за исключением его инструмента CLI и для установки пакетов из NPM.
NPM обозначает узел пакета менеджера. Это реестр для хостинга узловных пакетов. В последние годы также использовалось для публикации фронтальных пакетов и библиотек, таких как угловые, реагирование, Vue.js и даже загрузка.
Вы можете добраться до или следовать автору через его Персональный сайт , Twitter , LinkedIn и Github Отказ
Установка угловой CLI.
Во-первых, вам необходимо установить узел и NPM на вашей машине разработки. Есть много способов сделать это, например:
- Использование NVM (диспетчер версий узла) для установки и работы с несколькими версиями узла в вашей системе
- Использование официального управляющего пакета вашей операционной системы
- Установка его с официального сайта.
Давайте будем простым и использовать официальный сайт. Просто посетите Скачать страницу И возьмите двоичные файлы для Windows, затем следуйте мастеру установки.
Вы можете убедиться, что узел установлен в вашей системе, запустив следующую команду в командной строке, которая должна отображать установленную версию узла:
$ node -v
Далее запустите следующую команду, чтобы установить угловую CLI:
$ npm install @angular/cli
Во время этого письма будет установлен угловой 8,3.
Если вы хотите установить угловой 9, просто добавьте Следующий Тег следующим образом:
$ npm install @angular/cli@next
После того, как команда завершится успешно, у вас должен быть установлен угловой CLI.
Краткое руководство для угловых CLI
После установки угловой CLI вы можете запустить много команд. Давайте начнем с проверки версии установленной CLI:
$ ng version
Вторая команда, которую вам может понадобиться, это Помогите Команда для получения полной помощи использования:
$ ng help
CLI предоставляет следующие команды:
Добавить : Добавляет поддержку внешней библиотеки в ваш проект.
построить (б) : Компилирует угловое приложение в выходной каталог с именем Dist/ на данном выходном пути. Должен быть выполнен из каталога Workspace.
config .: Извлекает или устанавливает значения угловых конфигураций.
Док (D) : Открывает официальную угловую документацию ( angular.io ) в браузере и ищет данное ключевое слово.
E2E (E) Создание и обслуживает угловое приложение, затем выполняет сквозные тесты с использованием транспортировки.
генерировать (г) : Генерирует и/или изменяет файлы на основе схемы.
Помогите : Перечисляет доступные команды и их короткие описания.
lint (l) : Запускает подвижные инструменты на угловом коде приложения в данной папке проекта.
Новый (N) : Создает новое рабочее пространство и начальное угловое приложение.
Беги : Запускает пользовательскую цель, определенную в вашем проекте.
Подавать (ы) : Создает и обслуживает ваше приложение, восстановление изменений файлов.
Тест (T) : Пробегает модульные тесты в проекте.
Обновить : Обновляет ваше приложение и его зависимости. Смотри https://update.angular.io/
Версия (v) : Выводит угловую CLI версию.
xi18n : Извлекивает сообщения I18N из исходного кода.
Генерируя проект
Вы можете использовать угловую CLI для быстрого генерирования вашего углового проекта, запустив следующую команду в вашем интерфейсе командной строки:
$ ng new frontend
Примечание: Frontend это название проекта. Конечно, вы можете выбрать любое действительное имя для вашего проекта. Поскольку мы создадим приложение Full-Stack, я использую Frontend как имя для предельной приложения.
Как упоминалось ранее, CLI спросит вас Хотите добавить угловую маршрутизацию? И вы можете ответить, введя y (Да) или N (Нет), который является опцией по умолчанию. Он также спросит вас о формате таблицы стилей, который вы хотите использовать (например, CSS). Выберите свои опции и нажмите Введите продолжать.
После этого у вас будет ваш проект, созданный со структурой каталогов и кучей конфигураций и файлов кода. Это будет в основном в форматах Tymdercript и JSON. Давайте посмотрим на роль каждого файла:
/e2e/: содержит сквозные (моделирование поведения пользователя) тесты сайта/node_modules/: Все 3-й партийные библиотеки установлены в эту папку, используяУстановка NPM/SRC/: Содержит исходный код приложения. Большинство работ будут сделаны здесь/приложение/: содержит модули и компоненты/Активы/: содержит статические активы, такие как изображения, значки и стили/Среда/: содержит среду (производство и разработка) конкретные файлы конфигурацииБраузеры: нужен Autoprefixer для поддержки CSSfavicon.ico: Фавиконindex.html: основной HTML-файлkarma.conf.js: файл конфигурации для кармы (инструмент тестирования)Main.ts: основной запуск файла откуда AppModule загрузчикPolyfills.ts: полифилки, необходимые угловымиstyles.csss: Глобальный файл таблицы стилей для проектаTest.ts: Это файл конфигурации для кармыtsconfig. *. JSON: файлы конфигурации для Typeycriptangular.json: содержит конфигурации для CLIPackage.json: Содержит основную информацию проекта (имя, описание и зависимости)Readme.md: файл markdown, который содержит описание проектаtsconfig.json: файл конфигурации для TeadercriptTslint.json: файл конфигурации для ЦВЛИНТ (статический инструмент анализа)
Обслуживание вашего проекта
Angular CLI обеспечивает полную цепочку инструментов для разработки интерфейсных приложений на вашем локальном компьютере. Таким образом, вам не нужно устанавливать локальный сервер для обслуживания вашего проекта – вы можете просто использовать NG служить Команда с вашего терминала для обслуживания вашего проекта локально.
Во-первых, перейдите в папку вашего проекта и запустите следующие команды:
$ cd frontend $ ng serve
Теперь вы можете перейти к http://localhost: 4200/ Адрес, чтобы начать играть с вашим передним приложением. Страница будет автоматически прожить перезагрузку, если вы измените любой исходный файл.
Генерация угловых артефактов
Угловая CLI обеспечивает NG генерирует Команда, которая помогает разработчикам генерировать основные угловые артефакты, такие как модули, компоненты, директивы, трубы и услуги:
$ ng generate component my-component
мой-компонент это название компонента. Угловая CLI автоматически добавит ссылку на Компоненты , Директивы и Трубы В src/app.module.ts файл.
Если вы хотите добавить свой компонент, директиву или трубу в другой модуль (кроме основного модуля приложения, app.module.ts ), вы можете просто префиснуть имя компонента с именем модуля и Slash:
$ ng g component my-module/my-component
мой модуль это имя существующего модуля.
Заключение
В этом посте мы видели, как установить угловые CLI на нашей машине разработки, и мы использовали его для инициализации нового углового проекта с нуля.
Мы также видели различные команды, которые вы можете использовать на протяжении всего разработки вашего проекта для генерации угловых артефактов, таких как модули, компоненты и услуги.