Angular cli что это

Angular CLI¶

Angular CLI — это npm-модуль, реализующий интерфейс командной строки для создания, разработки и поддержки Angular приложений. В системе он должен быть установлен глобально.

npm i @angular/cli -g 

Начнем с команды ng new . Она генерирует скелет вашего будущего приложения.

ng new my-app 

my-app — это название вашего проекта (может быть любым). Angular CLI создаст одноименную директорию и поместит в нее исходные файлы «скелета» для вашего приложения.

По умолчанию в только что сгенерированном проекте имеется только один компонент AppComponent , который содержит приветствующий текст. Для запуска приложения используйте ng serve .

ng serve -o 

Теперь приложение запущено и доступно по адресу http://localhost:4200 (по умолчанию). Параметр -o указывает, что после сборки приложение должно автоматически открыться в браузере.

Если вам необходим другой порт или у вас статический IP-адрес и вы хотите осуществлять доступ именно по нему, используйте флаги port и host .

ng serve -o --port 5000 --host x.x.x.x 

Теперь вернемся к ng new и рассмотрим ее основные параметры:

style задает для проекта расширение файлов CSS (sass, less, css — по умолчанию); routing если указан, создается модуль маршрутизации; inline-style если указан, все стили вписываются в компонент в строковом виде; inline-template если указан, весь HTML-код вписывается в компонент в строковом виде.

С полным перечнем возможных флагов можно ознакомиться здесь.

Другая незаменимая команда Angular CLI — ng generate . Она генерирует «скелет» любой сущности Angular.

ng generate component my-app1 --prefix --flat 

или более краткая запись

ng g component my-app1 --prefix --flat 

Если сущность может быть покрыта unit-тестами, для нее дополнительно создается файл *.spec.ts .

Параметр —prefix указывает префикс генерируемых сущностей (по умолчанию app ). Если указать его без значения, то префикс будет опущен.

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

Причем создание осуществляется Angular CLI интеллектуально. Например, при создании компонента он автоматически определяется к модулю приложения (можно жестко указать с помощью флага —module ) и прописывается в свойстве declarations .

Чтобы пропустить автоматическое добавление сущности в проект, укажите параметр —skip-import .

ng g component my-app1 --prefix --flat --skip-import 

Полный список сущностей, которые могут быть созданы с помощью ng generate :

• class ;
• enum ;
• interface ;
• component ;
• directive ;
• pipe ;
• service ;
• guard ;
• module ;
• application ;
• library ;
• universal .

Более подробно с параметрами для каждой сущности можно ознакомиться в официальной документации Angular CLI.

Ключевую роль также имеет ng build . Команда используется для сборки версии приложения, которая обычно запускается на удаленном сервере.

Для многих только начинающих работу с Angular будет полезным использование ng doc . Она ищет вхождения переданного значения в разделе API документации на официальном сайте Angular. Если указан флаг —search — поиск осуществляется по всему сайту.

ng doc forRoot --search 

Для запуска автоматизированных тестов (unit и e2e) имеются команды ng test и ng e2e соответственно.

Не ограничивайте себя использованием только ng serve и ng generate , старайтесь автоматизировать любой ручной труд и вы сэкономите много времени.

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

Введение в Angular CLI

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

Что такое Angular CLI?

Angular CLI — официальный инструмент для инициализации и работы с Angular-проектами. Это избавит вас от хлопот сложных конфигураций и инструментов сборки, таких как TypeScript, Webpack и так далее.

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

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

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

Как только вы создадите бандл своего приложения (соберете готовую сборку для публикации в продакшене), вам не понадобятся Node.js, потому что финальные пакеты — это просто статический HTML, CSS и JavaScript, которые могут обслуживаться любым сервером или CDN.

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

Ознакомьтесь со стеком MEAN — это архитектура, которая включает MongoDB, Express (веб-сервер и инфраструктуру REST API, построенную на основе Node.js) и Angular. Вы можете прочитать эту статью, если хотите начать работу с пошаговым руководством.

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

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

Установка Angular CLI

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

1. использование NVM (Node Version Manager) для установки и работы с несколькими версиями Node в вашей системе
2. используя официальный менеджер пакетов вашей операционной системы
3. установка его с официального сайта.

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

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

$ node -v 

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

$ npm install @angular/cli 

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

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

$ npm install @angular/cli@next 

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

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

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

$ ng version 

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

$ ng help 

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 проекта, выполнив следующую команду в интерфейсе командной строки:

$ ng new frontend 

Примечание: frontend — это название проекта. Конечно, вы можете выбрать любое допустимое имя для вашего проекта. Поскольку мы создадим приложение с полным стеком, я использую frontend в качестве имени для внешнего приложения.

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

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

• /e2e/ : содержит сквозные (имитирующие поведение пользователя) тесты сайта
• /node_modules/ : Все сторонние библиотеки установлены в эту папку с помощью npm install
• /src/ : содержит исходный код приложения. Большая часть работы будет сделана здесь
• /app/ : содержит модули и компоненты
• /assets/ : содержит статические ресурсы, такие как изображения, шрифты и стили
• /environments/ : содержит файлы конфигурации среды (production и development)
• browserslist : необходим авторефиксеру для поддержки CSS
• favicon.ico : favicon сайта
• index.html : основной HTML файл
• karma.conf.js : файл конфигурации для Karma (инструмент тестирования)
• main.ts : Основной исходный файл, откуда загрузится AppModule
• polyfills.ts : нужные полифилы
• styles.css : файл глобальной таблицы стилей для проекта
• test.ts : это файл конфигурации для karma
• tsconfig.*.json : файлы конфигурации для TypeScript
• angular.json : содержит конфигурации для CLI
• package.json : содержит основную информацию о проекте (название, описание и зависимости)
• README.md : файл который содержит описание проекта
• tsconfig.json : файл конфигурации для TypeScript
• tslint.json : файл конфигурации для TSlint (инструмент статического анализа)

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

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

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

$ cd frontend $ ng serve 

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

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

Angular CLI предоставляет команду ng generate , которая помогает разработчикам создавать базовые артефакты Angular, такие как модули, компоненты, директивы, пайпы и сервисы:

$ ng generate component my-component 

my-component это имя компонента. Angular CLI будет автоматически добавлять ссылку components , directives и pipes в файле src/app.module.ts .

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

$ ng g component my-module/my-component 

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

Вывод

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

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

Запуск Angular с помощью строки Angular CLI

Любой проект Angular включает в себя множество движущихся частей. Angular CLI (интерфейс командной строки) – это новый инструмент, который позволяет легко запускать проекты, генерировать компоненты, маршруты или сервисы, обслуживать проекты и запускать тесты.

Примечание: В этом руководстве используется Angular 2 и новее.

Установка Angular CLI

Первый шаг – установить пакет Angular CLI с помощью npm:

$ npm install -g @angular/cli

Эта команда установит Angular CLI глобально. Если npm пожалуется, попробуйте запустить эту команду с помощью sudo:

$ sudo npm install -g @angular/cli

Запуск нового проекта

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

Она создаст простой проект Angular со всеми необходимыми компонентами, чтобы вы могли сразу приступить к написанию кода. Вот пример того, как будет выглядеть структура каталогов вашего нового проекта:

├── README.md ├── angular-cli.json ├── **e2e …** ├── karma.conf.js ├── **node\_modules …** ├── package.json ├── protractor.conf.js ├── **src …** └── tslint.json

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

По умолчанию будет запущен локальный сервер. Он работает по адресу http://localhost:4200. Этот сервер будет следить за изменениями в вашем проекте и автоматически обновлять страницу. Запустите следующую команду из каталога проекта:

Команда ng generate

Используйте ng generate для создания необходимых для вашего проекта вещей: компонентов, маршрутов, каналов, сервисов и директив. К примеру, чтобы создать компонент, нужно ввести:

$ ng generate component path/component-name

Тестирование

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

Заключение

Angular CLI – очень мощный инструмент с кучей полезных функций и команд. Здесь вы познакомились с самыми базовыми возможностями командной строки Angular.

Читайте также:

• Управление данными Angular с помощью Meta
• Как анализировать размеры пакетов приложений Angular

Что такое Angular?¶

Эта тема поможет вам понять Angular: что такое Angular, какие преимущества он дает и чего можно ожидать, когда вы начнете создавать свои приложения.

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

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

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

Самое главное, что экосистема Angular состоит из разнообразной группы, включающей более 1,7 миллиона разработчиков, авторов библиотек и создателей контента.

Приложения Angular: Основные принципы¶

В этом разделе объясняются основные идеи, лежащие в основе Angular. Понимание этих идей поможет вам более эффективно проектировать и создавать приложения.

Компоненты¶

Компоненты — это строительные блоки, из которых состоит приложение. Компонент включает в себя класс TypeScript с декоратором @Component() , HTML-шаблон и стили.

Декоратор @Component() определяет следующую специфическую для Angular информацию:

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

Ниже приведен минимальный компонент Angular.

 1 2 3 4 5 6 7 8 9 10 11 12

import  Component > from '@angular/core'; @Component( selector: 'hello-world', template: ` 
Hello World 
This is my first component! `, >) export class HelloWorldComponent  // The code in this class drives the component's behavior. > 

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

hello-world>hello-world> 

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

1 2 3 4

hello-world> h2>Hello Worldh2> p>This is my first component!p> hello-world> 

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

Более подробную информацию о том, что делать с компонентами, можно найти в разделе Обзор компонентов Angular.

Шаблоны¶

Каждый компонент имеет HTML-шаблон, который определяет способ отображения этого компонента. Вы определяете этот шаблон либо в строке, либо по пути к файлу.

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

Одним из применений этой возможности является вставка динамического текста, как показано в следующем примере.

Значение для message берется из класса компонента:

 1 2 3 4 5 6 7 8 9 10

import  Component > from '@angular/core'; @Component( selector: 'hello-world-interpolation', templateUrl: './hello-world-interpolation.component.html', >) export class HelloWorldInterpolationComponent  message = 'Hello, World!'; > 

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

p>Hello, World!p> 

Обратите внимание на использование двойных фигурных скобок — они указывают Angular интерполировать содержимое внутри них.

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

1 2 3

p [id]="sayHelloId" [style.color]="fontColor"> You can set my color in the component! p> 

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

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

1 2 3 4 5 6 7

button type="button" [disabled]="canClick" (click)="sayMessage()" > Trigger alert message button> 

В предыдущем примере вызывается метод, который определен в классе компонента:

1 2 3

sayMessage()  alert(this.message); > 

Ниже приведен комбинированный пример интерполяции, привязки свойств и привязки событий в шаблоне Angular:

hello-world-bindings.component.ts hello-world-bindings.component.html

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import  Component > from '@angular/core'; @Component( selector: 'hello-world-bindings', templateUrl: './hello-world-bindings.component.html', >) export class HelloWorldBindingsComponent  fontColor = 'blue'; sayHelloId = 1; canClick = false; message = 'Hello, World'; sayMessage()  alert(this.message); > > 

 1 2 3 4 5 6 7 8 9 10 11 12 13

button type="button" [disabled]="canClick" (click)="sayMessage()" > Trigger alert message button> p [id]="sayHelloId" [style.color]="fontColor"> You can set my color in the component! p> p>My color is >p> 

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

А также создавайте собственные пользовательские директивы для создания великолепного пользовательского опыта.

Следующий код является примером директивы *ngIf .

hello-world-ngif.component.ts hello-world-ngif.component.html

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import  Component > from '@angular/core'; @Component( selector: 'hello-world-ngif', templateUrl: './hello-world-ngif.component.html', >) export class HelloWorldNgIfComponent  message = "I'm read only!"; canEdit = false; onEditClick()  this.canEdit = !this.canEdit; if (this.canEdit)  this.message = 'You can edit me!'; > else  this.message = "I'm read only!"; > > > 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

h2>Hello World: ngIf!h2> button type="button" (click)="onEditClick()"> Make text editable! button> div *ngIf="canEdit; else noEdit"> p>You can edit the following paragraph.p> div> ng-template #noEdit> p> The following paragraph is read only. Try clicking the button! p> ng-template> p [contentEditable]="canEdit">>p> 

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

Более подробную информацию о шаблонах смотрите в разделе Шаблоны.

Инъекция зависимостей¶

Инъекция зависимостей позволяет вам объявлять зависимости ваших классов TypeScript, не заботясь об их инстанцировании. Вместо этого Angular выполняет инстанцирование за вас.

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

Понимание инъекции зависимостей не является критическим для начала использования Angular, но настоятельно рекомендуется в качестве лучшей практики. Многие аспекты Angular в той или иной степени используют его преимущества.

Чтобы проиллюстрировать, как работает внедрение зависимостей, рассмотрим следующий пример. Первый файл, logger.service.ts , определяет класс Logger .

Этот класс содержит функцию writeCount , которая записывает число в консоль.

1 2 3 4 5 6 7 8

import  Injectable > from '@angular/core'; @Injectable( providedIn: 'root' >) export class Logger  writeCount(count: number)  console.warn(count); > > 

Далее в файле hello-world-di.component.ts определяется компонент Angular. Этот компонент содержит кнопку, которая использует функцию writeCount класса Logger .

Чтобы получить доступ к этой функции, служба Logger внедряется в класс HelloWorldDI путем добавления private logger: Logger в конструктор.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import  Component > from '@angular/core'; import  Logger > from '../logger.service'; @Component( selector: 'hello-world-di', templateUrl: './hello-world-di.component.html', >) export class HelloWorldDependencyInjectionComponent  count = 0; constructor(private logger: Logger) <> onLogMe()  this.logger.writeCount(this.count); this.count++; > > 

Для получения дополнительной информации об инъекции зависимостей и Angular смотрите раздел Инъекция зависимостей в Angular.

Angular CLI¶

Angular CLI — это самый быстрый, простой и рекомендуемый способ разработки приложений Angular. Angular CLI делает некоторые задачи беспроблемными.

Команда	Подробности
ng build	Компилирует приложение Angular в выходной каталог.
ng serve	Собирает и обслуживает ваше приложение, перестраивая его при изменении файлов.
ng generate	Генерирует или изменяет файлы на основе схемы.
ng test	Запускает модульные тесты для данного проекта.
ng e2e	Собирает и обслуживает приложение Angular, затем запускает сквозные тесты.

Angular CLI — ценный инструмент для создания ваших приложений.

Сторонние библиотеки¶

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

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

Некоторые из доступных библиотек включают:

Библиотека	Подробности
Angular Router	Расширенная навигация и маршрутизация на стороне клиента на основе компонентов Angular. Поддерживает ленивую загрузку, вложенные маршруты, пользовательское сопоставление путей и многое другое.
Angular Forms	Единая система участия и проверки форм.
Angular HttpClient	Надежный HTTP-клиент, способный обеспечить более продвинутое взаимодействие клиент-сервер.
Angular Animations	Богатая система для управления анимацией на основе состояния приложения.
Angular PWA	Инструменты для создания прогрессивных веб-приложений \(PWA\) , включая сервисный работник и манифест веб-приложения.
Angular Schematics	Автоматизированные инструменты для создания лесов, рефакторинга и обновления, которые упрощают разработку в больших масштабах.

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

Эти библиотеки необходимы только тогда, когда они могут помочь вам добавить функции в ваше приложение или решить конкретную проблему.

Следующие шаги¶

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

Чтобы увидеть Angular в действии, посмотрите учебник Начало работы с Angular. В этом учебнике используется stackblitz.com, чтобы вы могли изучить рабочий пример Angular без каких-либо требований к установке.

Для дальнейшего изучения возможностей Angular рекомендуем следующие разделы:

• Понимание Angular
• Гайд разработчика Angular