홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

18가지 일반적인 각도 인터뷰 질문(답변 분석 포함)

저자：Eve Cole 업데이트 시간：2022-06-09 10:17:01
이 기사는 기본 지식을 정리하고 각도 지식 보유량을 높이는 데 도움이 되는 18가지 일반적인 각도 인터뷰 질문(답변 분석 포함)을 요약하고 공유합니다. 와서 살펴보세요!

1. Angular의 데이터 바인딩에는 어떤 메커니즘이 사용됩니까? 자세한 원칙

답변: 더티 검사 메커니즘.

분석:

양방향 데이터 바인딩은 AngularJS의 핵심 메커니즘 중 하나입니다. 뷰의 데이터가 변경되면 모델에 업데이트됩니다. 모델의 데이터가 변경되면 뷰도 동기적으로 업데이트됩니다. 이를 위해서는 모니터링이 필요합니다. [관련 튜토리얼 추천: "Angular Tutorial"]

원칙은 Angular가 스코프 모델에 청취 큐를 설정하여 데이터 변경을 모니터링하고 뷰를 업데이트하는 것입니다. 뷰에 무언가를 바인딩할 때마다 AngularJS는 $watch 대기열에 $watch를 삽입하여 모니터링하는 모델에 변경 사항이 있는지 감지합니다. 브라우저가 각도 컨텍스트에서 처리할 수 있는 이벤트를 수신하면 $digest 루프가 트리거되고 모든 $watches를 순회하고 마지막으로 dom을 업데이트합니다.

2. AngularJS의 양방향 데이터 바인딩은 어떻게 구현됩니까?

답변:

1. 각 양방향 바인딩 요소에는 감시자가 있습니다.

2. 특정 이벤트가 발생하면 다이제스트 더티 데이터 감지가 호출됩니다.

이러한 이벤트에는 양식 요소의 콘텐츠 변경, Ajax 요청 응답, 버튼 클릭으로 실행되는 기능 등이 포함됩니다.

3. 더티 데이터 감지는 루트 범위 아래의 모든 감시자 요소를 감지합니다.

$digest 기능은 더티 데이터 모니터링입니다

. 3. Anglejs 프로젝트 개발에 어떤 타사 플러그인을 사용하셨나요?

답변: AngularUi ui-router oclazyload 등 자세한 내용을 살펴볼 수 있는 기사가 첨부되어 있습니다 https://segmentfault. com/a /1190000003858219

4. ng-show/ng-hide와 ng-if의 차이점은 무엇인가요?

답변: 우리 모두는 ng-show/ng-hide가 실제로 디스플레이를 통해 숨기고 표시한다는 것을 알고 있습니다. 그리고 ng-if는 실제로 dom 노드의 추가 및 삭제를 제어합니다. 따라서 서로 다른 조건에 따라 dom 노드를 로드하면 ng-if의 성능이 ng-show보다 좋습니다.

5. 루트 Scrope가 무엇인지 설명하고 rootScrope, rootScrope 및 범위의 차이점을 설명하세요.

답변: 일반인의 관점에서 루트 Scrope 페이지는 모든 rootScrope 페이지와 모든 rootScrope 페이지 및 모든 범위의 아버지입니다.

분석:

루트 S 대처와 rootScope, rootScope 및 범위를 생성하는 방법을 살펴보겠습니다.

1단계:Angular는 ng-app을 구문 분석하고 메모리에 $rootScope를 생성합니다.

2단계: Angle은 구문 분석을 계속하고 {{}} 표현식을 찾아 이를 변수로 구문 분석합니다.

3단계: 그런 다음 ng-controller가 있는 div가 구문 분석되어 컨트롤러 기능을 가리킵니다. 이때 컨트롤러 함수는 $scope 객체 인스턴스가 됩니다.

6. 서로 다른 모듈 간의 통신을 구현하는 방법을 세 가지 이상 나열하십시오.

답변:

  • 서비스
  • 이벤트,
  • $rootScope
  • 컨트롤러를 사용하여 바인딩된 이벤트 지정, 데이터 바인딩을 위한 $parent, $$childHead 및 기타
  • 지시문 속성을
    • 직접 사용

7. 표현식 { {yourModel}}은(는) 어떻게 작동하나요?

답변:

$interpolation 서비스에 의존합니다. 페이지 HTML을 초기화한 후 이러한 표현식을 찾아서 표시하므로 {가 발생할 때마다. {}}, $watch가 설정됩니다. 그리고 $interpolation은 컨텍스트 매개변수가 있는 함수를 반환합니다. 함수가 최종적으로 실행되면 $parse 표현식이 해당 범위에 적용됩니다.

8. 각도의 $http

답변: $http는 원격 서버에서 데이터를 읽는 데 사용되는 AngularJS의 핵심 서비스입니다.

내장된 http 서비스를 사용하여 외부 세계와 직접 통신할 수 있습니다. http 서비스는 외부 세계와 직접 통신합니다. http 서비스는 외부 세계와 직접 통신합니다. http 서비스는 단순히 브라우저의 기본 XMLHttpRequest 객체를 캡슐화합니다.

9. ng-repeat가 배열을 반복할 때 배열에 동일한 값이 있으면 어떻게 되며 어떻게 해결하나요?

답변: 문제를 해결하려면 중계기의 중복이 허용되지 않는다는 메시지가 표시됩니다. 물론 배열의 각 항목을 고유하게 식별할 수 있는 한 일반적인 값으로 추적할 수도 있습니다(dom과 데이터 사이의 연결 설정).

10.Angularjs mvc 또는 mvvm 프레임워크

답변: mvvm

분석:

먼저 정교합니다. mvc와 mvvm에 대한 이해:

우선 왜 MVC가 필요한가? 코드의 크기가 커질수록 책임을 나누는 것이 일반적인 추세이고, 추후 유지 관리의 편의를 위해 한 기능을 수정해도 다른 기능에는 영향을 미치지 않습니다. 그리고 재사용을 위해 많은 논리가 동일하기 때문입니다. MVC는 수단일 뿐이며, 궁극적인 목표는 모듈화와 재사용입니다.

mvvm의 장점은

낮은 결합도입니다. View는 Model과 독립적으로 변경 및 수정될 수 있으며, 동일한 ViewModel을 여러 View에서 재사용할

수

있으며, View와 Model의 변경 사항은 서로 독립적으로 이루어질 수 있습니다.

ViewModel에 배치하면 여러 View를 재사용할 수 있고

독립적인 개발이 가능합니다. 개발자는 비즈니스 로직 및 데이터 개발에 집중할 수 있습니다(ViewModemvvmdi). 디자이너는 UI(View) 디자인에 집중할 수 있습니다.

테스트 가능성: 명확한 View 계층화를 통해 가능합니다. 프레젠테이션 레이어의 비즈니스 로직을 더 쉽고 간단하게 테스트할 수 있습니다.

각도에서 MVVM 패턴은 주로 네 부분으로 나뉩니다.

보기: 인터페이스의 표시 및 렌더링에 중점을 둡니다.

여러 가지 선언적 지시문 보기가 포함되어 있습니다

.

템플릿

: View와 Model 사이의 상호 작용과 협업을 담당하며 View에 표시된 데이터를 제공하고 View의 Command 이벤트가 Model을 작동하는 방법을 제공합니다. $scope 객체는 ViewModel의 역할을 합니다.

이는 애플리케이션의 비즈니스 로직과 관련된 데이터의 캡슐화 운반자입니다. 모델은 그것이 어떻게 표시될지 신경쓰지 않습니다. 따라서 모델에는 인터페이스 표시 관련 정보가 포함되지 않습니다. 웹 페이지에서 대부분의 모델은 Ajax 서버의 데이터를 반환하거나 전역 구성 개체이며 각도의 서비스는 비즈니스 논리를 캡슐화하고 처리하는 장소입니다. 이러한 비즈니스 서비스는 여러 Controller 또는 다른 서비스에서 재사용할 수 있는 도메인 서비스입니다.

Controller: MVVM 패턴의 핵심 요소는 아니지만 ViewModel 객체의 초기화를 담당합니다. . 하나 이상의 서비스를 결합하여 비즈니스 도메인 Model.ViewModel 객체를 획득하므로

mvc의 인터페이스는 로드 시작 시 사용 가능한 상태에 도달하고 데이터는 직접 읽혀집니다. mvvm의 인터페이스는 viewmode와 느슨하게 결합되어 있으며 인터페이스 데이터는 viewmodel에서 얻습니다. 따라서Angularjs는 mvvm을 선호합니다.

11.Angularjs

의 mvvm에서 어떤 역할을 합니까?

모르신다면 첫 번째 질문에 대한 분석이 매우 명확하므로 다시 주의 깊게 읽어 보십시오.

12. 각도에서는 프로젝트에서 정적 리소스의 합리적인 로딩을 어떻게 제어합니까?

답: 없음

13. 지불해야 할 비용은 얼마입니까? 컨트롤러 로직을 작성할 때 주의할 점이 있나요?

답변:

1. 코드를 단순화하십시오(이것은 모든 개발자가 가지고 있어야 합니다).

2. Dom 노드를 절대로 작동할 수 없습니다. 이때 왜 안되는지 질문하실 수 있습니다.

DOM 작업은 지시문에만 나타날 수 있습니다. 표시되어야 하는 마지막 장소는 서비스 중입니다. Angular는 테스트 중심 개발을 옹호합니다. DOM 작업이 서비스나 컨트롤러에 나타나면 테스트를 통과할 수 없다는 의미입니다. 물론 이것은 단지 하나의 점일 뿐이며 중요한 것은 양방향 데이터 바인딩인 Angular를 사용하면 많은 DOM 작업을 처리하지 않고도 비즈니스 로직 처리에 집중할 수 있다는 이점 중 하나입니다. Angular 코드가 여전히 다양한 DOM 작업으로 가득 차 있다면 개발에 jquery를 직접 사용하는 것은 어떨까요?

테스트 주도 개발이란 무엇입니까? 대중화하려면:

테스트 기반 개발(Test-Driven Development), 정식 영어 이름은 Test-Driven Development, 줄여서 TDD는 기존 소프트웨어 개발 프로세스와는 다른 새로운 개발 방법입니다. 특정 기능에 대한 코드를 작성하기 전에 테스트 코드를 작성하고, 테스트를 통과하는 기능적 코드만 작성하고, 테스트를 통해 전체 개발을 추진해야 합니다. 이를 통해 간결하고 사용 가능한 고품질 코드를 작성하고 개발 프로세스 속도를 높일 수 있습니다.

14.

컨트롤러 간 통신 방법에 대한 답변:

1.

여기에는 이벤트에 대한 두 가지 방법이 있습니다. 하나는scope.scope.scope.emit이고 다른 하나는 루트 S 대처의 이벤트를 수신하여 매개변수를 얻습니다. 매개변수를 얻기 위한 rootScope ; 다른 하나는 매개변수를 얻기 위한 rootScope 이벤트입니다. 이는 브로드캐스트와 범위의 이벤트를 수신하여 매개변수를 얻습니다.

최신 버전의 Angular에서는 이 두 가지 방법 사이에 성능 차이가 없습니다. 주된 이유는 이벤트 전송 방향이 다르기 때문입니다.

2. 서비스는

전용 이벤트 서비스를 생성할 수도 있고, 비즈니스 로직에 따라 나누어 해당 서비스에 데이터를 저장할 수도 있습니다.

3.

$rootScope 메서드는 약간 더러울 수 있지만 더 편리합니다. 데이터는 루트 S에 저장되므로 각 sub-rootScope에 저장되므로 각 sub-rootScope에도 있으므로 각 하위 범위를 호출할 수 있지만 수명 주기에 주의해야 합니다

. 4. 범위를 직접 사용 .scope.scope.$nextSibling 및 유사한 속성

.scope.scope.parent와 유사합니다. 이 방법에는 더 많은 단점이 있습니다. 공식적으로는 $$로 시작하는 속성을 사용하지 않는 것이 좋습니다. 이는 결합을 증가시킬 뿐만 아니라 비동기 문제를 처리해야 하며 범위 순서가 고정되지 않습니다.

최신 브라우저에서는 특별한 상황이 아닌 이상 이 방법을 사용하지 않는 것이 좋습니다

.

15. 사용자 정의 명령어의 여러 매개변수

답변:

다음과 같이 일반적으로 사용되는 몇 가지 매개변수에 대해 이야기하겠습니다.

제한: dom의 명령어 선언 형식 E(요소) A(속성) C(클래스 이름) M(주석)

템플릿: 두 가지 형식, HTML 텍스트 유형, 두 개의 매개변수 tElemetn 및 tAttrs를 허용하고 템플릿을 나타내는 문자열을 반환하는 함수. 템플릿 문자열에는 루트 DOM 요소

templateUrl이 있어야 합니다. 두 가지 형식 중 하나는 외부 HTML 파일의 경로를 나타내는 문자열이고, 매개변수는 tElement 및 tAttrs이며 외부 HTML의 문자를 반환하는 함수입니다. 파일 경로 문자열

컴파일(객체 또는 함수): 컴파일 옵션은 객체 또는 함수를 반환할 수 있습니다. 컴파일 기능이 설정되면 명령과 실시간 데이터가 DOM에 배치되기 전에 DOM 작업을 수행하겠다는 의미입니다. 이 함수에서 노드 추가 및 삭제와 같은 DOM 작업을 수행하는 것이 안전합니다. 본질적으로 링크 옵션을 설정할 때 실제로는 compile() 함수가 링크 함수를 정의할 수 있도록 postLink() 링크 함수를 생성합니다.

그런 다음 포털이 있습니다: http://www.cnblogs.com/mliudong/p/4180680.html

컴파일과 링크의 차이점:

컴파일할 때 컴파일은 DOM을 변환하고 청취자가 있는 장소를 만나면 먼저 이를 저장합니다. 여러 개를 묶어 저장한 뒤, 최종적으로 링크 기능으로 요약해 함께 실행함으로써 성능이 향상된다.

16.Angular와 jquery의 차이점에 대한 대답

:

Angular는 데이터 기반이므로 복잡한 데이터 작업이 포함된 프로젝트에 적합합니다(여기서 수행 방법을 모르는 경우 단일 페이지 애플리케이션에 대해 다시 언급할 수 있습니다). 이점이 다시 여기에 있습니다 http://www.zhihu .com/question/20792064)

jquery는 dom 드라이버를 기반으로 합니다. jquery는 dom 작업이 많은 프로젝트에 적합합니다.

17. 양식 양식에 대해 얼마나 알고 있습니까?

답변:

Angular는 입력

요소

의 유형을 확장했으며 총 10가지 유형을 제공합니다. :

  • 텍스트

  • 번호

  • url

  • 이메일

  • 라디오

  • 체크박스

  • 숨겨진

  • 버튼

  • 제출

  • 재설정

Angular에는 양식에 대한 4가지 내장 CSS 스타일이 있습니다.

  • ng-valid는 합법적인 상태를 확인합니다.

  • ng-invalid는 불법적인 상태를 확인합니다.

  • ng-pristine 기본 양식을 사용하려면 이 값을 설정해야 합니다

  • . ng-dirty 양식이 더티 데이터 상태에 있을

때 Angular는 모델을 확인합니다

.

ng-model이 설정되지 않은 경우 Angular는 myForm.$invalid 값이 true인지 알 수 없습니다.

검증에 필요한 내용은

  • 내용

  • ng-maxlength, 최대 길이

  • ng-minlength, 최소 길이를 나타냅니다.

예: Portal https://github.com/18500047564/clutter

18. 필터란 무엇입니까? 사용자 정의 필터

답변 구현:

  • 날짜(날짜)

  • 통화(통화)

  • LimitTo(배열 또는 문자열의 길이 제한)

  • orderBy(정렬)

  • 소문자(소문자)

  • 대문자(대문자)

  • 숫자(숫자 서식 지정, 천 단위 구분 기호 추가 및 수신 매개변수는 소수점 수를 제한합니다.

  • 필터(배열 처리, 특정 하위 문자열이 포함된 요소 필터링)

  • json(json 개체 형식)

필터를 사용하는 방법에는 두 가지가 있으며,

하나는 페이지에서 직접 사용하는 것입니다.

<p>{{now | date : 'yyyy-MM-dd'}}</p>

다른 하나는 js에서 사용하는 것입니다:

$filter('filter name')(필터링할 객체, 매개변수 1, 매개변수 2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

중복 제거 배열 사용자 정의

app.filter("unique", function() {
  반환 함수(arr) {
    var n = [];
    var obj = {};

    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }

    n을 반환;
  };
});
관련 기사