Angularjs dependency injection uglify

Question

Некоторое время я использую этот подход для инъекций зависимостей в моих приложениях angulur.

angular.controller('ctrlName', ['$scope', '$log', function($scope, $log) { 

}]); 

Как вы можете видеть, мы обычно проходят зависимость дважды,

• раз в массиве
• второй раз в качестве аргумента функции

Итак, сегодня я подумал, почему мы это делаем , поэтому я google и прочитал некоторые ответы на StackOverflow об этом, и большинство из них сказали, что они делают это с кодом uglify.

Я знаю, что мы можем сделать это, в приведенном выше примере

angular.controller('ctrlName', ['$scope', '$log', function(scopeAlias, logAlias) { 

}]); 

, но я не получаю, как это uglifies код. Итак, я хотел бы знать,

• Как инъекционные зависимостей в выше способом помогает в uglifying код?
• Почему я хочу угадать свой Угловой код?
• Почему этот подход является предпочтительным в процессе производства?

Answer 1

Существует 3 типа аннотации зависимостей в угловом JS, а тот, который вы используете, известен как Inline Array Notation (предпочтительный способ, как описано в документации на угловойJS). Остальные два: $inject Property Annotation и Implicit Annotation.

Вообще говоря, использование неявной аннотации считается плохой практикой, так как она будет ломаться с любыми инструментами minification/obfuscation из-за того, как они переименовывают свои параметры.

Вы можете обратиться к этому link, чтобы узнать больше об угловой зависимости.

Инлайн Массив Аннотация

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) { 
    // ... 
}]); 

$ впрыснуть собственности Аннотация

var MyController = function($scope, greeter) { 
    // ... 
} 

MyController.$inject = ['$scope', 'greeter']; 
someModule.controller('MyController', MyController); 

неявной Аннотация

someModule.controller('MyController', function($scope, greeter) { 
    // ... 
}); 

Чтобы ответить на ваш первый вопрос, ваш код не будет ломаться после угашения с использованием либо Inline Array Notation, либо $ inject Property Notation.

Для вашего второго и третьего вопроса, Uglification на самом деле означает, чтобы минимизировать ваш код с помощью UglifyJS. Преимущества минимизации заключается в том, что она фактически помогает уменьшить размер файла и, следовательно, сократить время, необходимое для передачи файлов и полосы пропускания. И это фактически помогает в увеличении опыта использования (меньше времени для загрузки веб-страницы) и экономии средств (меньшая пропускная способность означает меньше денег для оплаты).

Answer 2

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

После uglification ваш код может быть:

angular.controller('ctrlName',['$scope','$log',function(a,b){}]); 

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

Это также будет работать, если код никогда не обезображенный:

angular.controller('ctrlName', function($scope, $log) { 

}); 

Answer 3

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

Когда вы укажете его дважды, как вы находитесь выше, вы анотируете компонент. Таким образом, это создает своего рода сопоставление при его минировании, поэтому компонент все еще способен вывести то, что вы ввели.

Смотрите эту ссылку для хорошего объяснения https://docs.angularjs.org/guide/di

Вы хотели бы Минимизировать код, чтобы уменьшить его размер и уменьшить количество времени, которое требуется для передачи по запросу через провод, а также для разбора В браузер. Таким образом, в производстве это очень хорошо.Однако вам не нужно будет делать это в процессе разработки, так как он замедляет работу (для сокращения количества кода может потребоваться время), и это может помешать вашей способности поймать и просмотреть ошибки приложения.

Answer 4

Как впрыскивание зависимостей в вышеописанной моде помогает при угашении кода ?

Поймите, что uglification = minification. Одним из шагов в сокращении кода является замена одного имени переменной на меньшее имя переменной . Указание имен служб для $ injection делает имена аргументов контроллера неактуальными, чтобы минимизация не нарушала код.

Почему я хочу угадать свой Угловой код?

Опять же, uglify = minify. Основная причина в том, что минифицированный код имеет меньшую площадь сети.

Почему этот подход является предпочтительным во время производства?

Опять же, меньшая площадь сети. В сочетании с сжатием, например, GZip, значительная экономия может быть достигнута. Вот хороший комментарий Скотта Гензельмана относительно того, почему compression is a good thing.