Есть несколько лучших практик, которым я следовал в своем проекте, и я хотел бы поделиться с вами.

1. Ленивая загрузка

Если объем вашего проекта велик, используйте подход ленивой загрузки Angular. Ленивая загрузка помогает повысить производительность и ускорить загрузку в браузере. Когда ваше приложение запускается, оно асинхронно загружает все необходимые файлы с сервера и отображает весь контент в пользовательском интерфейсе. Более подробную информацию вы получите в документе angular https://angular.io/guide/lazy-loading-ngmodules.

2. Угловая безопасность

В повседневной жизни безопасность жизни является главной заботой веб-приложений. В Angular появилась функция, которая действительно помогает защитить ваше приложение от злоумышленников.

  • Избегайте межсайтового скриптинга подробнее
  • Сенсибилизация подробнее
  • Реализовать аутентификацию и авторизацию
  • Использовать автономный компилятор (AOT Compilation) подробнее
  • Избегайте сторонних библиотек
  • Избегайте перенаправления из одного приложения в другое
  • Надежные безопасные значения

Чтобы пометить значение как доверенное, введите DomSanitizer и вызовите один из следующих методов:

  • bypassSecurityTrustHtml
  • bypassSecurityTrustScript
  • bypassSecurityTrustStyle
  • bypassSecurityTrustUrl
  • bypassSecurityTrustResourceUrl

Помните, что безопасность значения зависит от контекста, поэтому выберите правильный контекст для предполагаемого использования значения. Представьте, что следующему шаблону нужно привязать URL к javascript:alert(...) вызову подробнее.

3. Составные структуры

Убедитесь, что вы создали правильный компонент для своей страницы. Мэнли, мы создаем компонент для выполнения конкретной задачи. Сделайте небольшой компонент, чтобы его можно было повторно использовать в приложении. например Если вы разрабатываете приложение для портала электронной коммерции, вы можете создать несколько небольших компонентов для диаграммы, списка продуктов, раздела одного продукта, раздела вкладок, спецификации, раздела сведений о продукте, цены, скидки, категории продукта и т. д.

Создание нескольких компонентов помогает понять поток приложения и может быть повторно использовано в нескольких местах, например. Если вы создали компонент для контактной информации сотрудника, его можно использовать для любого другого типа, например клиента, менеджера, продавца и т. д.

4. Следуйте соглашениям об именах и правильным комментариям

С первого дня следуйте стандартам кодирования, правильным комментариям и использованию объектно-ориентированной концепции. Используя новейшие технологии, попытайтесь создать повторно используемый код, общие методы, правильную инъекцию зависимостей и бизнес-логику в сервисе.

Когда новый разработчик начинает изучать код, он должен заполнить его так, как будто этот код мне известен. Это поможет сэкономить его время, чтобы начать продуктивную разработку с первого дня.

Создайте документ с набором правил или контрольный список с примерами, чтобы следовать рекомендациям по кодированию. Проверьте свой код с помощью контрольного списка перед отправкой в ​​систему управления версиями.

5. Используйте концепции ООП

Используйте объектно-ориентированную концепцию в своем приложении, которая вам очень поможет. Теперь Angular использует машинописный текст, который представляет собой чистый объектно-ориентированный язык программирования, разработанный Microsoft в 2012 году. Код машинописного текста можно легко преобразовать в javascript и наоборот.

Мы можем создать класс, службы, модель, конструктор, наследование, интерфейс, абстракцию, объект в машинописном тексте. для получения более подробной информации прочитайте подробности угловых документов.

6. Производительность

При разработке приложения angular производительность приложения является очень важным фактором. Если объем вашего приложения больше, используйте ленивую загрузку в приложении.

  1. Предварительная компиляция (AOT)

Компилятор Angular Ahead-of-Time (AOT) преобразует ваш код Angular HTML и TypeScript в эффективный код JavaScript на этапе сборки, прежде чем браузер загрузит и запустит этот код. В этой компиляции angular не ищет компиляцию кода при рендеринге в браузере. Он загружает скомпилированный минимизированный код javascript в браузере. Он загружает приложение быстрее, чем компиляция Just in time. Если приложение стало большим, эта опция не работает, так как JIT и AOT загружаются в браузере одинаковое время.

Компиляция AOT безопаснее, чем компиляция Just in time, поскольку это автономный процесс компиляции, используемый в процессе развертывания производственной среды.

2. Стратегия обнаружения изменений

По умолчанию Angular использует стратегию обнаружения изменений ChangeDetectionStrategy.Default.

Стратегия по умолчанию ничего не предполагает о приложении, поэтому каждый раз, когда что-то меняется в нашем приложении, в результате различных пользовательских событий, таймеров, XHR, промисов и т. д., на всех компонентах будет запускаться обнаружение изменений.

Это означает, что все, от события click до данных, полученных от вызова ajax, вызывает запуск обнаружения изменений.

3. Используйте ленивую загрузку

4. Не вычисляйте значение в шаблоне

Если в вашем HTML-коде есть функции, и он вызывает обнаружение изменений, производительность приложения может снизиться, если выполнение функции занимает много времени.

Чтобы избежать этого, попробуйте запускать код по клику или используйте pipe. При необходимости создайте пользовательский канал.

Если у вас есть какие-либо вопросы, пишите здесь.