찾다

집 >웹 프론트엔드 >JS 튜토리얼 >18가지 일반적인 각도 인터뷰 질문(답변 분석 포함)

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

青灯夜游
青灯夜游앞으로
2022-06-02 10:50:079421검색

이 글은 기본 지식을 정리하고 각도 지식 보유량을 높이는 데 도움이 되는 18가지 일반적인 angular면접 질문(답변 분석 포함)을 요약하고 공유합니다. 꼭 들러보세요!

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

1. Angular의 데이터 바인딩에는 어떤 메커니즘이 사용됩니까? 원리를 자세히 설명하세요

답변: 더러운 검사 메커니즘.

분석:

양방향 데이터 바인딩은 AngularJS의 핵심 메커니즘 중 하나입니다. 뷰의 데이터가 변경되면 모델에 업데이트됩니다. 모델의 데이터가 변경되면 뷰도 동기적으로 업데이트됩니다. 이를 위해서는 모니터링이 필요합니다. [관련 튜토리얼 추천: "angular Tutorial"] 원칙은 Angular가 스코프 모델에 청취 대기열을 설정하여 데이터 변경을 모니터링하고 뷰를 업데이트하는 것입니다. 뷰에 무언가를 바인딩할 때마다 AngularJS는 $watch 대기열에 $watch를 삽입하여 모니터링하는 모델에 변경 사항이 있는지 감지합니다. 브라우저가 각도 컨텍스트에 의해 처리될 수 있는 이벤트를 수신하면 $digest 루프가 트리거되고 모든 $watches를 순회하며 마지막으로 dom을 업데이트합니다.

2. AngularJS의 양방향 데이터 바인딩은 어떻게 구현되나요?

답변:

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

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

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

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

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

3.AngularJS 프로젝트를 개발할 때 어떤 타사 플러그인을 사용하셨나요?

답변: AngularUi ui-router olazyload 등 자세히 살펴보기 위한 기사를 첨부했습니다. 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. ro o tSc r o p e가 무엇인지, 그리고 rootScrope, rootScrope 및 범위의 차이점을 설명하세요.

답변: 일반인의 관점에서 보면 루트 스크로프 페이지는 모든 루트스크로프 페이지와 모든 루트스크로프 페이지의 모든 범위의 아버지입니다.

분석:

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

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

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

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

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

답변:

Service
  • events, 바인딩된 이벤트 지정
  • $rootScope
  • 컨트롤러를 사용하여 $parent, $$childHead 등을 직접 사용하세요.
  • 데이터 바인딩에 대한 속성을 지정하는 지시문
7. {

{yourModel}} 표현은 어떻게 작동하나요? 답변:

페이지 HTML을 초기화한 후 이러한 표현식을 찾아 표시하므로 {

{}}를 만날 때마다 $watch가 설정됩니다. $interpolation은 컨텍스트 매개변수가 있는 함수를 반환합니다. 함수가 최종적으로 실행되면 해당 범위에 대한 표현식이 $parse됩니다.

8.Angular의 $http

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

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

9.ng-repeat가 배열을 반복할 때 배열에 동일한 값이 있으면 어떤 문제가 발생하며 어떻게 해결합니까?

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

10angularjs는 mvc 또는 mvvm 프레임워크인가요? ：mvvm

분석:

먼저 mvc와 mvvm에 대한 이해를 설명하세요.

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

mvvm의 장점

낮은 결합도: 뷰는 모델과 독립적으로 변경 및 수정될 수 있으며, 동일한 ViewModel은 여러 뷰에서 재사용될 수 있으며, 뷰와 모델의 변경은 서로 독립적으로 이루어질 수 있습니다.

재사용성: 일부 뷰 로직을 ViewModel, 다중 뷰 재사용 가능

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

Angular의 MVVM 패턴은 주로 네 부분으로 나뉩니다.

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

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

Model: 비즈니스 도메인의 객체입니다. 모델은 표시되거나 작동되는 방식을 신경 쓰지 않으므로 모델에는 인터페이스 표시와 관련된 논리가 포함되어 있지 않습니다. 웹 페이지에서 대부분의 모델은 각도의 서비스가 캡슐화되고 전역 구성 개체에서 데이터를 반환합니다. 이러한 유형의 비즈니스 서비스는 여러 컨트롤러 또는 기타 서비스에서 재사용할 수 있는 도메인 서비스입니다.

컨트롤러: 이는 MVVM 패턴의 핵심 요소는 아니지만 ViewModel 객체의 초기화를 담당합니다. 하나 이상의 서비스를 결합하여 비즈니스 도메인 모델을 얻고 이를 ViewModel 객체에 배치하여 로드가 시작될 때 애플리케이션 인터페이스가 사용 가능한 상태에 도달하도록 합니다.

mvc의 인터페이스와 로직은 밀접하게 연관되어 있습니다. mvvm의 인터페이스는 viewmode와 느슨하게 결합되어 있으며, 인터페이스 데이터는 viewmodel에서 가져옵니다. 따라서Angularjs는 $scope, Controller, Angularjs의 mvvm에 있는 지시문 및 서비스 플레이

답변: 첫 번째 질문에 대한 분석이 매우 명확하다면 다시 주의 깊게 읽어보세요

12. Angle 프로젝트의 리소스

답변: 없음

13. 컨트롤러 작성 논리적으로 생각할 때 주의해야 할 점은 무엇인가요?

답변:

1. 코드를 단순화하세요(이것은 모든 개발자가 갖춰야 할 사항입니다).

2. 이때는 확실히 DOM 노드를 작동할 수 없습니다.

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

테스트 중심 개발이란 무엇인가요? 대중화:

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

14. 컨트롤러 간 통신 방법

답변:

1.event

여기에는 두 가지 방법이 있습니다. 하나는 sc o p e 입니다. p e event ; 다른 하나는 매개변수를 얻기 위한 rootScope의 이벤트이고, 다른 하나는 브로드캐스트, 브로드캐스트 및 범위의 이벤트를 수신하여 매개변수를 얻는 rootScope.broad cast입니다.

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

2. Service

전용 이벤트 서비스를 만들 수도 있고, 비즈니스 로직에 따라 분할하여 해당 서비스에 데이터를 저장할 수도 있습니다.

3. $rootScope

이 방법은 약간 지저분할 수 있지만 즉, 데이터가 루트 범위에 저장되므로 각 하위 루트 범위가 각 하위 루트 범위에 있으므로 각 하위 범위를 호출할 수 있지만 수명 주기에 주의해야 합니다

4. sc o p e를 직접 사용하세요. 이 방법에는 더 많은 단점이 있습니다. $$로 시작하는 속성을 사용하는 것은 공식적으로 권장되지 않습니다. 이는 결합을 증가시킬 뿐만 아니라 비동기 문제를 처리해야 하며 범위 순서가 고정되지 않습니다. 권장하지 않음

다른 하나는 로컬 저장소, 전역 변수 또는 최신 브라우저의 postMessage를 통해 매개변수를 전달하는 것입니다. 특별한 경우가 아니면 이 방법을 사용하지 마세요.

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

답변:

다음과 같은 몇 가지 일반적인 매개변수에 대해 이야기해 보겠습니다.

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

template: 두 가지 형식, HTML 텍스트, 두 개의 매개변수 tElemetn 및 tAttrs를 받아들이고 템플릿을 나타내는 문자열을 반환하는 함수입니다. 템플릿 문자열에는 루트 DOM 요소가 있어야 합니다

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

compile(객체 또는 함수): 컴파일 옵션은 객체 또는 함수를 반환할 수 있습니다. 컴파일 기능이 설정되면 명령과 실시간 데이터가 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의 형식에 대해 알고 계시나요

답변:

Angular는 입력 요소의 유형을 확장하여 총 10가지 유형을 제공합니다.

    email

    • radio

    • checkbox

    • hidden

    • button

    • submit

    • reset

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

    • ng-valid 법적 상태 확인

    • ng-invalid 불법 상태 확인

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

    ng-dirty form is dirty 데이터 상태

    • Angular는 양식을 자동으로 확인할 때 모델의 속성을 확인합니다. ng-model이 설정되지 않은 경우 Angular는 myForm.$invalid 값이 true인지 알 수 없습니다.

  • 콘텐츠 확인

  • 필수 콘텐츠 입력 여부를 나타냅니다

  • ng-maxlength 최대 길이

ng-minlength 최소 길이

    예: 포털 https://github.com/ 1850004756 4/ clutter

  • 18. 필터가 무엇인지 얼마나 알고 계시나요? 사용자 정의 필터 구현

  • 답변:

  • date(날짜)

currency(통화)

limitTo(배열 또는 문자열 길이 제한)

    orderBy(정렬)

  • 소문자 (소문자)

  • uppercase (대문자)

  • number(숫자 서식 지정, 천 단위 구분 기호 추가, 소수점 이하 자릿수를 제한하는 매개변수 수신)

  • filter(배열 처리, 다음을 포함하는 요소 필터링) 특정 하위 문자열)

  • json(형식화된 json 객체)

  • filter 사용하는 방법에는 두 가지가 있습니다.

    • 하나는 페이지에 직접 있습니다. 
  • <p>{{now | date : ‘yyyy-MM-dd’}}</p>

    다른 하나는 js에서 사용됩니다. 

    $filter(‘过滤器名称’)(需要过滤的对象, 参数 1, 参数 2,…)
$filter(‘date’)(now, &#39;yyyy-MM-dd hh:mm:ss’);
    • Customize a 중복 제거 배열
  • app.filter("unique", function() {
  return 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;
      }
    }

    return n;
  };
});

    더 많은 프로그래밍 관련 지식을 보려면

    프로그래밍 튜토리얼
    • 을 방문하세요! !

위 내용은 18가지 일반적인 각도 인터뷰 질문(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：메시지 대기열이란 무엇입니까? 노드에서 메시지 큐를 사용하는 방법은 무엇입니까?다음 기사：메시지 대기열이란 무엇입니까? 노드에서 메시지 큐를 사용하는 방법은 무엇입니까?

관련 기사

더보기