API를 찾을 수 없습니까?
AngularJS는 기능의 캡슐화를 제공하지만 글로벌 객체 앵글을 통해 이러한 기능에 액세스하려고 할 때 과거에 발생한 라이브러리와는 매우 다르다는 것을 알 수 있습니다.
$ http
예를 들어, jQuery에서는 API가 전역 객체를 통해 노출된다는 것을 알고 있습니다. $. Ajax 호출을 해야하는 경우 $ .ajax ()를 사용하십시오. 이러한 API는 사고의 기대와 매우 일치합니다.
AngularJS는 또한 Ajax 호출을 캡슐화하고 $ http 객체를 제공하는 글로벌 객체 인 Angular를 노출시킵니다. 그러나 오래된 경험을 사용하여 Angular. $ http에 액세스하려고 할 때는 그렇지 않다는 것을 알 수 있습니다!
$ http 문서를주의 깊게 확인한 후에는 단서를 찾을 수 없습니다. 이 $ http는 어디서 구할 수 있습니까?
의존성 주입/di
실제로 AngularJS는 종속성 주입에서 모든 기능성 구성 요소를 구성합니다.
종속성 주입 모드에서 모든 구성 요소는 서로 접근하기 위해 컨테이너를 통과해야하므로 AngularJS에서는 중개자를 사용하여 구성 요소의 인스턴스 개체를 얻어야한다는 사실로 이어집니다.
var injector = angular.injector ([ 'ng']); injector.invoke (function ($ http) {// do sth. with $ http});이 중개자는 의존성 주입 모드의 컨테이너입니다. AngularJS에서는 다음을 호출합니다.
→ _ →의 예에서, 우리는 실제로 함수 인 $ http 객체를 가지고 있음을 알 수 있습니다.
인젝터/인젝터
인젝터는 DI/IOC 컨테이너의 구현 인 AngularJS 프레임 워크 및 응용 프로그램 개발의 핵심입니다.
AngularJS는 기능을 다양한 유형의 구성 요소로 나누고 별도로 구현합니다. 이 구성 요소에는 공급자/공급자가 집단 이름이 있습니다. 다음 그림에는 AngularJS에 일반적으로 사용되는 몇 가지 내장 서비스가 나와 있습니다.
AngularJS 구성 요소는 서로 직접 호출 할 수 없습니다. 한 구성 요소는 인젝터를 통과하여 다른 구성 요소를 호출해야합니다. 이 이점은 구성 요소가 서로 분리되고 물체의 전체 수명주기의 관리가 인젝터에 던져진다는 것입니다.
인젝터는 두 가지 중요한 기능을 구현합니다.
모든 공급자를위한 레시피를 중앙에 저장합니다
레시피는 실제로 : name + 클래스 생성자입니다. AngularJS가 시작되면이 공급자는 레시피를 사용하여 처음으로 인젝터에 등록됩니다. 예를 들어, HTTP 요청 서비스 구성 요소는 $ httpprovider 클래스 내에 캡슐화되며 '$ http'이라는 이름을 통해 인젝터에 등록됩니다.
주문형 기능성 구성 요소의 예를 제공하십시오
사용자 컨트롤러와 같은 다른 구성 요소는 HTTP 함수를 사용해야하는 경우 '$ http'이라는 이름을 사용하여 인젝터를 요청하면 HTTP 서비스 인스턴스를 얻을 수 있습니다.
$ Compile 서비스가 무엇인지 확인하려면 → _ →의 코드를 수정하십시오.
서비스 구성 요소를 등록하십시오
인젝터의 관점에서 구성 요소는 기능 제공자이므로 공급자/공급자라고합니다. AngularJS에서 제공자는 JavaScript 클래스 (생성자) 형태로 캡슐화됩니다.
서비스 이름은 일반적으로 http 호출 서비스 용 '$ http', 루트 스코프 오브젝트의 '$ rootscope', 컴파일 서비스 용 '$ compile'과 같은 문자열로 식별됩니다 ...
공급자 클래스에는 $ get 함수 (클래스 팩토리)가 필요합니다. 이 기능을 호출함으로써 인젝터는 서비스 구성 요소의 인스턴스를 얻을 수 있습니다.
이름과 클래스 함수의 조합 정보를 레시피라고합니다. 인젝터는 중앙 집중식 레시피 라이브러리를 유지하여 요청에 따라 다른 구성 요소를 생성합니다. 이 레시피 라이브러리는 실제로 해시 객체이며 키는 서비스 이름이며 값은 클래스 정의입니다.
→ _ →의 예에서, 우리는 간단한 서비스 클래스를 정의 하고이 서비스 클래스의 인스턴스는 문자열입니다 : "안녕하세요, 세계!". 우리는 'ezhello'를 서비스 이름으로 사용하여 인젝터에 등록하고 인젝터를 통해이 인스턴스를 표시합니다.
인젝터 객체를 얻으십시오
AngularJS의 기능을 사용하려면 먼저 인젝터를 가져와야합니다. 인젝터를 얻는 방법에는 두 가지가 있습니다.
새 인젝터를 만듭니다
Angular.injector ()를 사용하여 새 인젝터를 만들 수 있습니다.
Angular.injector (modules, [strictdi]); 이미 생성 된 인젝터를 가져옵니다
AngularJS 프레임 워크가 시작된 경우 DOM 객체의 인젝터 () 메소드를 사용하여 이미 생성 된 인젝터를 얻을 수 있습니다.
var 요소 = Angular.element (dom_element);
var injector = element.injector ();
인젝터를 통해 API 호출
인젝터에는 API 호출에 대한 두 가지 방법이 있습니다 : invoke () 및 get ().
부르다()
인젝터의 invoke () 메소드를 사용하여 사용자 정의 기능 본문을 직접 호출하고 함수 매개 변수를 통해 종속 서비스 객체를 주입 할 수 있습니다. 이것은 AngularJS 권장 사항 및 컨벤션의 사용입니다.
Angular.injector ([ 'ng']). 호출 (function ($ http) {// $ http}); 얻다()인젝터의 get () 메소드를 사용하여 지정된 이름의 서비스 인스턴스를 얻을 수 있습니다.
var my $ http = angular.injector ([ 'ng']). get ( '$ http'); // sth. 내 $ http
→ _ → 예제 이번에는 get () 메소드를 사용하여 서비스 인스턴스를 직접 얻고 느끼고 있습니다!
주사 방법 및 원리
서비스 객체의 인젝터에 주입 해야하는 두 가지 방법이 있습니다 : 매개 변수 이름 주입 및 종속성 배열 주입.
매개 변수 이름 주입
AngularJS가 invoke () 함수를 실행하면 함수 정의를 문자열에 주입하도록 변환하고 정규 표현식을 통해 매개 변수 테이블을 확인하여 다음에 따라 서비스 객체를 발견하고 주입합니다.
// myfunc은이 함수가 '$ http'service var myfunc = function ($ http) {// do sth에 의존하도록 선언합니다. $ http}; injector.invoke (myfunc); // myfunc의 정의는 매개 변수 이름 확인을 위해 문자열로 변환됩니다.이것에 문제가 있습니다. 즉, JavaScript 코드를 압축 할 때 $ http가 다른 이름으로 변경 될 수 있으므로 주입이 실패합니다.
배열 주입에 의존합니다
AngularJS는 종속성 배열 방법을 사용하여 코드 압축 난독 화로 인한 문제를 해결합니다. 현재 invoke ()가 배열로 전달됩니다. 배열의 마지막 항목은 실제로 실행될 함수이며 다른 항목은 함수에 주입 해야하는 서비스 이름을 나타냅니다. 인젝터는 배열의 순서대로 종속 객체를 함수에 주입합니다.
이 메소드를 사용하면 주입 할 매개 변수 테이블의 이름이 관련이 없습니다.
// myfunc은 '$ http'및 '$ compile'services var var myfunc = [ '$ http', '$ compile', function (p1, p2) {// sth에 의존합니다. p1 ($ http), p2 ($ compile)}]; injector.invoke (myfunc);→ _ →의 인스턴스에는 배열 의존적 방법이 주입됩니다. 이번에는 Ezhello 서비스 인스턴스가 주입됩니다. 매개 변수 이름을 변경하여 결과에 영향을 줄 수 있습니까?
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.