1. Код организации
2. Загрузка файлов JavaScript
3. Код отладки
4. Интеграция сторонних библиотек
5. Ленивая Загрузка
6. Движение вперед с помощью AngularJS
7. Статьи, подобранные вручную:

Если вы создаете большой сайт с AngularJS, у вас есть работа, предназначенная для вас. Большой сайт уже достаточно большой, и AngularJS не совсем облегчает задачу. Из-за большого размера вашего проекта во время разработки может возникнуть ряд проблемных вопросов, которые могут казаться невозможными исправить.

Вот 5 наиболее распространенных проблем AngularJS, с которыми сегодня сталкиваются крупные веб-сайты (а также способы их устранения):

Код организации

При создании крупномасштабного сайта AngularJS вам необходимо поддерживать логичность кода. Это принесет пользу не только вашему веб-сайту; это поможет вам лучше отслеживать и находить важные предметы.

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

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

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

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

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

Загрузка файлов JavaScript

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

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

Библиотека JavaScript, такая как RequireJS может реализовать функциональность динамической загрузки. RequireJS разбивает код JavaScript на отдельные модули, обеспечивая оптимальный способ динамической загрузки файлов JavaScript. Он также использует асинхронную загрузку сценариев, что может еще больше ускорить ваше приложение. И он делает все это прямо из вашего браузера.

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

Код отладки

Это неизбежно: в любом проекте разработки вы столкнетесь с проблемами, которые трудно отладить. Принимая во внимание размер структуры каталогов большого проекта AngularJS, вы можете быть в течение многих поздних ночей, ища проблемных преступников. Если бы только был способ лучше визуализировать ваш код по разделам вместо одного большого куска…

AngularJS Batarang - это полезное расширение Chrome для отладки приложений AngularJS. Batarang упрощает процесс отладки, позволяя вам детализировать и выбирать, какие области вы хотите просмотреть. Оттуда вы можете увидеть конкретные свойства различных элементов области действия и их текущие значения.

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

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

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

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

Интеграция сторонних библиотек

Сторонние библиотеки являются естественной частью создания крупномасштабных приложений AngularJS. Одной из основных проблем интеграции сторонних библиотек с AngularJS являются изменения в DOM или значения, возвращаемые через вызовы AJAX. Angular не увидит и не подтвердит эти изменения, если вы не запустите цикл $ digest вручную. Еще больше усложняет проблему, не все сторонние библиотеки совместимы с AngularJS из коробки.

Ключом к интеграции сторонней библиотеки с AngularJS является использование следующих функций:

• $ Scope.apply ()
• $ Сфера. $ EvalAsync
• $ Q.when ()
• $ таймаут

Эти функции позволяют AngularJS соответствующим образом реагировать на изменения из сторонней библиотеки.

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

Ленивая загрузка жизненно важна для обеспечения оптимального времени загрузки на любом веб-сайте, однако это особенно важно для больших сайтов AngularJS. По мере роста вашей кодовой базы и увеличения числа файлов JavaScript, необходимых для правильной загрузки страницы, отложенная загрузка помогает эффективно загружать сайт, откладывая инициализацию объекта до тех пор, пока он не понадобится. К сожалению, официальная поддержка Lazy Loading для AngularJS отсутствует из коробки.

К счастью, есть несколько проектов с открытым исходным кодом, которые добавляют ленивую загрузку в AngularJS. На наш взгляд, ocLazyLoad - лучшее решение с открытым исходным кодом из-за его простоты. Если другие решения с открытым исходным кодом требуют значительных изменений в структуре вашего приложения или приводят к неопределенному поведению, ocLazyLoad загружает сторонние модули без проблем. Вместе с RequireJS (который мы рекомендовали получить выше) вы можете добиться эффективной загрузки вашего большого сайта.

Кроме того, если Lazy Loading не вариант для вас, минификация может улучшить производительность страницы. Тем не менее, обратите внимание, что процесс минимизации может легко сломать ваш сайт. Вам понадобится внедрение зависимостей, что достигается с помощью строгого-di, который позволяет изменять зависимости.

Движение вперед с помощью AngularJS

AngularJS описывается как «Superheroic JavaScript MVW Framework». Но если учесть общую проблему, возникающую в AngularJS применительно к большому проекту, она может показаться не очень «героической».

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

• Организуйте свой код
• Создайте каталог для ваших архетипов
• Разделить объекты на файлы
• Создать каталог для общего общего кода
• Разделите модули на подмодули
• Загружать файлы JavaScript динамически
• Отладочный код с AngularJS Batarang
• Интеграция сторонних библиотек с нужными функциями
• Используйте ленивую загрузку или минимизацию для оптимизации времени загрузки

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

Статьи, подобранные вручную:

* Адаптированное изображение свинца: Public Domain, pixabay.com через getstencil.com

Похожие

Комментарии