Angular cli что это

Angular CLI создание проекта: основные команды

Сегодня начинаем разбирать весьма новый фреймворк JavaScript — Angular. Для того чтобы не писать кучу лишнего кода самому, чтобы его запустить и не тратя на это время — сначала мы изучим инструмент Angular CLI.

Что такое Angular CLI

Это инструмент созданный командой Google, который помогает увеличить скорость работы с проектом. Чтобы с ним работать вам придется изучить несколько команд, которые прописываются в командной строке.

У вас наверное созрел вопрос, а что именно он может? С помощью его вы можете:

Также у него в арсенале имеется Webpack, который пользуется большой популярностью. Он нужен чтобы компилировать и запускать проекты во время разработки.

Как видите это очень мощный инструмент в разработке больших проектов, и на старте проекта.

Установка Angular CLI

Для того чтобы начать необходимо установить:

Npm подтянется вместе с Node js при его установки.

Он нам нужен из-за большого количества дополнительных библиотек, зависимостей, которые придется устанавливать. Так мы сможем производить установку каждой по отдельности библиотеки, либо сразу все, которые находятся в файле package.json.

package.json — может хранить все зависимости, которые используются для работы с проектом. Также в нем можно найти — имя проекта, версия, скрипты и т.д.

Заходим на сайт — nodejs. Здесь вас ждет две версии Node js — LTS и Current. Выбирайте LTS и устанавливайте ее.

Теперь давайте установим Angular CLI на ваш ПК. Для этого вам нужно перейти в командною строку. Это можно сделать двумя способами:

Два данных способа относятся к операционной системе Windows

После открытия командной строки вводим строку ниже. Она представляет собой запрос на скачивание пакета npm:

Эта библиотека большая, поэтому вас понадобиться подождать несколько минут для ее установки.

Вот и все работы были сделаны. Теперь можем перейти рассматривать функционал установленного пакета.

Команды Angular CLI

Вот список всех команд, которые вам понадобиться знать:

Это будет зависеть от скорости вашего интернета соединения.

Если вы зайдете в данный проект, то увидите такую картину:

ng serve — запускает Webpack, который в свою очередь собирает файлы вашего проекта и переносит их в оперативную память вашего компьютера. Если вы замените какой-то файл, то он заново будет пересобирать ваш проект.

Перейдите на localhost:4200 в браузере и сможете увидеть ваш проект.

ng build — собирает все ваши файлы проекта и переносит их в папку dist. Далее вы можете делать с ними все что угодно — например, залить куда-нибудь на хостинг.

При ng serve мы ни как не можем пощупать собранные файлы.

ng generate [spec_file] [name] — создает [spec_file] с названием [name] и автоматически добавляет(производит import) его в модуль.

[spec_file] — это левая колонка таблицы

Со всем этими файлами вы познакомитесь позже.

Замена стилизации в проектах

Источник

Начало работы с Angular

Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.

Что такое Angular?

Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:

Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.

Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.

Что вы создадите

Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.

Необходимые условия

Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:

Node.js

Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.

пакетный менеджер npm

Настройка приложения

Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular. Для установки Angular CLI, запустите следующие команды в терминале:

Если вам будет предложено применить строгую проверку типов, вы можете ответить «yes».

Перейдите в ваш новый проект с помощью команды cd :

В браузере перейдите на http://localhost:4200/, и вы увидите ваше новое приложение. Если измените любой из исходных файлов, приложение автоматически перезагрузится.

Знакомство с вашим Angular приложением

Таким образом, с самого начала вы используете лучшие приёмы разработки.

Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.

Структура Angular приложения

Angular построен на TypeScript. TypeScript — это надмножество JavaScript, т.е. любой правильный JavaScript-код будет работать в TypeScript. TypeScript предлагает типизацию и более лаконичный синтаксис, чем простой JavaScript, который дает вам инструмент для создание более удобного в сопровождении кода и минимизации ошибок.

Класс

Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения. Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.

HTML-шаблоны

У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. Шаблон можно задать либо строкой, либо как путь к файлу.

Для ссылки на внешний HTML-файл, используется свойство templateUrl :

Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:

Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент. Angular автоматически обновляет DOM, когда состояние компонента изменяется. Например, этот синтаксис можно применить для вставки динамического текста, как показано в следующем примере.

Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать. Значение для title берется из класса компонента:

Когда приложение загружает компонент и его шаблон, браузер видит следующее:

Стили

Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.

Чтобы включить стили непосредственного в декоратор компонента, используется свойство styles :

Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве styleUrls :

С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.

Резюме

Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.

Источник

6 лучших практик и профессиональных советов на тему использования Angular CLI

Дата публикации: 2017-11-03

От автора: разрабатывать приложения с помощью Angular CLI одно удовольствие! Команда Angular дала нам замечательный CLI с поддержкой большей части функций, необходимых для любого серьезного проекта. Стандартизированная структура проекта со всеми возможностями по тестировке (юнит и e2e тесты), достройка кода, степени продакшн билда с возможностью настройки окружения. Мечта становится явью, а вы экономите часы над новыми проектами. Спасибо, команда Angular!

Angular CLI замечательно работает прямо из коробки, однако в него можно внести несколько потенциальных улучшений, следуя лучшим практикам, чтобы наши проекты стали еще лучше!

Что мы будем изучать

Лучшие практики на модулях Core, Shared и Feature с ленивой загрузкой

Использование алиасов для приложения и папок окружения для более чистого импорта

Зачем и как использовать Sass и Angular Material

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Как создать хороший продакшн билд

Как отказаться от PhantomJS и перейти на Headless Chrome (тестирование)

Как выпускать проект с автоматически генерируемым логом изменений и автоматическим исправлением версии

1. Немного архитектуры

«Хорошо, мы сгенерировали новый проект с помощью Angular CLI, что дальше? Нужно ли продолжать генерировать сервисы и компоненты в случайные папки? Как структурировать проект?»

Хорошо разделить наше приложением на, как минимум, три разных модуля — Core, Shared и Feature (нам может понадобится более одного модуля feature).

CoreModule

Здесь необходимо реализовать все сервисы, которые должны иметь только один экземпляр в приложении (singleton сервисы). Типичные примеры – сервисы authentication и user. Разберем пример CoreModule.

SharedModule

Здесь необходимо реализовать все «тупые» компоненты и пайпы. Эти компоненты не импортируют и не вставляют сервисы из ядра или других функций в конструкторах. Они должны получать все данные через атрибуты в шаблоне использующего их компонента. Это все ведет к тому, что у SharedModule нет зависимостей с остальной частью приложения.

Идеальное место для импорта и реэкспорта компонентов Angular Material.

Как подготовить структуру проекта с помощью Angular CLI

Модули Core и Shared можно генерировать сразу после создания нового проекта. Так мы подготовимся к генерации дополнительных компонентов и сервисов с самого начала.

Запустите команду ng generate module core. Затем создайте файл index.ts в папке core и реэкспортируйте CoreModule. Мы будем реэкспортировать публичные сервисы, которые должны быть доступны во всем приложении на протяжении всей разработки.

После можно сделать то же самое для модуля shared.

FeatureModule

Мы создадим модули feature под каждую независимую функцию нашего приложения. Модули Feature должны включать только импорт сервисы из CoreModule. Если feature модулю А нужно импортировать сервис из feature модуля В, перенесите этот сервис в ядро.

«Иногда нужны сервисы, доступные только в пару функций, и перемещать их в ядро нет смысла. В этом случае можно создать специальные общие функциональные модули, что будет описано далее в статье.»

«Главное правило – старайтесь создавать функции, чтобы они зависели только от сервисов CoreModule и компонентов SharedModule и не зависели от других функций.»

Так наш код будет чистым, простым в обслуживании, а также расширится новыми функциями. Это также уменьшает рефакторинг. Если правильно следовать этому совету, мы будем уверены, что изменения в одной функции не влияют или не ломают остальную часть приложения.

LazyLoading

Функциональные модули необходимо загружать лениво во всех возможных случаях. Теоретически, только один модуль необходимо загружать синхронно на старте приложения для показа первичного контента. Все остальные функциональные модули нужно подгружать лениво, как только пользователь перейдет на них.

2. Алиасы для приложения и окружения

Использование алиасов в приложении и папках окружения обеспечит нам чистый импорт, который будет одинаков во всем приложении.

Рассмотрим гипотетическую, но частую ситуацию Мы работаем с компонентом, который находится на 3 папки вглубь в функции А, и нам нужно импортировать сервис из ядра, которое хранится на 2 папки вглубь. Для этого нам понадобится импорт выражение типа import < SomeService >from ‘../../../core/subpackage1/subpackage2/some.service’. «Определенно, не самый чистый импорт…»

Что еще хуже – каждый раз, когда нам необходимо изменить расположение этих двух файлов, у нас будет ломаться импорт. Сравните это выражение с более коротким import < SomeService >from «@app/core». Лучше, правда?

Чтобы использовать алиасы, необходимо добавить свойства baseUrl и paths в файл tsconfig.json…

Мы также добавим алиас @env, чтобы получать переменные окружения из любого места в приложении с помощью выражения import < environment >from «@env/environment». Оно будет работать на все заданное окружение, так как оно автоматически резолвит корректный файл окружения по флагу –env, передаваемому в команду ng build. Пути настроили, теперь можно импортировать окружение и сервисы…

Вы могли заметить, что мы импортируем записи (типа SomeSingletonService) напрямую из @app/core, а не @app/core/some-package/some-singleton.service. Это возможно, благодаря реэкспорту всех публичных записей в главном файле index.ts. На пакет (папку) создаем один файл index.ts, выглядят они следующим образом…

В большинстве компонентов и сервисов конкретного функционального модуля будет нужен доступ к сервисам CoreModule и компонентам SharedModule. Иногда этого может быть недостаточно для решения определенных бизнес-кейсов, и нам будут нужны «общие функциональные модули», которые дают функционал для ограниченного поднабор других функциональных модулей.

В этом случае наш импорт будет следующим import < SomeService >from ‘@app/shared-feature’;. Как в ядре, shared-feature берется через алиас @app.

3. Использование Sass

Sass – препроцессор стилей, добавляющий поддержку таких вещей, как переменные (несмотря на то, что в CSS они скоро и так появятся), функции, миксины…

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Sass также требует использовать официальную библиотеку Angular Material Components с расширенными возможностями темизации. Можно с уверенностью предположить, что Sass – выбор по умолчанию для большинства проектов.

Для использования Sass необходимо генерировать наш проект через Angular CLI команду ng new с флагом —style scss. Команда задаст большую часть обязательных настроек. Единственно, что не добавляется по умолчанию — stylePreprocessorOptions с includePaths. Мы можем задать их сами с помощью обязательного корневого значения «./» b и необязательного «./themes».

Это поможет нашему редактору найти импортированные символы и улучшить опыт разработки с помощью автоподстановки кода переменных Angular Material и функций-утилит.

«При создании темы приложения Angular Material хорошим тоном считается выносить определения темы в отдельную папку themes, одна тема на файл.»

4. Билд prod

По умолчанию проект, сгенерированный через Angular CLI, идет с очень простым скриптом ng build. Чтобы сгенерировать производственные артефакты, нам нужно кое-что настроить.

Необходимо добавить «build:prod»: «ng build —target production —build-optimizer —vendor-chunk» в наши скрипты package.json.

Целевое производство

Это флаг, активирующий минификацию кода и множество полезных билд флагов по умолчанию. Эквивалент следующему…

—environment prod —используйте файл environment.prod.ts для переменных окружения

—aot – включает компиляцию Ahead-of-Time. В будущих версиях Angular CLI она будет включена по умолчанию, но сейчас ее нужно включать вручную

—output-hashing all – хэш сгенерированных файлов и добавление хэша в конец имени файла для облегчения перебора кэша браузера (любое изменение в контенте файла приведет к разнице хэшей, что вынудит браузер загрузить новую версию файла)

—extract-css true – извлекает все CSS в отдельный файл стилей

—sourcemaps false — отключает генерацию source maps

—named-chunks false – отключает человекопонятные имена и использует вместо этого цифры

Другие полезные флаги

—build-optimizer – новая функция, которая уменьшает размер бандлов, но увеличивает время создания билдов. Используйте аккуратно! (также должна быть включена по умолчанию в будущем)

—vendor-chunk — извлекает весь вендорный код (код библиотек) в отдельный кусок

Посмотрите официальные документации к другим доступным флагам, которые могут пригодиться в отдельном проекте.

5. Phantom JS мертв! Да здравствует Headless Chrome!

PhantomJS – хорошо известный браузер без оболочки, который дэ факто был РЕШЕНИЕМ для запуска frontend тестов на CI серверах и множестве машин.

Инструмент, вроде бы, хороший, но у него отстает поддержка современных функций ECMAScript. Более того, нестандартное поведение вызывало головную боль во многих случаях, когда тесты пасятся локально без проблем, но фейлятся на CI машинах. К счастью, теперь от этого можно избавиться!

Из официальной документации… «Headless Chrome доступен в Chrome 59. С его помощью можно запускать браузер Chrome на машинах без оболочки. По факту, можно запускать Chrome без Chrome! Он переносит все современные функции веб-платформы Chromium и рендер движка Blink в командную строку.»

«Круто! Как это использовать в проекте на Angular CLI?»

В команду теста необходимо добавить флаг —browser ChromeHeadless. В итоге получается «test»: «ng test —browser ChromeHeadless —single-run» и «watch»: «ng test —browser ChromeHeadless» в наших скриптах package.json. Довольно просто!

6. Использование стандартизированных сообщений о комитах и генератор автоматических логов изменений

Всегда приятно быстро узнать о новых функциях и фиксах багов интересующего нас проекта. «Давайте дадим нашим пользователям такую же возможность!»

Писать логи изменений вручную – крайне утомительная задача, подверженная ошибкам. Лучше автоматизировать этот процесс. Нам могут помочь множество инструментов, но давайте остановимся на standard-version.

Он автоматически генерирует и обновляет файл CHANGELOG.md со всеми комитами, следуя Conventional Commits specification, а также корректно объявляет новую версию проекта.

Обычный комит задает обязательный type, необязательный (scope):, после чего идет commit message. Также можно добавить необязательные body и footer, оба разделяются пустой строкой. Давайте посмотрим инструмент на практики. Рассмотрим пример полного сообщения о комите библиотеки ngx-model.

Источник

Введение в Angular CLI

В этом посте мы узнаем об Angular CLI и увидим, как использовать его для инициализации нового Angular проекта.

Что такое Angular CLI?

Как и большинство современных инструментов веб-интерфейса, Angular CLI построен на основе Node.js.

Тем не менее, если вы создаете полнофункциональное веб-приложение с Angular, вам может понадобиться Node.js для создания серверной части, если вы хотите использовать JavaScript для интерфейса и серверной части.

В этом случае Node.js используется для создания серверной части вашего приложения и может быть заменен любой серверной технологией, которую вы хотите, например, PHP, Ruby или Python. Но Angular не зависит от Node.js, за исключением его инструмента CLI и установки пакетов из npm.

NPM означает Node Package Manager. Это реестр для размещения пакетов Node. В последние годы он также использовался для публикации внешних пакетов и библиотек, таких как Angular, React, Vue.js и даже Bootstrap.

Установка Angular CLI

Во-первых, вам нужно установить Node и npm на вашем компьютере для разработки. Есть много способов сделать это:

Давайте будем проще и используем официальный сайт. Просто зайдите на страницу загрузки и скачайте файлы установки для Windows, затем следуйте указаниям мастера установки.

Вы можете убедиться, что Node установлен в вашей системе, выполнив в командной строке следующую команду, которая должна отобразить установленную версию Node:

Затем выполните следующую команду для установки Angular CLI:

На момент написания этой статьи будет установлен Angular 8.3.

Если вы хотите установить Angular 9, просто добавьте тег next следующим образом:

После успешного завершения команды у вас должен быть установлен Angular CLI.

Краткое руководство по Angular CLI

После установки Angular CLI вы можете запустить много команд. Начнем с проверки версии установленного CLI:

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 : Обновляет ваше приложение и его зависимости. Подробнее смотрите https://update.angular.io/

version (v) : Вывод Angular версии CLI.

xi18n : Извлекает i18n из исходного кода.

Генерация проекта

Вы можете использовать CLI для быстрой генерации вашего Angular проекта, выполнив следующую команду в интерфейсе командной строки:

Как упоминалось ранее, CLI спросит вас, хотите ли вы добавить Angular Routing и вы можете ответить, введя y (Да) или n (Нет), что является вариантом по умолчанию. Он также спросит вас о формате таблицы стилей, который вы хотите использовать (например, CSS). Выберите ваши варианты и нажмите, Enter чтобы продолжить.

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

Обслуживание вашего проекта

Сначала перейдите в папку вашего проекта и выполните следующие команды:

Теперь вы можете перейти по адресу http://localhost:4200/, чтобы начать играть с вашим frontend приложением. Страница автоматически обновится, если вы измените какой-либо исходный файл.

Генерация Angular артефактов

Если вы хотите добавить свой компонент, директиву или пайп к другому модулю (кроме основного модуля приложения app.module.ts ), вы можете просто поставить перед именем компонента компонент с именем модуля и косой чертой:

my-module это имя существующего модуля.

Вывод

В этом посте мы увидели, как установить Angular CLI на нашу машину для разработки, и мы использовали его для инициализации нового Angular-проекта с нуля.

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

Источник