Хотите сделать свой сайт на Angular максимально быстрым и доступным? Вы пришли в нужное место!
Что такое Угловой?
Angular — это платформа для создания пользовательских интерфейсов. Он предоставляет стандартные блоки, которые помогут вам быстро настроить поддерживаемое и масштабируемое приложение. Angular дает разработчикам возможность создавать приложения, которые можно использовать в Интернете, на мобильных устройствах или на настольных компьютерах.
Что в этой коллекции?
В этом сборнике основное внимание уделяется пяти основным областям оптимизации приложения Angular:
- Улучшение производительности вашего приложения для увеличения конверсии и вовлеченности пользователей.
- Повышение надежности вашего приложения в плохих сетях за счет предварительного кэширования ресурсов с помощью сервис-воркера Angular.
- Сделайте ваше приложение доступным для поиска поисковыми системами и ботами социальных сетей с помощью предварительного рендеринга и рендеринга на стороне сервера.
- Сделайте ваше приложение доступным для установки , чтобы обеспечить взаимодействие с пользователем, аналогичное приложению iOS/Android.
- Улучшение доступности вашего приложения, чтобы сделать его удобным и понятным для всех пользователей.
В каждом посте сборника будут описаны методы, которые вы можете напрямую применить к своим собственным приложениям.
Чего нет в этой коллекции?
В этой подборке предполагается, что вы уже знакомы с Angular и TypeScript. Если вы еще не уверены в них, ознакомьтесь с документацией TypeScript и руководством «Начало работы с Angular» на angular.io .
Начать проект
Интерфейс командной строки Angular (CLI) позволяет быстро настроить простое клиентское приложение Angular. В этом посте содержится краткое введение в 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 .
Что дальше?
В оставшейся части этой коллекции вы узнаете, как улучшить производительность, доступность и SEO вашего приложения Angular. Вот что рассматривается:
- Разделение кода на уровне маршрута в Angular
- Бюджеты производительности с Angular CLI
- Стратегии предварительной выборки маршрутов в Angular
- Оптимизация обнаружения изменений в Angular
- Виртуализируйте большие списки с помощью Angular CDK
- Предварительное кэширование с помощью Angular Service Worker
- Предварительная визуализация маршрутов с помощью Angular CLI
- Серверный рендеринг с помощью Angular Universal
- Добавьте манифест веб-приложения с помощью Angular CLI
- Аудит доступности с помощью codelyzer