Angularjs_AngularJS의 종속성 주입에 대한 자세한 설명-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:11:11

원래의

1353명이 탐색했습니다.

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

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

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

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 의존성 주입을 배우는 모든 분들께 도움이 되기를 바랍니다.