Улучшить эту страницуРазвёртывание приложения AngularJS в рабочей среде

При развёртывании приложения AngularJS в рабочей среде следует учесть несколько моментов.

Отключение отладочных данных

По умолчанию AngularJS добавляет информацию о связывании и областях видимости к узлам DOM и добавляет CSS-классы к элементам, связанным с данными:

• В результате интерполяции ngBind, ngBindHtml или {{...}} к соответствующему элементу присоединяются данные связывания и CSS-класс ng-binding.

• В случае создания новой области видимости компилятором, к соответствующему элементу присоединяются область видимости и CSS-класс ng-scope или ng-isolated-scope. К этим ссылкам на области видимости можно получить доступ через element.scope() и element.isolateScope().

• Комментарии-заполнители для структурных директив содержат информацию о директиве и связывании, которые вызвали этот заполнитель. Например, <!-- ngIf: shouldShow() -->.

Таким инструментом, как Protractor и Batarang необходима эта информация для работы, но в рабочей среде её можно отключить, что существенно повысит производительность:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

Если необходимо отладить приложение с этой информацией, откройте консоль отладки в браузере и вызовите этот метод непосредственно в этой консоли:

angular.reloadWithDebugInfo();

Страница должна перезагрузиться, и отладочная информация должна стать доступной.

Дополнительную информацию см. на страницах документации по $compileProvider и angular.reloadWithDebugInfo.

Режим жёсткого DI

Использование режима strict di в вашем приложении рабочей среды приведет к ошибке, если инжектируемая функция не явно анотирована. Режим strict di предназначен для того, чтобы убедиться, что ваш код будет работать при минимизации. Однако, он также заставит вас убедиться, что ваши инжектируемые функции явно анотированы, что улучшит производительность Angular при инъекции зависимостей в ваши инжектируемые функции, поскольку ему не нужно будет динамически определять зависимости функции. Рекомендуется автоматизировать явную анотацию с помощью инструмента, такого как ng-annotate, когда вы развёртываете приложение в рабочей среде (и включаете режим strict di).

Для включения режима strict di у вас есть два варианта:

<div ng-app="myApp" ng-strict-di>
  <!-- your app here -->
</div>

или

angular.bootstrap(document, ['myApp'], {
  strictDi: true
});

Дополнительную информацию см. в руководстве по DI Руководство по DI.

Отключение директив комментариев и CSS-классов

По умолчанию AngularJS компилирует и выполняет все директивы внутри комментариев и классов элементов. Для выполнения этой задачи компилятор AngularJS должен искать директивы, используя:

• Обработать все классы элементов вашего приложения.

• Обработать все HTML-комментарии вашего приложения.

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

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

Для отключения директив комментариев и CSS-классов используйте $compileProvider:

$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);

Дополнительную информацию см. на страницах документации по $compileProvider.commentDirectivesEnabled и $compileProvider.cssClassDirectivesEnabled.