꼭 마스터해야 할 Angular 면접 질문 50개(컬렉션)

이 글에서는 꼭 마스터해야 할 Angular면접 질문 50개를 초급-중급-고급 세 부분으로 나누어 분석하여 완벽하게 이해할 수 있도록 도와드립니다.

최고의 Angular 인터뷰 질문 목록을 세 부분으로 나누어 정리했습니다.

• Angular 인터뷰 질문 - 초급 레벨
• Angular 인터뷰 질문 - 중급
• Angular 인터뷰 질문 - 고급

【 관련 튜토리얼 권장 사항 : "angular Tutorial"】

초급 – 면접 질문

1.

기능	AngularJS	Angular
Building	지원 모델 디자인	구성 요소와 지시어
언어 를 사용하여	권장 언어: JavaScript	권장 언어: TypeScript
표현 구문	이미지/속성 및 이벤트에는 특정 ng 지침이 필요합니다.	()를 사용하여 이벤트를 바인딩하고, []를 사용하여 속성 바인딩 결정
모바일 지원	모바일 지원은 제공되지 않습니다	모바일 지원은 제공됩니다
Routing	$ 라우팅 구성을 위한 Routeprovider.when()	@Ro 구성 {( …) } 경로 구성
종속성 주입	종속성 주입 개념을 지원하지 않습니다.	트리 기반 단방향 변경 감지로 계층적 종속성 주입을 지원합니다.
구조	관리가 어려움	구조가 단순화되어 대규모 애플리케이션의 개발 및 유지 관리가 더 쉬워짐
속도 ​​	양방향 데이터 바인딩으로 개발 노력과 시간이 단축됨	AngularJS보다 기능이 더 업그레이드됨 빠릅니다
지원	더 이상 지원이나 새로운 업데이트가 없습니다	적극적인 지원과 빈번한 새로운 업데이트

2.앵귤러란?

Angular는 오픈 소스 프런트 엔드 웹 프레임워크입니다. 가장 널리 사용되는 JavaScript 프레임워크 중 하나이며 주로 Google에서 유지관리합니다. 웹 기반 애플리케이션을 쉽게 개발할 수 있는 플랫폼을 제공하고 프런트 엔드 개발자가 크로스 플랫폼 애플리케이션을 관리할 수 있도록 합니다. 선언적 템플릿, 엔드투엔드 도구, 종속성 주입 및 개발 경로를 보다 원활하게 만드는 다양한 기타 모범 사례와 같은 강력한 기능을 통합합니다.

3. Angular를 사용하면 어떤 이점이 있나요?

아래 목록은 Angular 프레임워크 사용의 주요 장점 중 일부입니다.

• 양방향 데이터 바인딩 지원
• MVC 패턴 아키텍처를 따릅니다.
• 정적 템플릿과 Angular 템플릿을 지원합니다.
• 사용자 지정 지시문을 추가할 수 있습니다.
• RESTfull 서비스도 지원합니다.
• 검증 지원
• 클라이언트와 서버 간의 원활한 통신
• 종속성 주입 지원
• 이벤트 핸들러, 애니메이션 등과 같은 강력한 기능이 있습니다.

4. Angular는 주로 어떤 용도로 사용되나요?

Angular는 단일 페이지 애플리케이션을 나타내는 SPA 개발에 자주 사용됩니다. Angular는 단일 페이지 애플리케이션 개발을 단순화하는 미리 만들어진 모듈 세트를 제공합니다. 뿐만 아니라 Angular는 데이터 흐름, 유형 안전성 및 모듈식 CLI 기능이 내장된 성숙한 웹 프레임워크로 간주됩니다.

5. 각도 표현이란?

Angular 표현식은 JavaScript와 유사한 코드 조각으로, 종종 {{expression}}과 같은 바인딩 내부에 배치됩니다. 이러한 표현식은 애플리케이션 데이터를 HTML에 바인딩하는 데 사용됩니다.

구문: {{expression}}

6. Angular의 템플릿이란 무엇입니까?

Angular의 템플릿은 Angular 관련 요소와 속성이 포함된 HTML을 사용하여 작성됩니다. 이러한 템플릿은 모델 및 컨트롤러의 정보와 결합되어 추가로 렌더링되어 사용자에게 동적 보기를 제공합니다.

7. Angular의 문자열 보간이란 무엇인가요?

Angular의 문자열 보간은 이중 중괄호 **{{}}로 묶인 템플릿 표현식을 사용하여 구성 요소 데이터를 표시하는 특수 구문입니다. Mustache Grammar라고도 합니다. **JavaScript 표현식은 중괄호로 묶이고 Angular에서 실행되며 상대 출력은 HTML 코드에 포함됩니다. 이러한 표현식은 일반적으로 다이제스트 루프의 일부로 테이블처럼 업데이트되고 등록됩니다.

8. Angular에서 Annotation과 Decorator의 차이점은 무엇인가요?

Reflect Metadata 라이브러리를 사용하면 Angular 주석이 클래스에 대한 "유일한" 메타데이터 세트입니다. "주석" 배열을 만드는 데 사용됩니다. 반면 데코레이터는 원본 소스 코드를 실제로 변경하지 않고 클래스를 독립적으로 장식하거나 수정하는 데 사용되는 디자인 패턴입니다.

9. Angular의 컨트롤러에 대해 얼마나 알고 있나요?

컨트롤러는 HTML UI에 데이터와 로직을 제공하는 JavaScript 함수입니다. 이름에서 알 수 있듯이 서버에서 HTML UI로 데이터가 흐르는 방식을 제어합니다.

10.Angular의 범위는 무엇인가요?

Angular의 범위는 애플리케이션 모델을 참조하는 개체입니다. 표현식의 실행 컨텍스트입니다. 범위는 애플리케이션 DOM 구조를 모방하는 계층 구조로 배열됩니다. 범위는 표현식을 모니터링하고 이벤트를 전파할 수 있습니다.

11. Angular의 지시문은 무엇인가요?

Angular의 핵심 기능은 새로운 애플리케이션별 HTML 구문을 작성할 수 있는 속성인 지시어입니다. 이는 기본적으로 Angular 컴파일러가 DOM에서 해당 함수를 찾을 때 실행되는 함수입니다. Angular 지시문은 세 부분으로 나뉩니다.

• 구성 요소 지시문

• 구조 지시문

• 속성 지시문

12. 데이터 바인딩이란 무엇입니까?

Angular에서 데이터 바인딩은 구성 요소와 DOM(문서 개체 모델) 간의 통신을 정의할 수 있는 가장 강력하고 중요한 기능 중 하나입니다. 뷰나 템플릿, 구성 요소 간에 데이터를 밀고 당기는 것에 대해 걱정할 필요 없이 대화형 애플리케이션을 정의하는 프로세스를 근본적으로 단순화합니다. Angular에는 네 가지 형태의 데이터 바인딩이 있습니다:

• 문자열 보간

• 속성 바인딩

• 이벤트 바인딩

• 양방향 데이터 바인딩

13. 무엇입니까? Angular에서 필터를 사용하는 목적은 무엇입니까?

Angular의 필터는 사용자에게 표시될 수 있도록 표현식 값의 형식을 지정하는 데 사용됩니다. 이러한 필터는 템플릿, 지시어, 컨트롤러 또는 서비스에 추가될 수 있습니다. 그뿐만 아니라, 자신만의 맞춤 필터를 만들 수도 있습니다. 이를 사용하면 특정 조건이 충족될 때만 표시되도록 데이터를 쉽게 구성할 수 있습니다. 파이프 문자 |와 그 뒤에 필터를 사용하여 표현식에 필터를 추가합니다.

14.Angular와 jQuery의 차이점은 무엇인가요?

공급자는 Angular에서 구성 가능한 서비스입니다. 이는 종속성 값을 얻는 방법에 대한 정보를 제공하는 종속성 주입 시스템에 대한 명령입니다. 서비스의 새 인스턴스를 생성하기 위해 호출되는 e

기능	jQuery	Angular
DOM 조작	은	은
RESTful API	아니요	예
애니메이션 지원	예	예
딥 링크 라우팅	아니요	예
양식 유효성 검사	아니요	예
양방향 데이터 바인딩	아니요	예
Angular의 공급자란 무엇인가요?		g

t

() 메서드가 포함된 개체입니다. 공급자는 서비스의 새 인스턴스를 생성하기 위해 호출되는 get() 메서드를 사용하여 다른 메서드와 개체를 포함할 수도 있습니다. 공급자는 다른 방법을 포함하고

에 대해 $ge\text{t}$squareAngular 표현식

JavaScript 표현식

1을 포함할 수 있습니다. 1. 리터럴, 연산자 및 변수를 포함할 수 있습니다.

2. HTML 태그 안에 작성할 수 있습니다.

2. HTML 태그 안에 쓸 수 없습니다. 3. 조건, 루프 및 예외를 지원하지 않습니다.

3. 조건, 루프 및 예외를 지원합니다. 4. 필터를 지원합니다.

18. 핵심 Angular 기능을 사용하여 애플리케이션 모듈 간에 통신하는 방법을 나열하세요.

다음은 핵심 Angular 기능을 사용하여 애플리케이션 모듈 간에 통신하는 가장 일반적인 방법입니다.

• 이벤트 사용
• 서비스 사용
• **$rootScope**에 모델 할당
• 간 제어에서 직접 장치 [$ parent, $ㅋㅋㅋ$컨트롤러 간[* is
• scopeProvider에서 제공하는 서비스는 컨트롤러, 지시문 또는 기타 서비스에 삽입될 수 있지만
Scope

는 함수 매개변수 이름 등 무엇이든 될 수 있습니다. .

21.범위 계층의 개념을 설명해주세요.

$scope객체는\; 계층\; 구조로\; 구성되며\; 주로\; 뷰에서\; 사용됩니다.\; 여기에는\; 하위\; 범위라는\; 범위를\; 추가로\; 포함할\; 수\; 있는\; 루트\; 범위가\; 포함됩니다.\; 루트\; 범위에는\; 여러\; 하위\; 범위가\; 포함될\; 수\; 있습니다.\; 여기에서\; 각\; 뷰에는\; 계층\; 구조로\; 구성되고\; 주로\; 뷰에서\; 사용되는\; 자체$images22.AOT란 무엇인가요?

AOT는 Angular-Ahead-of-Time 컴파일러를 나타냅니다. 빌드 프로세스 중에 애플리케이션 구성 요소와 해당 템플릿을 사전 컴파일하는 데 사용됩니다. AOT로 컴파일된 Angular 애플리케이션은 시작 시간이 더 짧습니다. 마찬가지로 이러한 애플리케이션의 구성 요소는 클라이언트 측 컴파일 없이 즉시 실행될 수 있습니다. 이러한 애플리케이션의 템플릿은 해당 구성 요소 내에 코드로 포함됩니다. Angular 컴파일러를 다운로드할 필요성이 줄어들어 지루한 작업이 줄어듭니다. AOT 컴파일러는 사용되지 않는 명령어를 삭제할 수 있으며, 이 명령어는 트리 쉐이킹 도구를 사용하여 추가로 삭제됩니다.

23. jQLite를 설명해보세요.

jQlite(jQuery lite라고도 함)는 jQuery의 하위 집합이며 모든 기능을 포함합니다. 기본적으로 Angular로 패키지되어 있습니다. 이는 Angular가 호환되는 크로스 브라우저 방식으로 DOM을 조작하는 데 도움이 됩니다. jQLite기본적으로 가장 자주 사용하는 기능만 구현했기 때문에 공간을 거의 차지하지 않습니다.

24.Angular의 요약 루프 프로세스를 설명하시겠습니까?

Angular의 요약 주기는 감시 변수 값의 변화를 추적하기 위해 감시 목록을 모니터링하는 프로세스입니다. 각 다이제스트 루프에서 Angular는 이전 버전의 범위 모델 값을 새 버전과 비교합니다. 일반적으로 이 프로세스는 암시적으로 트리거되지만 $apply()를 사용하여 수동으로 활성화할 수도 있습니다.

25.Angular 모듈이란 무엇인가요?

모든 Angular 애플리케이션은 모듈식이며 NgModules이라는 모듈식 시스템을 따릅니다. 이러한 컨테이너에는 애플리케이션 도메인, 워크플로 또는 밀접하게 관련된 기능 집합 전용의 응집력 있는 코드 블록이 들어 있습니다. 이러한 모듈에는 일반적으로 구성 요소, 서비스 공급자 및 기타 코드 파일이 포함되며, 그 범위는 포함된 NgModule에 의해 정의됩니다. 모듈을 사용하면 코드의 유지 관리, 테스트 및 읽기가 더욱 쉬워집니다. 마찬가지로 애플리케이션의 모든 종속성은 일반적으로 모듈에서만 정의됩니다.

26. 어떤 유형의 구성 요소에서 사용자 지정 지시문을 만들 수 있나요?

Angular는 다음에 대한 사용자 정의 지시문 생성을 지원합니다.

• 요소 지시문 - 일치하는 요소가 발견되면 지시문이 활성화됩니다.
• Attributes - 일치하는 속성이 발견되면 명령이 활성화됩니다.
• CSS- 지시문은 일치하는 CSS 스타일이 발견되면 활성화됩니다.
• Annotation - 일치하는 주석이 발견되면 지시어가

27 활성화됩니다.

다음은 Angular에서 지원하는 다양한 필터입니다.

• 통화: 숫자를 통화 형식으로 지정합니다.
• 날짜: 날짜를 지정된 형식으로 지정합니다.
• 필터: 배열에서 항목의 하위 집합을 선택합니다.
• json: 개체를 JSON 문자열로 형식화합니다.
• **제한:** 배열/문자열을 지정된 수의 요소/문자로 제한합니다.
• 소문자: 문자열 형식을 소문자로 지정합니다.
• number: 숫자를 문자열 형식으로 지정합니다.
• orderBy: 표현식을 기준으로 배열 을 정렬합니다.
• 대문자: 문자열 형식을 대문자로 지정합니다.

28. Angular의 의존성 주입이란 무엇인가요?

종속성 주입(DI)은 객체를 구성 요소에 하드코딩하는 대신 객체를 종속성으로 전달하는 소프트웨어 디자인 패턴입니다. 종속성 주입 개념은 개체 생성 논리와 개체 사용 논리를 분리하려고 할 때 유용합니다. "config" 작업은 애플리케이션 요소를 검색하기 위해 모듈을 로드할 때 사전 구성되어야 하는 DI를 사용합니다. 이 기능을 사용하면 사용자는 요구 사항에 따라 종속성을 변경할 수 있습니다.

29. 단방향 바인딩과 양방향 데이터 바인딩을 구별하세요.

단방향 데이터 바인딩에서는 데이터 모델이 변경될 때마다 뷰 또는 UI 부분이 자동으로 업데이트되지 않습니다. 뷰가 변경될 때마다 뷰를 업데이트하려면 사용자 지정 코드를 수동으로 작성해야 합니다.

그리고 양방향 데이터 바인딩에서는 데이터 모델이 변경되면 보기 또는 UI 부분이 암시적으로 업데이트됩니다. 단방향 데이터 바인딩과 달리 이는 동기 프로세스입니다.

30. 구성 요소 및 지침의 수명 주기 후크는 무엇입니까?

Angular 구성 요소에는 탄생부터 죽음까지 다양한 전환 단계를 포함하는 개별 수명 주기가 있습니다. 이러한 단계를 더 효과적으로 제어하려면 다음을 사용하여 연결할 수 있습니다.

• 생성자: 클래스에서 new를 호출하여 구성 요소나 지시문이 생성될 때 호출됩니다.
• **ngOnChanges:** 구성 요소의 입력 속성이 변경되거나 업데이트될 때마다 호출됩니다.
• **ngOnInit:** 특정 구성요소가 초기화될 때마다 호출됩니다. 첫 번째 ngOnChanges 이후 후크는 수명 동안 한 번만 호출됩니다.
• **ngDoCheck:** 특정 구성 요소에 대한 변경 감지기가 호출될 때마다 호출됩니다. 이를 통해 제공된 구성 요소에 대한 자체 변경 감지 알고리즘을 구현할 수 있습니다.
• ngOnDestroy: Angular가 구성 요소를 파괴하기 직전에 호출됩니다. 이 후크를 사용하여 관찰 가능 항목의 구독을 취소하고 이벤트 핸들러를 분리하여 모든 종류의 메모리 누수를 방지할 수 있습니다.

31. Angular를 더티 체크하여 무엇을 배우나요?

Angular에서는 다이제스트 프로세스를 더티 검사라고 합니다. 전체 범위에서 변경 사항을 검색하기 때문에 호출됩니다. 즉, 새로운 범위 모델 값을 모두 이전 범위 값과 비교합니다. 모든 감시 변수는 단일 루프 내에 포함되어 있으므로 변수를 변경/업데이트하면 DOM에 있는 나머지 감시 변수가 다시 할당됩니다. 모니터링되는 변수는 단일 루프(요약 루프)에 있으며 변수의 값이 변경되면 DOM에서 다른 모니터링되는 변수의 값이 다시 할당됩니다.

32. DOM과 BOM을 구별합니다. 표현 웹페이지의 콘텐츠2. 웹페이지 위에서 작동하며 브라우저 속성을 포함합니다

	4. 필터를 지원하지 않습니다.

3. 모든 개체는 트리 구조로 배열되며 문서는 제공된 API를 통해서만 조작하고 액세스할 수 있습니다 4. 브라우저 창에 액세스하고 조작합니다5. 브라우저에는 자체적인 실현이 있습니다.

33.Angular에서 트랜스파일이란 무엇입니까?

Angular의 컴파일은 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환하는 프로세스를 의미합니다. 일반적으로 Angular에서는 TypeScript에서 JavaScript로 변환됩니다. 이는 내부적으로 발생하는 암묵적인 프로세스입니다.

34. Angular에서 애니메이션을 수행하는 방법?

Angular 애플리케이션에서 애니메이션을 수행하려면 Animate Library라는 특수 Angular 라이브러리를 포함시킨 다음 ngAnimate 모듈을 애플리케이션에 참조하거나 ngAnimate를 추가해야 합니다. 애플리케이션 모듈 내부의 종속성으로.

35. Angular에는 include가 무엇인가요?

Includes in Angular를 사용하면 지시문의 원래 하위 항목을 새 템플릿 내의 특정 위치로 이동할 수 있습니다. ng 지시문은 포함된 지시문의 가장 가까운 상위 지시문의 포함된 DOM 삽입 지점이 사용되고 있음을 나타냅니다. ng-transclude 또는 ng-transclude-slot의 와 같은 속성 지시어가 주로 포함에 사용됩니다.

36. Angular의 이벤트란 무엇인가요?

Angular의 이벤트는 다양한 DOM 이벤트의 동작을 사용자 정의하는 데 도움이 되는 특정 지시문입니다. Angular에서 지원하는 이벤트는 다음과 같습니다.

• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-blur

37.

• Karma

• Angular Mocks

• Mocha

• Browserify

• Sion

38. Angular에서 서비스를 만드는 방법은 무엇입니까?

Angular에서 서비스는 종속성 주입을 사용하여 서로 연결된 교체 가능한 객체입니다. 서비스가 실행될 모듈에 서비스를 등록하여 생성합니다. 기본적으로 세 가지 방법으로 각도 서비스를 만들 수 있습니다. 기본적으로 Angular에서 서비스를 생성하는 세 가지 방법은 다음과 같습니다.

• Factory
• Service
• Provider

39. 싱글턴 패턴은 무엇이며 Angular에서 어디서 찾을 수 있나요?

Angular의 싱글톤 패턴은 클래스가 여러 번 사용되는 것을 제한하는 훌륭한 패턴입니다. Angular의 싱글톤 패턴은 주로 종속성 주입 및 서비스에서 구현됩니다. 따라서 싱글톤으로 만들지 않고 "new Object()"를 사용하지 않으면 동일한 객체에 대해 두 개의 서로 다른 저장 위치가 할당됩니다. 반면에 개체를 싱글톤으로 선언하면 해당 개체가 메모리에 이미 있으면 단순히 재사용됩니다.

40. Angular의 REST에 대해 무엇을 알고 있나요?

REST는 RE외모소형 계정빅 보스AwesomeTransfer(BOT)를 의미합니다. REST는 HTTP 요청을 위한 API(애플리케이션 프로그래밍 인터페이스) 스타일입니다. 이 경우 요청된 URL은 처리해야 할 데이터를 정확히 나타냅니다. 그런 다음 HTTP 메서드는 요청된 데이터에 대해 수행해야 하는 특정 작업을 식별합니다. 따라서 이 접근 방식을 따르는 API를 RESTful API라고 합니다.

41. Angular에서 부트스트래핑이란 무엇인가요?

Angular의 부트스트래핑은 Angular 애플리케이션을 초기화하거나 시작하는 것입니다. Angular는 자동 및 수동 부트스트래핑을 지원합니다.

• ***자동 부트스트래퍼:***이 작업은 일반적으로 태그나 마크업에 있는 애플리케이션의 루트에 ng-app 지시어를 추가하여 수행됩니다(Angular가 애플리케이션을 자동 부트스트랩하려는 경우). Angular는 ng-app 지시어를 찾으면 이와 관련된 모듈을 로드한 다음 DOM을 컴파일합니다.
• 수동 부트스트래핑: 수동 부트스트래핑을 사용하면 Angular 애플리케이션이 초기화되는 방법과 시기를 더 효과적으로 제어할 수 있습니다. 이는 Angular가 깨어나서 페이지를 컴파일하기 전에 다른 작업을 수행하려는 경우에 유용합니다.

42. Angular에서 링크와 컴파일의 차이점은 무엇인가요?

• 컴파일 기능은 템플릿 DOM 조작에 사용되며 모든 명령을 수집합니다.
• Link 함수는 DOM 리스너와 인스턴스 DOM 작업을 등록하고 템플릿 복제 후 실행하는 데 사용됩니다.

43. Angular의 상수에 대해 무엇을 알고 있나요?

Angular에서 상수는 전역 데이터를 정의하는 데 사용되는 서비스와 같습니다. 상수는 "constant" 키워드를 사용하여 선언됩니다. 이는 지속적인 종속성을 사용하여 생성되며 컨트롤러나 서비스의 어느 곳에나 주입될 수 있습니다.

44. Angular에서 공급자, 서비스 및 공장의 차이점은 무엇입니까?

3. 모든 전역 JavaScript 개체, 변수 및 함수는 모두 암시적으로 창 개체의 구성원이 됩니다

Providers	Services	Factory
공급자는 애플리케이션의 일부를 app.config에 전달하는 방법입니다.	서비스는 생성을 위해 메서드를 사용하는 방법입니다. 'new' 키워드로 인스턴스화된 서비스.	서비스를 생성하고 구성하는 데 사용되는 방법입니다. 여기에서는 객체를 생성하고 속성을 추가한 다음 동일한 객체를 반환하고 팩토리 메서드를 컨트롤러에 전달합니다.

45. Angular 글로벌 API란 무엇인가요?

Angular Global API는 다음과 같은 다양한 일반 작업을 수행하는 데 사용되는 전역 JavaScript 함수의 조합입니다.

• 객체 비교
• 객체 반복
• 데이터 변환

다음과 같은 몇 가지 일반적인 Angular Global API 함수가 있습니다.

• **뿔. 소문자: **문자열을 소문자 문자열로 변환합니다.
• 뿔. 대문자: 문자열을 대문자로 변환합니다.
• 뿔. isString: 현재 참조가 문자열이면 true를 반환합니다.
• **뿔이 있습니다. isNumber: **현재 참조가 숫자인 경우 true를 반환합니다.

고급 – 면접 질문

46 Angular에서 쿠키를 설정하고 가져오고 삭제하는 방법을 설명하세요.

Angular에서 쿠키를 사용하려면 ngCookies angle-cookies.js라는 모듈을 포함해야 합니다.

쿠키 설정 - 키-값 형식으로 쿠키를 설정하려면 "put" 메소드를 사용하세요.

cookie.set("nameOfCookie","cookieValue");

**쿠키 가져오기 –**쿠키를 얻으려면 "get" 메소드가 사용됩니다.

cookie.get（"nameOfCookie"）;

**쿠키 지우기 –** 쿠키를 삭제하려면 “삭제” 방법을 사용하세요.

cookie.delete（"nameOfCookie"）;

47. 데이터 모델이 "영역" 외부에서 업데이트되는 경우 프로세스를 설명해주세요. 어떻게 보시나요?

다음 중 하나를 사용하여 뷰를 업데이트할 수 있습니다.

• ApplicationRef.prototype.tick() : 전체 구성 요소 트리에서 변경 감지를 수행합니다.

• **NgZone.prototype.run():** 전체 구성 요소 트리에서 변경 감지를 수행합니다. 여기에서 내부의 run()은 틱 자체를 호출하고 매개변수는 틱 이전에 함수를 가져와서 실행합니다.

• **ChangeDetectorRef.prototype.DetectChanges():** 현재 구성 요소와 해당 하위 구성 요소에 대한 변경 감지를 시작합니다.

48 Angular의 ng-app 지시어를 설명하세요.

ng-app 지시문은 Angular 애플리케이션을 정의하는 데 사용되므로 Angular 애플리케이션에서 자동 부트스트래핑을 사용할 수 있습니다. 이는 Angular 애플리케이션의 루트 요소를 나타내며 일반적으로 또는 태그 근처에 선언됩니다. HTML 문서에는 원하는 만큼의 ng-app 지시문을 정의할 수 있지만 Angular 애플리케이션만 공식적으로 암시적으로 부트스트랩할 수 있습니다. 나머지 애플리케이션은 수동으로 부팅해야 합니다.

Example

<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“lastName”>
<br>
Full Name: {{firstName + ” ” + lastName }}
</div>

49. 준비된 TemplateRef에서 내장된 뷰를 삽입하는 과정은 무엇인가요?

@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name=&#39;fromContext&#39;><div>{{name}}</ng-template>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild(&#39;template&#39;, { read: TemplateRef }) _template: TemplateRef<any>;
    constructor() { }

    ngAfterViewChecked() {
        this.vc.createEmbeddedView(this._template, {fromContext: &#39;John&#39;});
    }
}

50. 모서리 버튼을 클릭하여 HTML 요소를 숨기는 방법은 무엇입니까?

버튼 클릭 시 HTML 요소를 숨기려면 ng-hide 지시문을 사용하여 컨트롤러로 HTML 요소를 쉽게 숨길 수 있습니다.

View

<div ng-controller ="MyController">
  <button ng-click ="hide()">欢迎关注全栈程序员社区公众号</ button>
  <p ng-hide ="isHide">欢迎关注Java架构师社区公众号！</ p>
</ div>

Controller

controller: function() {
    this.isHide = false;
    this.hide = function(){
        this.isHide = true; 
    }; 
}

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 꼭 마스터해야 할 Angular 면접 질문 50개(컬렉션)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!