Следующие шаги: инструменты и методы¶
28.02.2022
После того как вы поняли основные строительные блоки Angular, вы можете узнать больше о возможностях и инструментах, которые помогут вам разрабатывать и создавать приложения Angular.
- Изучите учебник Tour of Heroes, чтобы понять, как соединить основные строительные блоки вместе для создания хорошо спроектированного приложения.
- Просмотрите Глоссарий, чтобы понять специфические для Angular термины и их использование.
- Используйте документацию для более глубокого изучения ключевых функций в соответствии с вашим этапом разработки и областями интересов.
Архитектура приложения¶
- Раздел Основные концепции, расположенный в оглавлении, содержит несколько тем, объясняющих, как соединить данные приложения в ваших компонентах с вашими шаблонами для отображения страниц, чтобы создать полноценное интерактивное приложение.
- Руководство NgModules содержит подробную информацию о модульной структуре приложения Angular.
- Руководство Routing and navigation содержит подробную информацию о том, как создавать приложения, позволяющие пользователю переходить к различным view в рамках вашего одностраничного приложения.
- Руководство Dependency injection содержит подробную информацию о том, как построить приложение таким образом, чтобы каждый класс компонента мог приобретать сервисы и объекты, необходимые ему для выполнения своей функции.
Отзывчивое программирование¶
Руководство Синтаксис шаблона и связанные с ним темы содержат подробную информацию о том, как отображать данные компонента, когда и где вы хотите, в рамках представления, и как собирать ввод от пользователей, на который вы можете реагировать.
Дополнительные страницы и разделы описывают некоторые основные методы программирования для приложений Angular.
- Lifecycle hooks: Используйте ключевые моменты жизни компонента, от его создания до уничтожения, реализуя интерфейсы хуков жизненного цикла.
- Наблюдаемые объекты и обработка событий: Как использовать наблюдаемые компоненты и сервисы для публикации и подписки на сообщения любого типа, такие как события взаимодействия с пользователем и результаты асинхронных операций.
- Angular elements: Как упаковывать компоненты как настраиваемые элементы, используя Web Components, веб-стандарт для определения новых элементов HTML в независимом от фреймворка виде.
- Forms: Поддержка сложных сценариев ввода данных с проверкой ввода на основе HTML.
- Анимации: Используйте библиотеку анимации Angular для анимации поведения компонентов без глубокого знания техники анимации или CSS.
Взаимодействие клиент-сервер¶
Angular предоставляет фреймворк для одностраничных приложений, где большая часть логики и данных находится на клиенте. Большинству приложений все еще необходимо обращаться к серверу с помощью HttpClient для доступа и сохранения данных.
Для некоторых платформ и приложений вы также можете использовать модель PWA (Progressive Web App) для улучшения пользовательского опыта.
- HTTP: Общение с сервером для получения данных, сохранения данных и вызова действий на стороне сервера с помощью HTTP-клиента.
- Рендеринг на стороне сервера: Angular Universal генерирует статические страницы приложения на сервере с помощью рендеринга на стороне сервера (SSR). Это позволяет запустить ваше приложение Angular на сервере, чтобы улучшить производительность и быстро показать первую страницу на мобильных и маломощных устройствах, а также облегчить работу веб-краулеров.
- Service workers and PWA: Используйте рабочий сервис, чтобы уменьшить зависимость от сети и значительно улучшить пользовательский опыт.
- Web workers: Узнайте, как выполнять ресурсоемкие вычисления в фоновом потоке.
Поддержка цикла разработки¶
- Справочник команд CLI: Angular CLI — это инструмент командной строки, который вы используете для создания проектов, генерации кода приложений и библиотек, а также для выполнения различных текущих задач разработки, таких как тестирование, комплектация и развертывание.
- Компиляция: Angular обеспечивает компиляцию точно в срок (JIT) для среды разработки и опережающую компиляцию (AOT) для производственной среды.
- Платформа для тестирования: Выполняйте модульные тесты частей вашего приложения, когда они взаимодействуют с фреймворком Angular.
- Развертывание: Изучите методы развертывания вашего приложения Angular на удаленном сервере.
- Рекомендации по безопасности: Узнайте о встроенных средствах защиты Angular от распространенных уязвимостей веб-приложений и атак, таких как межсайтовые скриптовые атаки.
- Интернационализация: Сделайте ваше приложение доступным на нескольких языках с помощью инструментов интернационализации (i18n) Angular.
- Accessibility: Сделайте ваше приложение доступным для всех пользователей.
Структура файлов, конфигурация и зависимости¶
- Рабочее пространство и структура файлов: Поймите структуру рабочего пространства Angular и папок проекта.
- Сборка и обслуживание: Научитесь определять различные конфигурации сборки и прокси-сервера для вашего проекта, такие как development, staging и production.
- npm-пакеты: Angular Framework, Angular CLI и компоненты, используемые в приложениях Angular, упакованы как пакеты npm и распространяются с помощью реестра npm. Angular CLI создает файл по умолчанию
package.json, который определяет начальный набор пакетов, которые хорошо работают вместе и совместно поддерживают многие общие сценарии приложений. - TypeScript configuration: TypeScript является основным языком для разработки приложений Angular.
- Поддержка браузеров: Обеспечьте совместимость ваших приложений с широким спектром браузеров.
Расширение Angular¶
- Библиотеки Angular: Узнайте об использовании и создании повторно используемых библиотек.
- Schematics: Узнайте о настройке и расширении возможностей генерации CLI.
- CLI builders: Узнайте о настройке и расширении возможностей CLI по применению инструментов для выполнения сложных задач, таких как создание и тестирование приложений.