Angularjs minimalizuje najlepsze praktyki

103

Czytam http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html i okazało się, że wtrysk zależności angularjs ma problemy jeśli zminimalizujesz swój javascript więc ja Zastanawiam się, czy zamiast

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

powinieneś użyć

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

w sumie myślałem, że drugi fragment dotyczy starej wersji angularjs, ale ...

Czy powinienem zawsze używać sposobu wstrzyknięcia (drugiego)?

javascript angularjs dependency-injection Whisher
źródło

Odpowiedzi:

103

Tak , zawsze! W ten sposób, nawet jeśli Twój minifer konwertuje $ scope na zmienną a i $ http na zmienną b, ich tożsamość jest nadal zachowywana w łańcuchach.

Zobacz tę stronę dokumentacji AngularJS, przewiń w dół do A Note on Minification .

AKTUALIZACJA

Alternatywnie możesz użyć pakietu ng-annotate npm w procesie kompilacji, aby uniknąć tej gadatliwości.

Selvam Palanimalai
źródło
To i kilka innych kwestii są bardzo dobrze wyjaśnione na egghead.io. JFYI
Wottensprels
@Sprottenwels: Tak! Wiele przydatnych zasobów.
Selvam Palanimalai
8
Zamiast używać tej bardziej szczegółowej składni, możesz użyć narzędzia ngmin i narzędzia do budowania (takiego jak Grunt) przed uruchomieniem minifikacji. W ten sposób możesz poprawnie minifikować, ale także użyć dowolnej składni iniekcji zależności.
jkjustjoshing
4
Notatka na temat minifikacji została przeniesiona tutaj docs.angularjs.org/tutorial/step_07
Razvan.432
Zobacz także Podręcznik programisty AngularJS - niejawna adnotacja .
georgeawg
36

Bezpieczniej jest korzystać z drugiego wariantu, ale można również bezpiecznie używać pierwszego wariantu z ngmin .

AKTUALIZACJA:
Teraz ng-annotate staje się nowym domyślnym narzędziem do rozwiązania tego problemu.

OZ_
źródło
7

Tak, musisz użyć jawnego iniekcji zależności (drugi wariant). Ale od Angular 1.3.1 można wyłączyć niejawne wstrzykiwanie zależności, jest to naprawdę pomocne w rozwiązywaniu potencjalnych problemów ze zmianą nazwy na raz (przed minifikacją).

Wyłączanie niejawnego DI przy użyciu strictDiwłaściwości config:

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

Wyłączanie niejawnego DI, przy użyciu ng-strict-didyrektywy:

<html ng-app="myApp" ng-strict-di>
dizel3d
źródło
7

Po prostu zaznacz, że jeśli używasz

Szlachetka

nie ma potrzeby lubić

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

ponieważ chrząknięcie podczas minify bierze pod uwagę sposób zarządzania DI.

Whisher
źródło
0

Możesz użyć, $injectjak wspomniano tutaj :

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}
brak identyfikatora
źródło
0

Użyj iniekcji ścisłej zależności, aby zdiagnozować problemy

W przypadku niejawnej adnotacji kod ulegnie awarii po zminimalizowaniu.

Z Dokumentów:

Niejawna adnotacja

Uwaga: jeśli planujesz zminimalizować swój kod, nazwy Twoich usług zostaną zmienione i zepsują aplikację.

Możesz dodać ng-strict-didyrektywę do tego samego elementu, co ng-appw przypadku wybrania ścisłego trybu DI.

<body ng-app="myApp" ng-strict-di>

Tryb ścisły zgłasza błąd za każdym razem, gdy usługa próbuje użyć niejawnych adnotacji.

Może to być przydatne do określenia problemów.

Więcej informacji znajdziesz w

georgeawg
źródło