Как установить angular на windows
Обновлено: 06.07.2024
Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.
| Необходимые условия: | Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки. |
|---|---|
| Цель: | Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы. |
Что такое Angular?
Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:
- Основанный на компонентах фреймворк для создания масштабируемых веб-приложений
- Набор хорошо интегрированных библиотек, охватывающих широкий спектр функций: маршрутизация, управление формами, клиент-серверное взаимодействие и т.д.
- Набор инструментов разработчика, которые помогут вам разрабатывать, собирать, тестировать и обновлять ваш код
Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.
Прежде, чем приступить к изучению платформы Angular, сначала стоит познакомиться с Angular CLI. Angular CLI - это быстрый, простой и рекомендуемый способ разработки Angular-приложений. Angular CLI облегчает выполнение ряда задач. Вот некоторые из них:
| ng build | Компилирует Angular-приложение в выходной каталог. |
| ng serve | Собирает и запускает ваше приложение, пересобирая его при изменении файлов. |
| ng generate | Генерирует или изменяет файлы на основе схематиков |
| ng test | Запускает модульные тесты для заданного проекта. |
| ng e2e | Собирает и запускает Angular-приложение, запуская затем сквозные тесты. |
Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.
Что вы создадите
Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.
Необходимые условия
Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:
Node.js
Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.
пакетный менеджер npm
Angular, Angular CLI, Angular приложения зависят от npm пакетов которые обеспечивают множество функций. Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm. Это руководство использует npm через интерфейс командной строки, который устанавливается с Node.js по умолчанию. Для того, чтобы узнать какая версия npm установлена, запустите npm -v в терминале.
Настройка приложения
Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular. Для установки Angular CLI, запустите следующие команды в терминале:
Команды Angular CLI начинаются с ng , за которым следует то, что вы хотите CLI сделал. В рабочей директории (например, Desktop) выполните команду ng new , чтобы создать новое приложение под названием todo :
В текущей директории команда ng new создаст необходимое для работы маленькое Angular-приложение. Дополнительные флаги, --routing и --style , определяют, как обрабатывать навигацию и стили в приложении. В этом руководстве эти функции будут описаны позже.
Если вам будет предложено применить строгую проверку типов, вы можете ответить "yes".
Перейдите в ваш новый проект с помощью команды cd :
Запустите ваше приложение todo , выполнив команду ng serve :
Когда CLI спросить про аналитику, ответьте no .
Пока выполняется ng serve , запускать другие команды можно в новой вкладке или окне терминала. Если вы захотите остановить работу приложения, нажмите Ctrl+c в терминале, где оно было запущено.
Знакомство с вашим Angular приложением
Исходные файлы, на которых будет сосредоточено внимание в этом руководстве находится в src/app . Файлы, генерируемые CLI автоматически, на которые стоит обратить внимание:
Таким образом, с самого начала вы используете лучшие приёмы разработки.
Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.
Структура Angular приложения
Angular построен на TypeScript. TypeScript — это надмножество JavaScript, т.е. любой правильный JavaScript-код будет работать в TypeScript. TypeScript предлагает типизацию и более лаконичный синтаксис, чем простой JavaScript, который дает вам инструмент для создание более удобного в сопровождении кода и минимизации ошибок.
Компоненты — это строительные блоки Angular-приложений. Компоненты включают TypeScript-класс, который имеет декоратор @Component() , HTML-шаблон и стили.
Класс
Компонент называется ItemComponent , и имеет селектор app-item . Вы можете использовать этот селектор как и обычные HTML-теги, помещая его в другие шаблоны. Когда селектор находится в компоненте, браузер отображает шаблон этого компонента. Это руководство поможет вам создать два компонента и использовать один в другом.
Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения. Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.
HTML-шаблоны
У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. Шаблон можно задать либо строкой, либо как путь к файлу.
Для ссылки на внешний HTML-файл, используется свойство templateUrl :
Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:
Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент. Angular автоматически обновляет DOM, когда состояние компонента изменяется. Например, этот синтаксис можно применить для вставки динамического текста, как показано в следующем примере.
Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать. Значение для title берется из класса компонента:
Когда приложение загружает компонент и его шаблон, браузер видит следующее:
Стили
Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.
Чтобы включить стили непосредственного в декоратор компонента, используется свойство styles :
Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве styleUrls :
С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.
Резюме
Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.
Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.
Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.
Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.
Начало работы c Angular
Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. При этом особого какого-то знания для работы с NodeJS и npm не требуется. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm.
То же самое касается и npm. Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.
После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp .
Установка Angular CLI
Для компиляции приложения мы будем использовать инфрастуктуру Angular CLI. Angular CLI упрощает создание приложения, его компиляцию. Angular CLI распространяется как пакет npm, поэтому для его использования его необходимо сначала установить. Для установки Angular CLI откроем консоль/командную строку и выполним в ней следующую команду:
Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.
Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:
Установка пакетов. Package.json
В папке проекта создадим новый файл package.json со следующим содержимым:
Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.
В секции "scripts" описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.
Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:
И затем выполним команду npm install , которая установит все необходимые модули:
После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.
Определение приложения
Затем создадим в папке проекта подпапку, которую назовем src - она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .
Создание компонента Angular
В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component .
Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]="name" и > к некоторой модели name.
И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name - в данном случае это пустая строка.
Создание модуля приложения
Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:
Этот модуль, который в данном случае называется AppModule, будет входной точкой в приложение.
С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.
Запуск приложения
Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.
Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:
Данный файл определяет полифилы - инструменты, которые необходимы для поддержки приложения на Angular различными браузерами.
Создание главной страницы
Далее определим в папке src главную страницу index.html приложения:
А в элементе body определен элемент <my-app> , в который собственно и будет загружаться приложение.
Определение конфигурации
Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :
Данный файл определяет настройки для компилятора TypeScript. Опция "compilerOptions" устанавливает параметры компиляции. А опция "files" определяет компилируемые файлы. В нашем случае это файл приложения - main.ts, который подтягивает все остальные файлы приложения, и файл полифилов polyfills.ts.
Angular.json
Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:
Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.
Далее идет секция projects , которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта - helloapp.
Проект определяет следующие опции:
projectType : тип проекта. Значение "application" указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки.
Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды "build" задано значение "@angular-devkit/build-angular:browser" - данный билдер для построения использует сборщик пакетов webpack. А для команды "serve" задано значение "@angular-devkit/build-angular:dev-server" - данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.
Параметр options задает параметры построения файлов. Для команды "build" здесь определены следующие опции:
outputPath : путь, по которому будет публиковаться скомпилированное приложение
index : путь к главной странице приложения
main : путь к главному файлу приложения, где собственно запускается приложение Angular
polyfills : путь к файлу полифилов
tsConfig : путь к файлу конфигурации TypeScript
aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется
Для команды "serve" указана только одна опцияя - browserTarget , которая содержит ссылку на конфигурацию для команды build - "helloapp:build". То есть по сути эта команда использует ту же конфигурацию, что и команда build.
Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.
В итоге у нас получится следующая структура проекта:
Запуск проекта
И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :
Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер - по умолчанию это "http://localhost:4200/". Если мы передаем команде флаг --open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:
Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.
Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.
Стоит отметить, что консоль может быть скрыта после запуска приложения, но тем не менее оно будет запущено, и мы сможем к нему обращаться. А при изменениях произойдет его перекомпиляция.
Последние два месяца я промучился с задачей, на которую я смог найти в Интернете только косвенные ответы. Задача называлась так: «Как упаковать Angular в war и развернуть на Tomcat» (Angular 4 + Maven war + Tomcat). В итоге, меня ждала победа с этим страшным DevOps’ом и мне захотелось помочь тем, кто так же будет мучиться с этой проблемой.
Но, немного подумав, я решил, что стоит рассказать свой путь с самого начала, начиная с момента установки Angular на компьютер. Потом я отдельно рассмотрю deploy чистого Angular на Tomcat, а в самом конце поговорим уже о подготовки war-контейнера и размещении его на сервере с последующим развертыванием.
Что такое Angular?
Итак, для начала давайте разберем, что такое Angular. Немного перефразируем Вики в этом смысле:
Установка Angular на Windows
Теперь перейдем непосредственно к тому как проходит установка Angular на Windows. Для установки Angular Вам понадобится NodeJS. NodeJS – это платформа, в задачу которой входит транслирование JavaScript’а в машинный код. Node – это не User-friendly GUI с кнопочками. К сожалению взаимодействие со средой осуществляется полностью через консоль Windows.
Для установки NodeJS нужно перейти в раздел Download официального сайта (ссылка ) и скачать msi-файл и запустить его после окончания загрузки.
Если у вас Windows 10, то Вы можете получить следующее предупреждение:
В данном случае нужно нажать ссылку в нижней части окна «Открыть параметры» и в открывшимся диалоговом окне, в разделе «Приложения и возможности», в группе «Установка приложений» выбрать нужный Вам пункт, разрешающий установку не из магазина (например, «Разрешить использование приложений из любого места»).
После этого следует установить программу, следуя инструкции установщика (никаких проблем вызвать не должно).
Теперь настало время проверить установку. Нажмите комбинацию клавиш Win + R, введите “cmd” в поле и нажмите Enter. Откроется консоль, в которой введите последовательно:
Установка займет какое-то время и весь ее процесс будет отображен в Вашем терминальном окне. Сразу после этого можно приступать к созданию Вашего первого проекта, но об это мы поговорим уже в следующей статье.
Недавно я был наставником ngHeroes. Мне очень понравилось помогать студентам и людям из других отраслей, которые хотели изучать веб-разработку на Angular. Многие из них хотели начать новую карьеру. Я был рад отметить, что посещаемость женщин больше, чем я ожидал, учитывая гендерный разрыв в нашей отрасли.
У студентов ngHeroes были компьютеры на MacOS, Linux и Windows. Нам удалось их запустить, но в процессе возникло несколько сложных моментов. В этой статье я сосредоточусь на установке инструментов и зависимостей, необходимых для разработки приложений Angular на компьютере под управлением Windows. Они почти одинаковы для других платформ.
1. Node.js
Первое, что вам нужно установить, это Node.js. Это среда выполнения JavaScript, которая может запускать веб-серверы, скрипты и консольные приложения. Многие инструменты веб-разработки используют Node.js.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Перейдите на сайт Node.js. На нем предлагаются 2 установочных пакета, исходя из вашей операционной системы и архитектуры процессора: LTS (долгосрочная поддержка) и Текущий.
Таблица 1. Поддержка Node.js в Angular CLI
Для нового приложения мы можем выбрать новейшую версию Angular CLI. На jsDelivr мы можем прочитать описание пакета для последней версии Angular CLI. На момент написания статьи это Angular CLI версии 7.0.5. В описании пакета мы также видим поддерживаемую версию Node.js.
Мы решили использовать новейший Angular CLI. Давайте вернемся на сайт Node.js, загрузим установщик последней версии LTS, поддерживаемой Angular CLI, и запустим его с правами администратора.
Если мастер установки спросит, включать ли Boxtstarter в установку, включите его. Подробнее об этом через минуту. Подождите, пока закончится установка. Это может занять некоторое время и даже может потребовать перезагрузки.
Чтобы убедиться, что Node.js установлен, откройте терминал (командную строку) и запустите node -v, чтобы отобразить установленную версию Node.js.
2. Инструменты сборки Windows
Установка инструментов сборки Windows с помощью NPM CLI
Мы решили использовать новейшую версию Angular CLI, но прежде чем мы сможем ее установить, нам нужно позаботиться о дополнительных зависимостях.
В частности, некоторые инструменты компиляции используются для задач пакетом node-gyp до и после установки для различных пакетов, таких как Angular CLI.
Для Windows нам нужны Python 2.7, инструменты сборки Visual Studio и инструменты сборки C++. К счастью, мы можем установить их все как один пакет, используя интерфейс командной строки NPM.
Если вы ранее установили Node.js с включенной опцией Boxstarter, у вас уже есть эти зависимости. Перейдите к шагу 3.
Выполните следующую команду, чтобы установить все специфичные для Windows зависимости для Angular CLI. Для установки из общедоступного реестра NPM используется интерфейс командной строки NPM (Node Package Manager). Вы установили интерфейс командной строки NPM с Node.js.
Для начала работы установите на свой компьютер node.js не ниже 8 версии.
Далее установите глобально в системе @angular/cli :
@angular/cli - это интерфейс командной строки для работы с Angular, его использование значительно облегчает процесс разработки. Например, одной командой можно сгенерировать полностью сконфигурированное работающее приложение или создать новую сущность (модуль, сервис, компонент и т. д.) в существующем приложении. Более подробно здесь.
Конечно, можно сделать все самостоятельно, но это гораздо сложнее и ни к чему, когда имеется готовый инструмент. Поэтому здесь и далее будет использоваться интерфейс командной строки, на этом этапе установка Angular может считаться завершенной.
Для создания нового проекта просто нужно выполнить:
Запуск команды ng new создает базовое приложение в папке my-app .
- e2e - директория с интеграционными тестами;
- node_modules - установленные npm-модули;
- src - исходные файлы;
- angular.json - описание конфигурации;
- package.json - метаинформация и список необходимых npm-модулей;
- README.md - описание ПО;
- tsconfig.json - общая конфигурация typescript;
- tslint.json - настройка tslint.
- app - модули, компоненты, сервисы, директивы и т. д.;
- assets - статический контент (изображения, аудио);
- environments - конфигурации для каждой среды запуска;
- favicon.ico - иконка, отображаемая в верхней части вкладки браузера;
- index.html ;
- karma.conf.js - конфигурация protractor (для e2e-тестов);
- main.ts - необходим для запуска в режиме разработки, использует JIT-компиляцию;
- polyfills.ts - список модулей, подключаемых для поддержки кроссбраузерности;
- styles.css - описание действующих глобально стилей;
- test.ts - отвечает за поиск и загрузку тестов при их запуске;
- tsconfig.app.json - настройка typescript;
- tsconfig.spec.json - настройка typescript при запуске unit-тестов.
angular.json¶
Следующий шаг после установки Angular и изучения структуры "скелета" приложения - настройка. angular.json - главный конфигурационный файл так называемого Angular Workspace (директория my-app), сгенерированного с использованием @angular/cli и объединяющего в себе множество проектов (само приложение и созданные библиотеки для него).
- version - версия Angular Workspace;
- newProjectRoot - указывает, где будут располагаться внутренние приложения и библиотеки, по умолчанию projects;
- projects - описание конфигураций для каждого из элементов Angular Workspace. По умолчанию вместе с основным генерируется проект с интеграционными тестами. Опции:
- root - определяет директорию с файлами, включая конфигурационные, всего проекта;
- sourceRoot - определяет директорию с исходными файлами;
- projectType - тип проекта, может быть только application или library ;
- prefix - префикс, который будет использоваться при именовании компонентов и директив;
- schematics - позволяет задавать отличную от по умолчанию конфигурацию сущностей Angular, например, можно для всех создаваемых компонентов переопределить работу механизма Change Detection;
- architect - используется для настройки запуска или сборки.
- defaultProject - имя проекта, который будет использоваться при использовании команд Angular CLI (по умолчанию основной).
Рассмотрим подробно в angular.json параметр build свойства architect . Здесь нас интересуют options и configurations .
В options указываются следующие опции:
- outputPath - путь, где будет находиться "собранный" проект (подробно о сборке здесь);
- index - путь к index.html ;
- main - путь к main.ts ;
- polyfills - путь к polyfills.ts ;
- tsConfig - путь к tsconfig.app.json ;
- assets - массив с указанием путей к статическому контенту, могут быть папки или отдельные файлы;
- styles - массив с указанием путей к стилям, причем стили распространяются на все приложение;
- scripts - массив с указанием путей к javascript-файлам, обычно здесь подключаются сторонние библиотеки, не являющиеся модулями Angular, например, jQuery.
Всегда подключайте сторонние скрипты и стили не в index.html , а в angular.json .
В configurations указываются настройки, связанные со средой окружения (environment, далее СО) работы приложения.
Каждое свойство объекта configurations - название СО с объектом настроек среды в качестве значения.
СО указывается при запуске (сборке) в качестве параметра --configuration (краткая запись -c ).
В объекте настроек СО множество параметров, назначение большинства которых понятно из их названия. Остановимся на fileReplacements .
В директории environments по умолчанию находятся два файла: environment.ts и environment.prod.ts . В них указываются параметры, зависящие от СО, например, адрес сервера, с которого будут запрашиваться данные. По умолчанию используется environment.ts .
Объект, используемый в качестве значения fileReplacements , позволяет переопределить источник для указанной СО.
Можете открыть angular.json и найти соответствующий код.
Директория app¶
Теперь разберем подробно содержимое src/app .
Минимально каждое приложение должно состоять из одного корневого модуля, содержащего обособленные функциональные части - компоненты. Также корневой модуль может обращаться к компонентам других модулей.
Архитектура детально описана в следующей главе.
Объявление корневого модуля находится в src/app/app.module.ts .
Здесь импортируются все модули и компоненты приложения.
Декоратор @NgModule() создает корневой модуль, которому передается объект конфигурации со свойствами:
- imports - используемые второстепенные модули Angular;
- declarations - все компоненты приложения;
- bootstrap - основной компонент, отвечающий за загрузку.
Название может быть любым, но общепринято использовать AppModule .
Основной компонент приложения - AppComponent .
За объявление компонента отвечает декоратор @Component() из @angular/core . Принимаемый объект:
- selector - название компонента;
- template ( templateUrl ) - HTML-разметка в виде строки (путь к HTML-файлу);
- styles - массив путей к CSS-файлам, содержащим стили для создаваемого компонента.
Это не все свойства декоратора @Component() , полное описание здесь.
Хорошей практикой считается вынесение HTML-разметки в отдельные файлы.
Чтобы убедиться в работоспособности происходящего, из папки my-app необходимо выполнить:
Читайте также: