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

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

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

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

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

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

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

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

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

angular.reloadWithDebugInfo();

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

Для получения дополнительной информации см. страницы документации по $compileProvider и angular.reloadWithDebugInfo.

Режим жёсткой инъекции зависимостей

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

Для включения режима жёсткой инъекции зависимостей у вас есть два варианта:

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

или

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

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

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

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

• Анализирует все классы элементов вашего приложения.

• Анализирует все комментарии HTML вашего приложения.

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

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

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

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

Для получения дополнительной информации см. страницы документации по $compileProvider.commentDirectivesEnabled и $compileProvider.cssClassDirectivesEnabled.