AngularJS의 종속 주입 방식

2830 단어 AngularJS
controller,module,service,anddirective를 정의할 때 두 가지 방식이 있습니다.
방식 1:
var myModule = angular.module('myApp', []);

    myModule.controller('myCtrl', ['$scope', 'Project', function($scope, Project) {



    }]);

방식 2:
var myModule = angular.module('myApp', []);

    function myCtrl($scope, Project) {



    }

myModule.controller('myCtrl', myCtrl);

이 두 가지 방식은 본질적으로 아무런 차이가 없지만 방식 2는 작용역의 오염을 초래할 수 있다.
상기 두 가지 정의 방식 중의 의존 주입 방식도 약간 다르다는 것을 깨달을 수 있을 것이다. 다음은 간단하게 요약한다.
1. 단순 주입 방식(Simple injection method)
function myCtrl($scope,Project){};
myModule.controller('myCtrl', myCtrl);
// 
myModule.controller(function($scope,Project){
})

AngularJs는 function의 매개 변수를 스캔하고 매개 변수의 이름(name)을 function의 의존으로 추출합니다.
그래서 이런 방식은 매개 변수 이름의 정확성을 확보해야 하지만 매개 변수의 순서에 대한 요구는 없다.
그러나 이런 주입 방식에는 문제가 하나 있다. 우리가 프로젝트를 정식 환경에 발표할 때 우리의 코드를 압축한다. 이때function의 매개 변수는 a, b가 될 수 있다. 그러면 우리의 코드에 문제가 생길 수 있다. 다음 두 가지 주입 방식은 우리가 이 문제를 해결할 수 있다.
2. 배열 주석법(array-style notation)
myModule.controller('myCtrl', ['$scope', 'Preject', function($scope, Project) {

        

}])

모든 의존하는 매개 변수 값 (문자열) 은 같은 순서로 한 그룹에 저장되며, 수조의 값은 뒤의function 매개 변수와 일일이 대응하여 압축해도 아무런 문제가 없다.
만약 당신이 이런 수조 주석의 정의 방식을 좋아하지 않는다면, 아래에는 또 하나의 방식이 있다.
3. function을 호출하는 $inject 보이기
AngularJs는 주입하려는 의존도를 injector 서버에 알려주는 방식을 제공합니다
function myCtrl(a, b) {

    //$scope, Project, a,b 

}

myCtrl.$inject = ['$scope', 'Project'];

myModule.controller('PhoneDetailCtrl', myCtrl);

위와 같이funciton의 $inject 속성을 설정하면 주입에 의존하는 효과를 얻을 수 있습니다.
마지막으로 제3자 플러그인ng-min이 있습니다. 간단한 방식으로 주입된 코드를 자동으로 수조 주석으로 변환할 수 있습니다. 즉, 간결한 코드를 쓰는 소망을 충족시키고 압축 오류를 피할 수 있습니다.
ng-min 주소:https://github.com/btford/ngmin
흥미가 있는 친구는 연구를 할 수 있다.

좋은 웹페이지 즐겨찾기