나는 다음과 같은 서비스를 가지고있다 :
angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})
JavaScript 콘솔에서 테스트f1()
하고 서비스 기능 을 호출하고 싶습니다 .
어떻게해야합니까?
나는 다음과 같은 서비스를 가지고있다 :
angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})
JavaScript 콘솔에서 테스트f1()
하고 서비스 기능 을 호출하고 싶습니다 .
어떻게해야합니까?
답변:
angular.element(document.body).injector().get('serviceName')
AngularJS는 DI (Dependency Injection) 를 사용하여 컴포넌트, 지시문 및 기타 서비스에 서비스 / 공장을 주입합니다. 따라서 서비스를 받으려면 AngularJS 의 인젝터 를 먼저 얻는 것이 필요합니다 (인젝터는 모든 종속성을 배선하고 구성 요소에 제공해야합니다).
앱 의 인젝터 를 얻으려면 각도가 처리하는 요소에서 앱을 가져와야합니다. 예를 들어 앱이 호출 한 body 요소에 등록 된 경우injector = angular.element(document.body).injector()
검색에서 injector
당신은 당신이 좋아하는 서비스를 얻을 수 있습니다injector.get('ServiceName')
이 답변에 대한 자세한 정보 : 각도에서 인젝터를 검색 할 수 없으며 더 많은 정보
: 레거시 코드에서 AngularJS 호출
$scope
특정 요소 를 얻는 또 다른 유용한 트릭 . 개발자 도구 의 DOM 검사 도구 로 요소를 선택한 후 다음 행을 실행하십시오 ( $0
항상 선택된 요소 임).
angular.element($0).scope()
document
angular.element(document).injector().get('serviceName')
우선, 수정 된 버전의 서비스입니다.
var app = angular.module('app',[]);
app.factory('ExampleService',function(){
return {
f1 : function(world){
return 'Hello' + world;
}
};
});
이것은 객체를 반환하지만 여기에는 새로운 것이 없습니다.
이제 콘솔에서 이것을 얻는 방법은
var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");
이전에 수행 한 작업 중 하나는 app.factory가 함수 자체 또는 새로운 버전의 함수를 반환한다고 가정하는 것이 었습니다. 그렇지 않습니다. 생성자를 얻으려면해야 할 일
app.factory('ExampleService',function(){
return function(){
this.f1 = function(world){
return 'Hello' + world;
}
};
});
그러면 다음에 '신규'를 수행해야하는 ExampleService 생성자가 반환됩니다.
또는 대안으로
app.service('ExampleService',function(){
this.f1 = function(world){
return 'Hello' + world;
};
});
이것은 주입시 새로운 ExampleService ()를 반환합니다.
var $inj = angular.injector(['app']);
콘솔 Error: Unknown provider: $filterProvider from app
은 하나의 응용 프로그램과 Error: Unknown provider: $controllerProvider from app
다른 응용 프로그램
angular.module('app',[]);
다른 파일에 서비스, 컨트롤러 등이 있으며 모두 angular.module('app').factory('FeatureRegistry',function(){//code here});
예를 들어 정의되어 있습니다.
@JustGoscha의 대답은 제자리에 있지만 액세스를 원할 때 입력해야 할 것이 많으므로 app.js의 맨 아래에 추가했습니다. 그런 다음 입력해야 할 x = getSrv('$http')
것은 http 서비스를 얻는 것입니다.
// @if DEBUG
function getSrv(name, element) {
element = element || '*[ng-app]';
return angular.element(element).injector().get(name);
}
// @endif
전역 범위에 추가하지만 디버그 모드에서만 추가됩니다. 나는 그것을 @if DEBUG
프로덕션 코드에서 끝내지 않도록 안에 넣었습니다 . 이 방법을 사용하여 prouduction 빌드에서 디버그 코드를 제거하십시오.
Angularjs 의존성 주입 프레임 워크는 앱 모듈의 의존성을 컨트롤러에 주입하는 역할을합니다. 이것은 인젝터를 통해 가능합니다.
먼저 ng-app을 식별하고 관련 인젝터를 가져와야합니다. 아래 쿼리는 DOM에서 ng-app를 찾고 인젝터를 검색하는 데 사용됩니다.
angular.element('*[ng-app]').injector()
그러나 크롬에서는 아래와 같이 ng-app을 대상으로 지정할 수 있습니다. 그리고 사용 $0
해킹 및 문제를angular.element($0).injector()
인젝터가 있으면 아래와 같이 의존성 주입 서비스를 받으십시오.
injector = angular.element($0).injector();
injector.get('$mdToast');
angular.element('*[ng-app]').injector()
는 모든 경우에 작동합니다.