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

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

1

Jak powiedział OZ_, użyj ngmin do zminimalizowania całego pliku angular js, takiego jak Directive.js service.js. Następnie możesz użyć kompilatora Closure, aby go zoptymalizować.

ref:

Jak zminimalizować skrypty angularjs

Buduj z YO

— fxp
ź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

Angularjs minimalizuje najlepsze praktyki

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

Niejawna adnotacja