콘솔에서 AngularJS 서비스를 테스트하려면 어떻게해야합니까?


395

나는 다음과 같은 서비스를 가지고있다 :

angular.module('app').factory('ExampleService', function(){
  this.f1 = function(world){
    return 'Hello '+world;
  }
  return this;
})

JavaScript 콘솔에서 테스트f1() 하고 서비스 기능 을 호출하고 싶습니다 .

어떻게해야합니까?

답변:


713

TLDR : 한 줄 에서 찾고있는 명령 :

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()


70
나는 또한 그것이 작동하도록 이것을해야했다. BTW angular.element('*[ng-app]').injector()는 모든 경우에 작동합니다.
Francesc Rosas

4
angular.element ( 'html')을 실행하는 동안 '선택기가 구현되지 않았습니다'라는 오류가 발생하면 Chrome $ 0 기능을 사용할 수 있습니다. html 요소를 선택하고 콘솔로 이동하여 angular.element ($ 0) .injector ()를 실행하십시오.
Marek

9
documentangular.element(document).injector().get('serviceName')
Tamlyn

1
참고로 크롬에서 document.body를 사용해야했습니다
Kevin

5
참고로 $ location 서비스를 사용하고 싶었지만 결국 scope.apply에 래핑해야했습니다. 나는 이것이 잘 문서화되어 있다는 것을 알고 있지만 내 마음이 미끄러졌습니다. 한 줄에 angular.element (document) .scope (). $ apply (angular.element (document) .injector (). get ( '$ location'). path ( '/ my / angular / url'))
acid_crucifix

25

우선, 수정 된 버전의 서비스입니다.

ㅏ )

var app = angular.module('app',[]);

app.factory('ExampleService',function(){
    return {
        f1 : function(world){
            return 'Hello' + world;
        }
    };
});

이것은 객체를 반환하지만 여기에는 새로운 것이 없습니다.

이제 콘솔에서 이것을 얻는 방법은

b)

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 ()를 반환합니다.


3
내가 할 때 var $inj = angular.injector(['app']);콘솔 Error: Unknown provider: $filterProvider from app은 하나의 응용 프로그램과 Error: Unknown provider: $controllerProvider from app다른 응용 프로그램
에서을

@JustGoscha 앱은 어떻게 구성되어 있습니까? 즉, 라인은 어떻게 생겼습니까? var app = angular.module ( 'app', []); 앱 에서처럼 보입니다.
ganaraj

나는 질문을 완전히 이해하지 못했습니다. 그것은 당신이 말하는 것처럼 보이고 angular.module('app',[]);다른 파일에 서비스, 컨트롤러 등이 있으며 모두 angular.module('app').factory('FeatureRegistry',function(){//code here});예를 들어 정의되어 있습니다.
JustGoscha

@JustGoscha 여기에 제가 테스트 한 것이 있습니다. 크롬 으로 docs.angularjs.org/api 에 갔습니다 . 콘솔을 열었습니다. 내 대답의 섹션 a에 코드를 입력 한 다음 섹션 b에 코드를 입력했습니다. Hello World가 표시됩니다. 시도 할 수 있습니까?
ganaraj

14

@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 빌드에서 디버그 코드를 제거하십시오.


4

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');

여기에 이미지 설명을 입력하십시오

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.