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

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

---

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

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

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

어떻게해야합니까?

---

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

angular.element(document.body).injector().get('serviceName')

---

심해 잠수

AngularJS는 의존성 주입 (DI) 을 사용하여 서비스 / 공장을 컴포넌트, 지시문 및 기타 서비스에 주입합니다. 따라서 서비스를 받으려면 AngularJS 의 인젝터 를 먼저 얻는 것이 필요합니다 (인젝터는 모든 종속성을 배선하고 구성 요소에 제공해야합니다).

앱 의 인젝터 를 얻으려면 각도가 처리하는 요소에서 앱을 가져와야합니다. 예를 들어 앱이 호출 한 body 요소에 등록 된 경우injector = angular.element(document.body).injector()

검색에서 injector당신은 당신이 좋아하는 서비스를 얻을 수 있습니다injector.get('ServiceName')

이 답변에 대한 자세한 정보 : 각도에서 인젝터를 검색 할 수 없으며 더 많은 정보
: 레거시 코드에서 AngularJS 호출

---

$scope특정 요소 를 얻는 또 다른 유용한 트릭 . 개발자 도구 의 DOM 검사 도구 로 요소를 선택한 후 다음 행을 실행하십시오 ( $0항상 선택된 요소 임).
angular.element($0).scope()

---

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

ㅏ )

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

---

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

참고 URL : https://stackoverflow.com/questions/15527832/how-can-i-test-an-angularjs-service-from-the-console