AngularJS 응용 프로그램을 작성할 때 Chrome, Firefox 및 IE의 JavaScript 콘솔을 통해 응용 프로그램에 숨겨진 데이터 (데이터) 및 서비스를 얻는 것은 매우 어려운 일입니다. 다음은 JavaScript 콘솔을 사용하여 실행중인 각도 응용 프로그램을 모니터링하고 제어하여 실시간으로 Angular 응용 프로그램을보다 쉽게 테스트, 수정 또는 작성 할 수있는 간단한 팁입니다.
1 : 범위 받기 (범위)
JS 코드 줄을 사용하여 범위 (또는 고립 된 스코프)를 얻을 수 있습니다.
다음과 같이 코드를 복사하십시오.> Angular.element (TargetNode) .Scope ()
-> childscope {$ id : "005", this : childscope, $$ 리스너 : 객체, $$ listenercount : 객체, $ parent : scope…}
또는 고립 된 범위를 얻으십시오 :
다음과 같이 코드를 복사하십시오.> Angular.element (TargetNode) .isolatescope ()
-> scope {$ id : "009", $$ childtail : childscope, $$ childhead : childscope, $$ prevsibling : childscope, $$ nextibling : scope…}
여기서 대상 노드는 HTML 노드 (HTML 노드)를 나타냅니다. Document.querySelector ()를 쉽게 사용하여 얻을 수 있습니다.
2 : 스코프 트리 모니터 (스코프 트리)
응용 프로그램을 더 잘 디버깅하려면 때로는 페이지에서 스코프 (스코프) 구조기를 확인해야합니다. 현재 AngularJS를 사용해야합니다
Baratang과 NG-Inspector는 스코프를 실시간으로 볼 수 있도록 두 개의 Chrome 브라우저 확장입니다. 그리고이 두 확장에는 다른 매우 유용한 기능이 있습니다.
(1) .Angularjs baratang
(2) .ng-inspector
3 : 크롤링 서비스 (서비스)
NGAPP 요소를 정의하는 인젝터 함수를 사용하여 NG-Scope 클래스의 모든 요소를 통해 서비스 (서비스)를 가져 오거나 서비스 (서비스)를 간접적으로 얻을 수 있습니다.
다음과 같이 코드를 복사하십시오.> Angular.element (document.querySelector ( 'html')). injector (). get ( 'myservice')
-> 객체 {undo : function, redo : function, _pushaction : function, newDocument : function, init : function…}
// 또는 약간 더 일반적인
> angular.element (document.queryselector ( '. ng-scope')). injector (). get ( 'myservice')
다음으로 프로그램에 주사 한 후와 마찬가지로 관련 서비스를 사용할 수 있습니다.
4 : 디렉토리에서 컨트롤러를 가져옵니다
특정 (일반적으로 공통) 기능을 컨트롤러로 정의하는 지침 (지침)이 있습니다. 콘솔에서 지정된 지시문이있는 컨트롤러 예제를 얻으려면 Controller () 함수 만 사용하면됩니다.
다음과 같이 코드를 복사하십시오.> Angular.element ( 'my-pages'). controller ()
-> 생성자 {}
마지막은 일반적으로 사용되지 않지만보다 진보 된 기술입니다.
5 : Chrome 콘솔 (콘솔) 기능
Chrome에는 콘솔 (콘솔)에서 웹 애플리케이션을 디버깅하는 데 매우 유용한 바로 가기 명령이 많이 있습니다. 각도 개발에 가장 유용한 명령은 다음과 같습니다.
$ 0- $ 4 : Inispotor Window (모니터)에서 마지막 5 개의 DOM 요소를 얻으십시오. 이 바로 가기 방법은 선택한 요소의 스코프 (스코프)를 잡는 데 도움이 될 수 있습니다 : Angular.element ($ 0) .Scope ()
$ (selector) 및 $$ (선택기) : QuerySelector () 및 QuerySelectorall을 편리하게 대체 할 수 있습니다.
이 팁에 감사드립니다!
요약
이러한 간단한 팁을 사용하면 모든 범위로 데이터를 얻고, 스코프 계층 구조를 모니터링하고, 서비스를 주입 및 제어 지시문을 할 수 있습니다.
다음에, 당신이 약간의 미세 조정, 코드를 확인하거나, 콘솔에서 AngularJS 응용 프로그램을 제어하고 싶을 때, 나는 당신이 나와 같은 팁을 기억하고 더 많이 사용할 수 있기를 바랍니다.
더 많은 AngularJS 구문을 보려면 다음을 따라갈 수 있습니다. AngularJS 참조 설명서 영어 버전, 모든 사람이 Wulin.com을 더 지원하기를 바랍니다.