AngularJS 인터뷰에서 가장 많이 묻는 29가지 질문과 답변 [초보자 및 경험자용]

게시 됨: 2020-03-13

AngularJS는 현대 기술 분야에서 가장 인기 있는 웹 프레임워크 중 하나입니다. AngularJS는 처음에는 Google 프로젝트였지만 나중에는 오픈 소스 프레임워크가 되었습니다. AngularJS는 웹 애플리케이션, 특히 단일 페이지 애플리케이션을 빌드하고 동적으로 만드는 데 주로 사용되는 클라이언트 측 JavaScript Model-View-Controller 프레임워크입니다.

AngularJS는 전적으로 HTML과 JavaScript를 기반으로 하기 때문에 HTML을 템플릿 언어로 사용할 수 있습니다. 정적 HTML을 동적 HTML로 변경할 뿐만 아니라 기본 제공 속성을 추가하여 HTML의 기능을 확장하는 데 도움이 됩니다. 뿐만 아니라 AngularJS는 JavaScript를 사용하여 사용자 정의 속성을 생성하는 HTML의 기능도 확장합니다. AngularJS의 가장 좋은 점은 데이터 바인딩 및 종속성 주입 기능이 중복 코드를 작성할 필요성을 제거하는 데 도움이 된다는 것입니다.

AngularJS의 인기가 너무 높아져 업계에서 AngularJS 기술에 대한 수요가 급증하고 있습니다. 그러나 AngularJS 기술이 필요한 직업을 구하려면 먼저 AngularJS 인터뷰를 풀어야 합니다. AngularJS 인터뷰에 도움이 되도록 AngularJS 인터뷰 질문과 답변의 포괄적인 목록을 만들었습니다.

여기 간다!

상위 AngularJS 인터뷰 질문 및 답변

1. AngularJS란? AngularJS의 주요 기능은 무엇입니까?

AngularJS는 Google에서 개발한 JavaScript 프레임워크입니다. 동적이고 확장 가능한 웹 응용 프로그램을 만드는 데 사용됩니다. HTML을 템플릿 언어로 사용하는 MVC(Model View Controller) 패턴을 기반으로 합니다. 소개에서 언급했듯이 AngularJS는 일반 JavaScript 및 HTML에서 실행됩니다. 즉, 이를 사용하기 위해 다른 외부 종속성에 의존할 필요가 없습니다. AngularJS는 JavaScript 개체를 HTML UI 요소와 바인딩하는 데 도움이 됩니다.

AngularJS의 핵심 기능은 다음과 같습니다.

  • 주형
  • 범위
  • 제어 장치
  • 서비스
  • 모델
  • 보다
  • 데이터 바인딩
  • 필터

자세히 알아보기: Angular 7.0 – 아바타의 새로운 기능은 무엇입니까?

2. AngularJS에서 범위를 정의합니다.

AngularJS에서 Scope는 애플리케이션 컨트롤러와 뷰 간의 연결 고리 역할을 하는 애플리케이션 모델입니다. 범위는 식을 모니터링하고 이벤트를 전파하도록 설계되었습니다. 일반적으로 범위는 응용 프로그램의 DOM(Document Object Model) 구조를 복제하는 계층 구조로 구성됩니다. 표현식을 관찰하고 이벤트를 전파할 수 있습니다.

3. AngularJS에서 데이터 바인딩을 정의합니다.

AngularJS에서 데이터 바인딩은 모델과 뷰 구성 요소 간의 데이터가 자동으로 동기화되는 프로세스를 나타냅니다. 데이터 바인딩은 보기/템플릿과 구성 요소 간에 데이터를 푸시하거나 가져오는 것에 대한 걱정 없이 대화형 애플리케이션을 정의하는 프로세스를 단순화하는 데 도움이 됩니다. 네 가지 데이터 바인딩 양식이 있습니다.

  • 이벤트 바인딩
  • 속성 바인딩
  • 문자열 보간
  • 양방향 데이터 바인딩

4. 각도 표현식을 정의합니다. Angular 표현식과 JavaScript 표현식의 차이점은 무엇입니까?

각도 표현식은 다음과 같이 바인딩에 배치되는 코드 조각입니다(JavaScript 스타일과 매우 유사).

{{ 각 }}

각도 표현식은 애플리케이션 데이터를 HTML에 바인딩하는 데 도움이 됩니다.

JavaScript 표현식과 Angular 표현식의 핵심 차이점은 다음과 같습니다.

  • JavaScript 표현식은 전역 창에 대해 평가되지만 Angular 표현식은 범위 개체에 대해 평가됩니다.
  • Angular 표현식의 평가는 null 및 undefined를 허용하지만 JavaScript에서 정의되지 않은 속성은 일반적으로 TypeError 또는 ReferenceError를 생성합니다.
  • JavaScript와 달리 Angular 표현식은 루프, 조건 또는 예외의 사용을 허용하지 않습니다.
  • AngularJS는 필터를 지원하지만 JavaScript는 지원하지 않습니다.

5. AngularJS 애플리케이션 개발에 사용되는 공통 IDE의 이름을 지정합니다.

AngularJS에 가장 일반적으로 사용되는 IDE(통합 개발 환경)는 다음과 같습니다.

  • Eclipse – 이것은 Java/JavaScript 개발자가 가장 좋아하는 IDE 중 하나입니다. AngularJS 플러그인을 지원합니다.
  • Visual Studio – 웹 앱을 쉽고 빠르게 개발할 수 있도록 설계된 Microsoft IDE입니다.
  • WebStorm – 이것은 의심할 여지 없이 최신 JavaScript 개발을 위한 가장 강력한 IDE 중 하나입니다. Angular CLI를 사용하여 종속성을 쉽게 통합할 수 있습니다.
  • Aptana – 이것은 Eclipse의 오픈 소스 사용자 정의 버전입니다. 웹 개발에 필요한 최신 도구와 웹 표준이 탑재되어 있습니다.
  • Sublime Text – HTML, CSS 및 JavaScript용으로 적극 권장되는 IDE입니다. 당연히 AngularJS와 호환됩니다.

또한 확인하십시오: AngularJS가 다음 모바일 앱 개발에 적합한 선택입니까?

6. AngularJS의 지시문은 무엇입니까?

AngularJS의 지시문은 접두사가 "ng"인 확장 HTML 속성일 뿐입니다. AngularJS에는 세 가지 핵심 지시문이 있습니다.

  • ng-app – 이 지시문의 목적은 Angular 애플리케이션의 루트 요소로 간주되어야 하는 HTML 요소에 플래그를 지정하는 것입니다. Angular는 사용자 정의 속성에 대해 spine-case를 적용하지만 이를 구현하는 해당 지시문에는 camelCase 필터를 사용합니다.
  • ng-model – 이 지시문은 HTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인딩하는 데 도움이 됩니다. ng-model에서는 view에 반영된 Scope 뿐만 아니라 view의 변경사항도 Scope에 반영됩니다.
  • ng-bind – 이 지시문은 모달 애플리케이션 데이터를 HTML 보기에 바인딩하는 데 사용됩니다.

7. AngularJS 라우트의 목적은 무엇입니까?

AngularJS 경로를 사용하면 Angular 애플리케이션의 다양한 콘텐츠에 대해 서로 다른 URL을 생성할 수 있습니다. 이렇게 하면 특정 콘텐츠에 대한 URL을 북마크할 수 있으며 북마크된 각 URL을 AngularJS에서 경로라고 합니다.

8. AngularJS에서 문자열 보간을 정의합니다.

AngularJS에서 문자열 보간은 구성 요소 데이터를 표시하기 위해 {{ }} 중괄호 안에 템플릿 표현식을 사용하는 고유한 구문을 나타냅니다. 문자열 보간은 종종 "Moustache Syntax"라고 합니다. 이 구문을 사용할 때 먼저 이중 중괄호 안에 JavaScript 표현식(실행해야 함)을 포함해야 하고 상대 출력을 HTML 코드에 포함해야 합니다.

9. AngularJS "다이제스트 주기"를 정의합니다.

다이제스트 주기는 본질적으로 AngularJS에서 데이터 바인딩 프로세스를 나타냅니다. 이 과정에서 범위 모델 값의 이전 버전과 새 버전이 서로 맞물려 비교됩니다. 다이제스트 주기가 자동으로 트리거되지만 "$apply()"를 사용하여 프로세스를 수동으로 시작할 수도 있습니다.

10. 단방향 바인딩과 양방향 바인딩의 차이점은 무엇입니까?

단방향 바인딩은 HTML 템플릿이나 뷰를 자동으로 업데이트하지 않고 뷰에 모델의 데이터를 바인딩하는 데 사용됩니다. 따라서 이 접근 방식에서는 HTML 템플릿을 업데이트하는 사용자 지정 코드를 작성해야 합니다. 그러면 데이터가 모델에서 뷰로 바인딩될 때마다 뷰가 추가로 업데이트됩니다.

이와는 대조적으로 양방향 바인딩은 사용자 정의 코드를 작성할 필요 없이 HTML 템플릿을 자동으로 업데이트하여 모델의 데이터를 뷰에 바인딩하거나 그 반대로 바인딩합니다.

11. 연결 기능을 정의합니다. 연결 함수의 유형 이름을 지정합니다.

링크는 지시문을 범위와 결합하여 라이브 뷰를 생성합니다. 링크 기능은 DOM 리스너 등록 및 DOM 업데이트에 사용됩니다. 이 함수는 템플릿이 복제된 직후에 실행됩니다.

연결 기능에는 두 가지 유형이 있습니다.

  • 사전 연결 기능 – 이 기능은 자식 요소가 연결되기 전에 실행되며 일반적으로 DOM 변환에 안전한 접근 방식이 아닙니다.
  • 사후 연결 기능 – 이 기능은 자식 요소가 연결된 후에 실행됩니다.

12. AngularJS에서 인젝터란 무엇입니까?

인젝터는 AngularJS의 서비스 로케이터입니다. 인젝터의 주요 목적은 공급자가 정의한 개체 인스턴스를 수신하고, 메서드를 호출하고, 모듈을 로드하고, 유형을 인스턴스화하는 것입니다. 모든 Angular 애플리케이션에는 이름으로 개체 인스턴스를 찾는 데 도움이 되는 인젝터가 포함되어 있습니다.

13. ng-model이 CSS 클래스에 추가하는 다양한 스타일 형식의 이름을 지정합니다.

ng-model은 CSS 클래스에 다음 스타일 형식을 추가합니다.

  • ng-유효
  • ng- 무효
  • ng-pristine
  • ng-더티

14. 의존성 주입을 정의하십시오. 개체 또는 함수가 종속성에 어떻게 액세스할 수 있습니까?

종속성 주입(DI)은 코드가 종속성을 검색하는 방법을 결정하는 소프트웨어 디자인 패턴입니다. 이를 통해 구성 요소 내에서 구성 요소를 하드 코딩하는 대신 구성 요소가 종속성에 액세스할 수 있습니다. 모듈이 애플리케이션에 로드될 때 구성해야 하는 요소를 검색하기 위해 "config" 작업은 DI를 사용합니다.

개체 또는 함수는 다음과 같은 방법으로 종속성에 액세스할 수 있습니다.

  • new 연산자를 사용하여 종속성을 만들 수 있습니다.
  • 종속성은 전역 변수를 참조하여 조회할 수 있습니다.

15. AngularJS에서 종속성으로 주입할 수 있는 구성 요소의 이름을 지정합니다.

AngularJS에서는 다음 구성 요소를 종속성으로 서로 주입할 수 있습니다.

  • 값
  • 서비스
  • 공장
  • 일정한
  • 공급자

이 질문에 대한 답도 찾으십시오. 왜 전체 스택 개발자가 됩니까?

16. HTML의 컴파일 과정과 관련된 단계는 무엇입니까?

HTML 컴파일 프로세스에는 다음 단계가 포함됩니다.

  • 먼저 HTML은 표준 브라우저 API를 사용하여 DOM으로 구문 분석됩니다.
  • 다음 단계에서는 $compile() 메서드를 호출하여 DOM 컴파일을 수행합니다. 이 메서드는 지시문과 일치하도록 DOM을 탐색합니다.
  • 마지막 단계는 이전 단계에서 반환된 연결 함수를 호출하여 템플릿을 범위와 연결하는 것입니다.

17. AngularJS에서 서비스란 무엇입니까?

서비스는 특정 작업을 수행하도록 설계된 JavaScript 기능입니다. 예를 들어 $https: 함수는 서버 데이터를 얻기 위해 AJAX 호출을 수행하는 데 사용되며 $route 함수는 라우팅 정보를 정의하는 데 사용됩니다. 특정 작업을 수행할 수 있는 이러한 서비스가 더 많이 있습니다.

18. AngularJS에서 지시문을 정의합니다. 다양한 유형의 지시문에 이름을 지정하십시오.

AngularJS에서 지시문은 특정 HTML 구조가 발생할 때 컴파일 프로세스 중에 트리거되는 동작 또는 기능입니다. 지시문은 DOM 요소(예: 요소, 속성, CSS 등)의 마커입니다. 이를 사용하여 새로운 사용자 정의 위젯 역할을 하는 사용자 정의 HTML 태그를 생성할 수도 있습니다.

지시어의 네 가지 핵심 유형은 다음과 같습니다.

  • 요소 지시문
  • 속성 지시문
  • 주석 지시문
  • CSS 클래스 지시문

19. AngularJS에서 주석과 데코레이터를 구별하십시오.

Angular에서 주석은 "주석" 배열을 생성하기 위해 Reflect Metadata 라이브러리를 사용하는 클래스의 유일한 메타데이터 세트입니다. 반면 데코레이터는 애플리케이션의 원본 소스 코드를 변경하지 않고 클래스의 장식이나 수정을 분리하는 데 사용되는 디자인 패턴입니다.

20. 컨트롤러를 정의합니다.

컨트롤러는 특정 범위에 바인딩된 JavaScript 함수입니다. 그들의 주요 목표는 HTML UI에 데이터와 논리를 제공하는 것입니다. 데이터가 서버에서 HTML UI로 흐르는 방식을 제어하는 ​​AngularJS 프레임워크의 주요 행위자입니다. 또한 컨트롤러는 데이터에 대해 작동하고 업데이트된 모델 기반 데이터를 표시하기 위해 업데이트해야 하는 보기를 결정하는 기능도 수행합니다.

21. AngularJS에서 로그는 어떻게 유지되나요?

AngularJS에서는 로그를 유지하기 위해 $log 서비스를 사용합니다. $log 서비스의 주요 목적은 아래에 언급된 방법을 통해 디버깅 및 문제 해결을 돕는 것입니다.

  • log() – 콘솔에 로그 메시지를 작성하는 데 사용됩니다.
  • info()- 정보 메시지를 작성하는 데 사용됩니다.
  • warn() - 경고 메시지를 작성하는 데 사용됩니다.
  • error()- 오류 메시지를 작성하는 데 사용됩니다.
  • debug()- 디버그 메시지를 작성하는 데 사용됩니다.

22. AngularJS에서 $rootscope를 정의합니다. 스코프와 어떻게 다릅니까?

AngularJS에서 $rootscope와 $scope는 일반적으로 컨트롤러에서 보기 위해 데이터를 공유하는 데 사용되는 객체입니다. 그러나 둘은 엄연히 다릅니다. $rootscope와 $scope의 주요 차이점은 전자는 모든 컨트롤러에서 전역적으로 사용할 수 있지만 $scope는 자식 컨트롤러와 함께 만든 컨트롤러에서만 사용할 수 있다는 것입니다.

23. AngularJS가 지원하는 브라우저의 이름을 지정하십시오.

AngularJS에서 지원하는 브라우저는 다음과 같습니다.

  • 모질라 파이어 폭스
  • 구글 크롬
  • 마이크로소프트 엣지
  • IE 모바일
  • 사파리(iOS)
  • IE 10,11

24. Angular 1.x에서 HTML5 모드를 활성화하려면 어떻게 해야 합니까?

Angular 1.x에서 HTML5 모드를 활성화하려면 다음 코드를 실행해야 합니다.

angular.module('myApp', [ ])

.config(함수($routeProvider, $locationProvider) {

$routeProvider

.언제('/', {

templateUrl : 'partials/home.html',

컨트롤러 : 메인 컨트롤러

})

// HTML5 히스토리 API 사용

$locationProvider.html5Mode(true);

});

25. AngularJS에 내장된 유효성 검사기의 이름을 지정합니다.

AngularJS는 입력 유효성 검사를 위한 모든 표준 HTML5 속성을 지원합니다. 다음은 AngularJS의 내장 유효성 검사기 중 일부입니다.

  • 분
  • 최대
  • 필수의
  • Type="숫자" OR type="이메일"

26. AngularJS를 사용하여 AJAX 호출을 하는 방법은 무엇입니까?

AngularJS의 $https: 서비스를 사용하여 AJAX 호출을 통해 서버에서 데이터를 읽을 수 있습니다. AngularJS는 데이터가 JSON 형식이어야 합니다. 서버는 원하는 레코드를 검색하기 위해 데이터베이스 호출을 생성합니다. 데이터가 준비되면 $https: 서비스를 사용하여 다음과 같이 서버에서 데이터를 검색할 수 있습니다.

함수 학생 컨트롤러($scope,$https:) {

var url = "data.txt";

$https:.get(url).success( 함수(응답) {

$scope.students = 응답;

});

}

27. AngularJS에서 내부화란 무엇입니까?

AngularJS에서 국제화는 웹 사이트에 로케일별 정보를 표시하는 데 사용되는 방법을 나타냅니다. 예를 들어, 미국에서는 영어로, 프랑스에서는 덴마크어로 콘텐츠를 표시하는 웹사이트는 위치에 따라 내재화되어야 합니다.

AngularJS는 세 가지 종류의 필터에 대해 내장된 국제화 지원을 제공합니다.

  • 날짜
  • 숫자
  • 통화

28. AngularJS 부팅 프로세스의 단계를 설명합니다.

브라우저에서 페이지를 로드하면 AngularJS 부팅 프로세스가 시작됩니다. 관련된 단계는 다음과 같습니다.

  • HTML 문서 파일은 브라우저에 의해 로드되고 평가됩니다. 그런 다음 AngularJS JavaScript 파일이 로드되고 전역 개체가 생성됩니다.
  • 다음 단계에서는 컨트롤러 기능 등록을 담당하는 JavaScript 파일이 실행됩니다.
  • AngularJS는 HTML을 스캔하여 AngularJS 앱과 보기를 찾습니다. 보기를 찾는 데 성공하면 해당 특정 보기를 해당 컨트롤러 기능에 연결합니다.
  • 마지막으로 AngularJS는 컨트롤러 기능을 실행하고 컨트롤러에 의해 채워진 모델의 데이터로 뷰를 렌더링하며 페이지는 사용자가 볼 준비가 됩니다.

29. AngularJS에서 필터는 어떤 용도로 사용됩니까?

필터는 표현식 값의 형식을 지정하고 사용자에게 동일하게 표시하는 데 사용됩니다. AngularJS에서 필터는 템플릿, 지시문, 컨트롤러 및 서비스에 추가됩니다. 사용자 정의 필터를 생성할 수도 있습니다. 필터를 사용하면 데이터 값이 특정 기준을 충족할 때만 표시되도록 데이터를 구성할 수 있습니다. "|"를 사용하여 Angular 표현식에 필터를 추가합니다. 필터 뒤에 오는 문자

결론

그래서, 여기 AngularJS로 얼음을 깨는 데 도움이 될 29개의 가장 자주 묻는 AngularJS 인터뷰 질문과 답변 이 있습니다.

AngularJS, 전체 스택 개발에 대해 자세히 알아보려면 작업 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.

행복한 학습!

풀 스택 개발자 되기

소프트웨어 개발에서 업그레이드 및 IIIT-BANGALORE의 PG 디플로마
자세히 알아보기@UPGRAD