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

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

다음과 같은 서비스가 있습니다.

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

자바스크립트 콘솔에서 테스트하여 함수를 호출하고 싶습니다.f1()서비스를 제공합니다.

내가 어떻게 그럴 수 있을까?

TLDR: 찾고 있는 명령어는 한 줄에 다음과 같습니다.

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

---

딥 다이브

AngularJS는 의존성 주입(DI)을 사용하여 컴포넌트, 지침 및 기타 서비스에 서비스/팩토리를 주입합니다.그래서 당신이 서비스를 받기 위해 해야 할 일은 Angular 주사기를 가져와서JS는 먼저 (인젝터는 모든 의존관계를 배선하여 컴포넌트에 제공한다.)

앱의 인젝터를 얻으려면 각도가 있는 핸들링 요소에서 인젝터를 잡아야 합니다.예를 들어, 호출하는 본문 요소에 앱이 등록되어 있는 경우injector = angular.element(document.body).injector()

취득한 것부터injector그러면 원하는 서비스를 받을 수 있습니다.injector.get('ServiceName')

자세한 내용은 이 답변에서 확인하십시오.angular에서 인젝터를 검색할 수 없습니다.
더 많은 정보: Call Angular레거시 코드의 JS

---

또 다른 유용한 트릭은$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");

c )

아까 거기서 했던 일 중 하나는 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;
            };
    });

그러면 주입 시 새로운 Example Service()가 반환됩니다.

@JustGoscha의 답변은 딱 맞지만, 접속하고 싶을 때 입력하는 것이 많기 때문에, 이것을 앱.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생산 코드에 기재되지 않도록 하기 위해서입니다.이 방법을 사용하여 PRUDUP 빌드에서 디버깅코드를 삭제합니다.

Angularjs Dependency Injection 프레임워크는 앱 모듈의 종속성을 컨트롤러에 주입하는 역할을 합니다.이는 인젝터를 통해 가능합니다.

먼저 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