1. 종속성 주입
DI (Dependency Injection)는 코드가 의존하는 리소스를 얻는 방법을 다루는 소프트웨어 설계 패턴입니다.
DI에 대한 심층적 인 논의를 보려면 의존성 주입 (http://en.wikipedia.org/wiki/delection_injection), 제어 역전 (http://martinfowler.com/articles/injection.html)을 방문하거나 소프트웨어 설계 패턴에 대한 책을 방문 할 수 있습니다.
1. 간단히 말해서 (간단히 말하기)
객체 또는 함수는 다음 세 가지 방법에서만 의존하는 리소스 만 얻을 수 있습니다.
1) 새 연산자를 통해 종속 리소스를 만들 수 있습니다.
2) 글로벌 변수를 통해 종속 리소스를 찾을 수 있습니다.
3) 종속 리소스는 매개 변수를 통해 전달 될 수 있습니다.
두 가지 방법 1과 2는 종속성을 하드 코드하기 때문에 최선이 아니기 때문에 종속성을 수정하는 것이 불가능하지 않지만 더 복잡해집니다. 이것은 특히 테스트에 문제가 있으며, 일반적으로 독립적으로 테스트 할 때는 모의 종속성을 제공하는 것이 바람직합니다.
세 번째 방법은 구성 요소에서 종속성을 찾는 책임을 제거하기 때문에 비교적 가장 실현 가능합니다. Reliance는 구성 요소에 전달됩니다.
함수 someclass (greeter) {this.greeter = greeter} someclass.prototype.dosomething = function (name) {this.greeter.greet (name);}위의 예에서, SomeClass는 인사말 의존성을 찾는 것에 관심을 가질 필요가 없으며 런타임에만 인사를 전달합니다.
이는 더 적절하지만 SomeClass 구축을 담당하는 코드에 종속성 리소스를 얻는 책임이 있습니다.
종속성 생성에 대한 책임을 관리하기 위해 각 Angular 응용 프로그램에는 인젝터 (http://code.angularjs.org/1.0.2/docs/api/angular.injector)가 있습니다. 인젝터는 종속 리소스를 찾고 생성하는 서비스 로케이터입니다.
요청 종속성을 요청하고 하드 코드의 문제를 해결하지만 인젝터가 전체 응용 프로그램을 실행해야 함을 의미합니다. 전달 인젝터는 데메테르의 법칙을 파괴합니다 (http://baike.baidu.com/view/823220.htm). 이 문제를 해결하기 위해 의존성 검색에 대한 책임을 인젝터로 전달합니다.
나는 위에 너무 많이 말했다. 아래에서 수정 한 예제를보십시오. 내부 및 외부의 주입을 사용하여 원본 텍스트의 두 가지 예를 병합했습니다.
<! doctype html> <html lang = "zh-cn"ng-app = "mainapp"> <head> <head> <meta charset = "utf-8"> <title> 인젝터 </title> </head> <div ng-controller = "myController"> src = "../ Angular-1.0.1.js"type = "text/javaScript> </script> <script type ="text/javaScript "> // 외부 모듈과 동등한 모듈을 만듭니다. // 인젝터 가르치는 방법 "greeter"를 만드는 방법을 가르치십시오. greeter 자체는 $ 창에 의존해야한다는 점에 유의하십시오. OtherModule.Factory ( "greeter", function ($ window) {// 이것은 팩토리 메소드, greet 서비스 반환을 담당하는 {greet : function (text) {$ window.alert (text);}); // 다음은 비 전류 모듈에서 인젝터를 통해 인사말 메소드를 호출 함을 보여줍니다. // 모듈에서 새 인젝터를 만듭니다. //이 단계는 일반적으로 Angular가 시작될 때 자동으로 수행됩니다. // 'ng', 각도를 도입해야합니다. // 순서가 의도적으로 반전되며,이 일의 순서가 중요하지 않다는 것이 일시적으로 확인됩니다. . var injector = Angular.injector ([ 'OtherModule', 'ng']); // Greeter의 종속성을 요청합니다. var g = injector.get ( "greeter"); // 직접 호출 ~ g.greet ( "hi ~ my little dada ~"); // 이것은 현재 기본 앱이며 다른 모드에 의존해야합니다. var mainApp = Angular.Module ( "mainApp", [ "OtherModule"]); // 컨트롤러 정의 함수의 매개 변수에주의를 기울이고 $ SCOPE와 GERETER를 직접 주입하십시오. // greeter 서비스는 mainApp.controller ( "myController", function myController ($ scope, greeter) {$ scope.sayHello = function () {greeter.greet ( "Hello Kitty ~~");}); // ng-controller는이 일을 무대 뒤에서 조용히 수행했습니다. //injector.instantiate(myController); </script> </body> </html>NG-Controller가 있기 때문에 MyController가 초기화되므로 MyController의 모든 종속성을 충족시켜 MyController가 인젝터의 존재를 알 필요가 없습니다. 이것이 최선의 결과입니다. 응용 프로그램 코드는 단순히 인젝터를 처리하지 않고 필요한 종속성을 요청합니다. 이 설정은 Demeter의 법칙을 위반하지 않습니다.
2. 종속성 주석 (종속성 주석, 종속성 방법 설명)
인젝터는 어떤 서비스를 주입 해야하는지 어떻게 알 수 있습니까?
응용 프로그램 개발자는 인젝터가 사용하는 주석 정보를 의존성 솔루션으로 제공해야합니다. 각도의 모든 기존 API 기능은 인젝터를 참조하며, 이는 각 문서에 언급 된 API의 경우입니다. 다음은 서비스 이름 정보로 코드에 주석을 달 수있는 세 가지 동등한 방법입니다.
1. 의존성 추론
이것은 종속 자원을 얻는 가장 쉬운 방법이지만 함수의 매개 변수 이름이 종속 리소스의 이름과 일치한다고 가정해야합니다.
mycontroller ($ scope, greeter) {...}함수의 인젝터는 함수 정의를 확인하고 함수 이름을 추출하여 주입 해야하는 서비스 이름 (functionname.tostring (), regexp)를 추측 할 수 있습니다. 위의 예에서 $ SCOPE 및 GEREETER는 함수에 주입 해야하는 두 가지 서비스입니다 (이름도 동일합니다).
이것은 간단하지만 매개 변수 이름이 변경되기 때문에이 방법은 JavaScript 난독 화 압축 후에 작동하지 않습니다. 이 방법은 전처리 (제품 유용성 프로토 타입 시뮬레이션 테스트 방법, http://www.pretotyping.org/, http://tech.qq.com/a/20120217/000320.htm) 및 데모 애플리케이션에만 유용합니다.
2. $ 주석 주석 ($ 주입 주석)
스크립트 컴프레서가 함수의 메소드의 이름을 바꾸고 올바른 서비스를 주입 할 수 있도록 함수는 $ 주입 속성을 통해 종속성에 주석해야합니다. $ 주입 속성은 주입 해야하는 서비스 이름의 배열입니다.
var myController = function (Renamed $ scope, renamedgreeter) {...} // 여기에 종속되는 것이 현재 모듈에 있지 않다면 여전히 인식하지 못합니다. // 먼저 현재 모듈의 해당 모듈에 의존해야합니다. 이전 예와 비슷합니다. 그러나 이것이 올바른 방법인지 모르겠습니다.
myController. $ inject = [ '$ scope', 'greeter'];
$ 주사의 순서가 함수에 의해 선언 된 인수 순서와 일치해야한다는 것이 조심해야합니다.
이 주석 메소드는 함수와의 주석 정보를 지정하기 때문에 컨트롤러 선언에 유용합니다.
3. 인라인 주석 (인라인 댓글)
때로는 직접 댓글을 달 때와 같은 $ 주입 주석 메소드를 사용하는 것이 편리하지 않습니다.
예를 들어:
somemodule.factory ( 'greeter', function ($ window) {...;});임시 변수가 필요하기 때문에 (압축 후 사용할 수 없도록 방지). 코드는 다음과 같이 팽창합니다.
var greetErfactory = function (Renamed $ 창) {...;}; greetErfactory. $ inject = [ '$ wind이 (Code Bloat)로 인해 Angular도 세 번째 주석 스타일을 제공합니다.
somemodule.factory ( 'greeter', [ '$ wind
모든 주석 스타일은 동일하며 주입을 지원하는 각도의 어느 곳에서나 사용할 수 있습니다.
3. 사용자는 어디에서 DI를 할 수 있습니까?
Di는 각도에 있습니다. 일반적으로 컨트롤러 및 공장 방법에 사용됩니다.
1. 컨트롤러의 DI
컨트롤러는 응용 프로그램 동작을 담당하는 클래스입니다. 권장 컨트롤러 선언 방법은 다음과 같습니다.
var myController = function (dep1, dep2) {...} myController. $ inject = [ 'dep1', 'dep2']; myController.Amethod.Amethod = function () {...}2. 공장 방법
공장 방법은 대부분의 각도 물체를 생성하는 일을 담당합니다. 예를 들어, 지침, 서비스, 필터. 공장 방법은 모듈에 등록됩니다. 권장 공장 선언 방법은 다음과 같습니다.
Angualar.Module ( 'myModule', []). config ([ 'depprovider', function (depprovider) {...}]). 공장 ( 'serviceId', [ 'despservice', function (despservice) {...}]). Directive ( 'directivename', [ 'despservice', function (despservice) {...}]). 필터 ( 'filtername', [ 'despservice', function (despservice) {...}]);위는 AngularJS 의존성 주입 정보의 요약입니다. 이 사이트를 지원 해주셔서 감사합니다!