103

나는 http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html을 읽고 있는데 자바 스크립트를 축소하면 angularjs 종속성 주입에 문제가 있음이 밝혀졌습니다. 대신에 궁금하다

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

당신은 사용해야합니다

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
    })
}]

대체로 두 번째 스 니펫은 이전 버전의 angularjs 용이라고 생각했지만 ....

항상 주입 방법 (두 번째 방법)을 사용해야합니까?

javascript angularjs dependency-injection

— 휘셔
소스

102

예 , 항상! 따라서 미니 퍼가 $ scope를 변수 a로, $ http를 변수 b로 변환하더라도 해당 ID는 여전히 문자열에 유지 됩니다.

AngularJS 문서 의이 페이지 를 참조 하고 A Note on Minification으로 스크롤 하십시오 .

최신 정보

또는 빌드 프로세스에서 ng-annotate npm 패키지를 사용 하여이 자세한 정보를 피할 수 있습니다.

— 셀밤 팔 라니 말라이
소스

이것과 다른 몇 가지 문제는 egghead.io에서 매우 잘 설명됩니다. JFYI

— Wottensprels

@Sprottenwels : 네! 유용한 리소스가 많이 있습니다.

— Selvam Palanimalai 2013 년

8

이보다 자세한 구문을 사용하는 대신 축소를 실행하기 전에 ngmin 및 빌드 도구 (예 : Grunt)를 사용할 수 있습니다. 이렇게하면 적절하게 축소 할 수 있지만 종속성 주입 구문을 사용할 수도 있습니다.

— jkjustjoshing

4

축소에 대한 메모가 여기로 이동되었습니다. docs.angularjs.org/tutorial/step_07

— Razvan.432

AngularJS 개발자 가이드-암시 적 주석을 참조하십시오 .

— georgeawg

36

두 번째 변형을 사용하는 것이 더 안전하지만 ngmin 과 함께 첫 번째 변형을 안전하게 사용할 수도 있습니다 .

업데이트 :
이제 ng-annotate 가이 문제를 해결하는 새로운 기본 도구가됩니다.

— 온스_
소스

7

예, 명시 적 종속성 주입 (두 번째 변형) 을 사용해야 합니다. 그러나 Angular 1.3.1 부터는 암시 적 종속성 주입 을 끌 수 있으므로 이름 바꾸기와 관련된 잠재적 인 문제를 한 번에 해결하는 것이 정말 유용합니다 (최소화 전).

strictDiconfig 속성을 사용하여 암시 적 DI 끄기 :

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

ng-strict-di지시문을 사용하여 암시 적 DI 끄기 :

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

— dizel3d
소스

7

만약 당신이 사용한다면

자작농

좋아할 필요가 없습니다

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
    })
}]

축소하는 동안 grunt는 DI 관리 방법을 고려하기 때문입니다.

— 휘셔
소스

1

OZ_가 말했듯이, ngmin을 사용하여 directive.js service.js와 같은 모든 각도 js 파일을 축소하십시오. 그 후 클로저 컴파일러를 사용하여 최적화 할 수 있습니다.

심판 :

angularjs 스크립트를 축소하는 방법

YO로 구축

— fxp
소스

0

여기에$inject 언급 된대로 사용할 수 있습니다 .

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
    })
}

— 아이디 없음
소스

0

Strict Dependency Injection을 사용하여 문제 진단

Implicit Annotation을 사용 하면 축소 될 때 코드가 중단됩니다.

문서에서 :

암시 적 주석

주의 : 코드를 축소하려는 경우 서비스 이름이 변경되고 앱이 손상됩니다.

엄격한 DI 모드로 옵트 인하 ng-strict-di는 것과 동일한 요소에 지시문을 추가 할 수 있습니다 ng-app.

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

Strict 모드는 서비스가 암시 적 주석을 사용하려고 할 때마다 오류를 발생시킵니다.

이것은 문제를 찾는 데 유용 할 수 있습니다.

자세한 내용은

— Georgeawg
소스

Angularjs는 모범 사례 축소

Strict Dependency Injection을 사용하여 문제 진단

암시 적 주석