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