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

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

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

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

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

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

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

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

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

angular.reloadWithDebugInfo();

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

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

Режим строгого DI

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

Чтобы включить режим строгого DI, у вас есть два варианта:

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

или

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

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