Angularjs_AngularJS의 종속성 주입에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 15:11:11
원래의
1345명이 탐색했습니다.

객체가 종속성을 제어하는 ​​방법에는 일반적으로 세 가지가 있습니다.

  • 내부적으로 종속성을 생성합니다.
  • 전역 변수를 통해 참조됨
  • 필요한 경우 매개변수 전달

의존성 주입은 세 번째 방법을 통해 구현됩니다. 예:

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};
로그인 후 복사

SomeClass는 런타임에 내부 인사말에 액세스할 수 있지만 인사말에 대한 참조를 얻는 방법에는 신경 쓰지 않습니다.
Greetingr 인스턴스에 대한 참조를 얻기 위해 SomeClass의 생성자는 해당 종속성을 구성하고 전달하는 일을 담당합니다.

위 이유에 따라 AngularJS는 $injetor(인젝터 서비스)를 사용하여 종속성 쿼리 및 인스턴스화를 관리합니다.
실제로 $injetor는 애플리케이션 모듈, 지시문 및 컨트롤러를 포함하여 AngularJS의 모든 구성 요소를 인스턴스화하는 역할을 담당합니다.

예를 들어 다음 코드입니다. 다음은 모듈과 컨트롤러를 선언하는 간단한 애플리케이션입니다.

angular.module('myApp', [])
.factory('greeter', function() {
return {
greet: function(msg) {alert(msg);}
}
})
.controller('MyController',
function($scope, greeter) {
$scope.sayHello = function() {
greeter.greet("Hello!");
};
});
로그인 후 복사

AngularJS가 이 모듈을 인스턴스화할 때 Greetingr를 찾고 자연스럽게 이에 대한 참조를 전달합니다.

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</div>
로그인 후 복사

내부적으로 AngularJS의 처리과정은 다음과 같습니다.

// 使用注入器加载应用
var injector = angular.injector(['ng', 'myApp']);
// 通过注入器加载$controller服务:var $controller = injector.get('$controller');
var scope = injector.get('$rootScope').$new();
// 加载控制器并传入一个作用域,同AngularJS在运行时做的一样
var MyController = $controller('MyController', {$scope: scope})
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 이 글이 Angularjs 의존성 주입을 배우는 모든 분들께 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿