Хотите, чтобы ваш сайт на Angular был максимально быстрым и доступным? Вы обратились по адресу!
Что такое Angular?
Angular – это фреймворк для создания пользовательских интерфейсов. Он предоставляет строительные блоки, которые помогут вам быстро настроить поддерживаемое масштабируемое приложение. Angular позволяет разработчикам создавать приложения, которые работают в Интернете, на мобильных устройствах или на настольных компьютерах.
Что входит в эту коллекцию?
В этой подборке рассматриваются пять основных областей оптимизации приложений Angular:
- Повышение производительности приложения, чтобы увеличить конверсию и вовлеченность пользователей.
- Повышение надежности приложения в сетях с низкой скоростью передачи данных за счет предварительного кеширования объектов с помощью сервисного скрипта Angular.
- Как сделать приложение видимым для поисковых систем и роботов социальных сетей с помощью предварительной отрисовки и отрисовки на стороне сервера
- Сделайте приложение устанавливаемым, чтобы оно было похоже на приложение Android или iOS.
В каждой записи из этой серии будут описаны методы, которые вы сможете применить в своих приложениях.
Что не входит в эту коллекцию?
Предполагается, что вы уже знакомы с Angular и TypeScript. Если вы пока не уверены в своих силах, ознакомьтесь с документацией по TypeScript и руководством Начало работы с Angular на сайте angular.io.
Создайте проект
Интерфейс командной строки (CLI) Angular позволяет быстро настроить простое клиентское приложение Angular. В этой записи содержится краткое введение в CLI, а в других записях коллекции показано, как добавить более продвинутые функции, такие как рендеринг на стороне сервера и поддержка развертывания.
Настройка CLI
Для начала установите CLI глобально и убедитесь, что у вас последняя версия, выполнив следующие команды:
npm i -g @angular/cli
ng version
Убедитесь, что последняя команда выводит версию 8.0.3 или более позднюю.
Если вы не хотите устанавливать CLI глобально, вы можете установить его локально и запустить с помощью команды npx:
npm i @angular/cli
npx ng version
Создайте проект
Чтобы создать новый запуск проекта:
ng new my-app
Эта команда создаст исходные файлы и структуру папок для вашего приложения и установит необходимые модули узлов.
После завершения настройки запустите приложение, выполнив следующую команду:
cd my-app
ng serve
Теперь вы можете получить доступ к приложению по адресу http://localhost:4200.
Что дальше?
В остальных статьях этой коллекции вы узнаете, как улучшить производительность и поисковую оптимизацию вашего приложения Angular. Вот что мы рассмотрим:
- Разделение кода на уровне маршрута в Angular
- Бюджеты производительности с Angular CLI
- Стратегии предварительной выборки маршрутов в Angular
- Оптимизация обнаружения изменений в Angular
- Виртуализация больших списков с помощью Angular CDK
- Предварительное кеширование с помощью Angular Service Worker
- Как предварительно отрисовывать маршруты с помощью Angular CLI
- Отрисовка на стороне сервера с помощью Angular Universal
- Как добавить манифест веб-приложения с помощью Angular CLI