14 คำถามสัมภาษณ์เชิงมุมที่ได้รับความนิยมมากที่สุดในปี 2020

บทความนี้ถูกตีพิมพ์ครั้งแรกที่ https://www.blog.duomly.com/angular-interview-questions/

แนะนำคำถามสัมภาษณ์เชิงมุม

คราวที่แล้วเราเริ่มซีรีส์เกี่ยวกับ คำถามสัมภาษณ์ Javascript เราได้ถามคำถามบางอย่างเกี่ยวกับ React.js, CSS และแบ็กเอนด์

แต่ถึงกระนั้น เราไม่ได้ครอบคลุมเทคโนโลยีทั้งหมดที่มีความสำคัญสำหรับนักพัฒนาส่วนหน้า นั่นคือเหตุผลที่วันนี้ ฉันตัดสินใจสร้างรายการคำถาม 14 ข้อเกี่ยวกับ Angular ซึ่งจะมีประโยชน์มากในการสัมภาษณ์ตำแหน่ง Angular ครั้งต่อไปของคุณ

ฉันจะเริ่มต้นด้วยข้อมูลพื้นฐานที่อาจเป็นประโยชน์สำหรับนักพัฒนารุ่นเยาว์ จากนั้นฉันจะครอบคลุมแง่มุมขั้นสูงเพิ่มเติมของเฟรมเวิร์กนี้

แน่นอน คุณต้องจำเกี่ยวกับการเตรียมตัวจากด้านการเขียนโปรแกรมอื่นๆ เช่น Javascript, HTML และ CSS แต่ฉันหวังว่าคุณจะพบว่ารายการคำถามและคำตอบนี้มีประโยชน์ก่อนการสัมภาษณ์ครั้งต่อไป

เช่นเคย ฉันมีวิดีโอสำหรับผู้ที่ชอบดูและฟังคำอธิบายมากกว่าแค่อ่าน

เริ่มกันเลย!

1. AngularJS กับ Angular ต่างกันอย่างไร?

	AngularJS	เชิงมุม
ภาษา	Javascript	ตัวพิมพ์
รองรับมือถือ	ไม่รองรับเบราว์เซอร์มือถือ	รองรับเบราว์เซอร์มือถือยอดนิยมทั้งหมด
การฉีดพึ่งพา	ไม่ใช้การพึ่งพาการฉีด	ใช้ระบบฉีดพึ่งพาลำดับชั้น
การกำหนดเส้นทาง	$routerprovier.when() สำหรับการกำหนดค่าเราเตอร์	@Route Config{()} สำหรับการกำหนดค่า
โครงสร้าง	จัดการได้น้อยกว่าเมื่อเปรียบเทียบ Angular	สร้างและดูแลแอพพลิเคชั่นขนาดใหญ่ได้ง่ายขึ้น
สถาปัตยกรรม	รองรับการออกแบบ MVC	ใช้ส่วนประกอบและคำสั่งส่วนประกอบเป็นคำสั่งที่มีแม่แบบ
เหตุการณ์ผูกมัด	คำสั่ง ng เฉพาะสำหรับเหตุการณ์	ใช้ () และ [] เพื่อผูกเหตุการณ์และคุณสมบัติที่มีผลผูกพัน

2. อธิบายส่วนประกอบ โมดูล และบริการใน Angular?

ถึง. ส่วนประกอบ เป็นองค์ประกอบพื้นฐานที่สำคัญที่สุดของกรอบงานเชิงมุม ประกอบด้วยสามส่วน: มุมมอง คลาส และสไตล์ ดูองค์ประกอบที่โหลดและแสดงผลเทมเพลต องค์ประกอบสไตล์ดูแลเกี่ยวกับการโหลดสไตล์ และส่วนของคลาสรับผิดชอบตรรกะของส่วนประกอบ ส่วนประกอบสามารถสร้างได้โดยใช้คำสั่ง Angular CLI: |_+_| นี่คือตัวอย่างขององค์ประกอบที่ว่างเปล่า:

ng generate component

NS. โมดูล อ้างถึงสถานที่ที่เราสามารถจัดกลุ่มส่วนประกอบ คำสั่ง และบริการในแอป Angular โมดูลสามารถมีได้สองประเภท: รูทและคุณสมบัติ แต่ละแอปพลิเคชันสามารถมีหนึ่งโมดูลรากและหลายโมดูลคุณลักษณะ เพื่อกำหนดโมดูล เราต้องใช้ |_+_| มัณฑนากร และแต่ละแอปพลิเคชันมีหนึ่งโมดูลที่สร้างขึ้นด้วยแอปพลิเคชันในตอนเริ่มต้น นี่คือตัวอย่างโค้ดของ |_+_|

import { Component, OnInit} from '@angular/core'; @Component({ selector: 'app-component', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { constructor() { } ngOnInit() { } }

ค. บริการ เป็นคลาสที่มีวัตถุประสงค์หลักเพื่อแบ่งปันข้อมูลและการทำงานระหว่างส่วนประกอบต่าง ๆ ของแอพ Angular บริการถูกสร้างขึ้นโดยใช้ |_+_| มัณฑนากรและฟังก์ชั่นจากบริการสามารถเรียกใช้จากส่วนประกอบหรือคำสั่งใด ๆ นี่คือตัวอย่างของบริการที่ว่างเปล่า

NgModule

3. คำสั่งในเชิงมุมคืออะไร?

คำสั่ง เป็นแนวคิดที่สำคัญมากในเชิงมุม ใช้เพื่อขยาย HTML และกำหนดรูปแบบใหม่ คำสั่งสามารถกำหนดไว้ล่วงหน้าหรือกำหนดเองได้

ประเภทของคำสั่ง:
คำสั่งส่วนประกอบ - ทุกองค์ประกอบใน Angular เป็นคำสั่งที่มีเทมเพลต
คำสั่งแอตทริบิวต์ - คำสั่งประเภทนี้สามารถจัดการ DOM โดยการเปลี่ยนพฤติกรรมและรูปแบบ คำสั่งนี้ใช้สำหรับการกำหนดสไตล์ตามเงื่อนไขขององค์ประกอบ
คำสั่งโครงสร้าง - ใช้เพื่อสร้างและทำลายองค์ประกอบของ DOM ตัวอย่างของคำสั่งประเภทนี้คือ |_+_| หรือ |_+_|

4. Dependency Injection ทำงานอย่างไรใน Angular?

Dependency Injection (DI) เป็นแนวคิดที่สำคัญมากใน Angular2+ ด้วยคลาส Dependency Injection สามารถรับการพึ่งพาจากคลาสหรือบริการอื่น ๆ

ตัวอย่างเช่น การฉีดพึ่งพาในแอปพลิเคชันเชิงมุมสามารถมองเห็นได้เมื่อกำหนดฟังก์ชันในบริการและเรียกใช้ฟังก์ชันนั้นในคอมโพเนนต์

ในการทำ service หรือ class injectable เราต้องใช้ |_+_| มัณฑนากร

มาดูภาพกันตอนที่ฉันพยายามแสดงตัวอย่างการฉีดพึ่งพาในแอปพลิเคชันเชิงมุม

การพึ่งพาการฉีดในเชิงมุม

ในภาพด้านบน คุณจะเห็น Injectors ซึ่งก็คือ UserService และ OrderService จากนั้น UserService ในการฉีดส่วนประกอบด้านล่าง ส่งต่อไปยังตัวสร้าง จากนั้นจึงสามารถใช้วิธีการจาก UserService ภายในส่วนประกอบได้

5. นิพจน์เชิงมุมและนิพจน์ Javascript แตกต่างกันอย่างไร

นิพจน์เชิงมุมได้รับการประเมินในบริบทของขอบเขต นิพจน์ Javascript ได้รับการประเมินในบริบทส่วนกลาง
การประเมินนิพจน์ในการส่งคืนเชิงมุม |_+_| หรือ |_+_| ใน Javascript จะส่งกลับ |_+_| หรือ |_+_|;
ในนิพจน์เชิงมุม ไม่อนุญาตให้ใช้จุลภาคและโมฆะ
ในนิพจน์เชิงมุม เราไม่ควรกำหนดฟังก์ชัน

6. อธิบายการผูกข้อมูลใน Angular?

การผูกข้อมูลเป็นแนวคิดของการสื่อสารระหว่างส่วนประกอบและวัตถุ DOM ใน Angular เราสามารถใช้การผูกข้อมูลแบบทางเดียวและการผูกข้อมูลแบบสองทางได้

การผูกข้อมูลทางเดียว (ทิศทางเดียว) ช่วยให้เราสามารถผูกข้อมูลจากส่วนประกอบไปยังมุมมองหรือจากมุมมองไปยังส่วนประกอบเท่านั้น ใน Angular สามารถจัดการได้สองสามวิธี

การแก้ไข: |_+_| - มันส่งข้อมูลจากส่วนประกอบไปยังแม่แบบ

app.module.ts

การผูกคุณสมบัติ: [คุณสมบัติ]= data - ส่งค่าจากส่วนประกอบไปยังคุณสมบัติเฉพาะขององค์ประกอบ HTML เช่น ค่าไปยังองค์ประกอบอินพุต สามารถใช้สำหรับชั้นเรียนและสไตล์ได้เช่นกัน

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

การผูกเหตุการณ์: (เหตุการณ์)= ฟังก์ชัน - มันส่งผ่านข้อมูลจากวัตถุ DOM ไปยังส่วนประกอบ หากมีเหตุการณ์ใดเกิดขึ้น คอมโพเนนต์จะได้รับข้อมูลและสามารถดำเนินการได้

@Injectable

วิธีการเหล่านั้นเป็นการผูกข้อมูลแบบทางเดียว แต่ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ คุณสามารถใช้การเชื่อมโยงข้อมูลแบบสองทางในเชิงมุมและส่งข้อมูลได้ทั้งสองวิธี สำหรับสิ่งนั้น เราใช้ ngModel (คำสั่งของ Angular สำหรับผูกค่าขององค์ประกอบ HTML กับแอปพลิเคชัน) และ [()] ไวยากรณ์ เป็นความคิดที่ดีที่จะใช้มัน ตัวอย่างเช่น ในอินพุต

การผูกข้อมูลแบบสองทาง: [(ngModel)]=data

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AppService { constructor() { } }

ในตัวอย่างของเรา ค่าที่ใช้สำหรับอินพุตคือ |_+_| แต่ถ้าผู้ใช้จะเปลี่ยน ค่าในอินพุตก็จะเปลี่ยนไปเช่นกัน

7. ทอท. กับ JIT คืออะไร ต่างกันอย่างไร?

ต้องรวบรวมแอปพลิเคชันเชิงมุมก่อนที่เบราว์เซอร์จะเข้าใจและเรียกใช้ได้ มีสองวิธีในการรวบรวมโดย Angular framework:

ล่วงหน้า (ทอท.)
ทันเวลา (JIT)

การคอมไพล์ JIT เกิดขึ้นระหว่างรันไทม์ของเบราว์เซอร์ และการคอมไพล์ AOT เกิดขึ้นระหว่างกระบวนการสร้าง ลองมาดูที่กราฟิกด้านล่าง

JIT vs ทอท

ในภาพด้านบน คุณจะเห็นขั้นตอนต่างๆ ที่แอปพลิเคชันกำลังดำเนินการก่อนที่จะเห็นบนหน้าจอ

ข้อได้เปรียบหลักของ ทอท. คือการเรนเดอร์แอปพลิเคชันที่เร็วขึ้น เนื่องจากโค้ดพร้อมที่จะแสดงเมื่อเบราว์เซอร์ดาวน์โหลด นอกจากนี้ยังช่วยลดข้อผิดพลาดเนื่องจากตรวจพบและจัดการในระหว่างขั้นตอนการสร้าง นอกจากนี้ยังให้ความปลอดภัยที่ดีขึ้น

โดยค่าเริ่มต้น แอปเชิงมุมจะคอมไพล์ด้วยวิธี JIT ประกอบกับ ทอท. ใช้ |_+_| . ก็พอ ตั้งค่าสถานะหลัง |_+_| หรือ |_+_|

เฟรมเวิร์ก css ที่ดีที่สุดสำหรับ react

8. เราเตอร์เชิงมุมทำงานอย่างไร

Angular Router เป็นไลบรารีการกำหนดเส้นทางอย่างเป็นทางการของทีม Angular Core
ฟังก์ชันที่สำคัญที่สุดของ Angular Router คือ:

อนุญาตให้นำทางจากมุมมองหนึ่งไปยังอีกมุมมองหนึ่งโดยไม่ต้องโหลดซ้ำ
อัปเดตประวัติของเบราว์เซอร์เพื่อให้ผู้ใช้สามารถนำทางด้วยฟังก์ชันย้อนกลับและส่งต่อของเบราว์เซอร์
เปิดใช้งานส่วนประกอบที่จำเป็นในการแสดงมุมมองเฉพาะที่เชื่อมต่อกับเส้นทาง
อนุญาตให้เปลี่ยนเส้นทาง;
อนุญาตให้ขี้เกียจโหลดบางส่วนของแอพ
การเปิดใช้งานหรือปิดใช้งาน URL เฉพาะตามที่เจ้าหน้าที่รักษาความปลอดภัย

มาดูรูปภาพกันและมาดูขั้นตอนที่เราเตอร์ทำเพื่อแสดงหน้ากัน

เราเตอร์เชิงมุม

ในภาพด้านบน คุณสามารถดูหกขั้นตอนที่ Angular Router ทำจากการนำ URL จากเบราว์เซอร์ไปแสดงส่วนประกอบ

9. อธิบาย Lifecycle Hooks

ทุกองค์ประกอบใน Angular มีวงจรชีวิตและขั้นตอนต่างๆ ของวงจรชีวิต แต่ละวงจรชีวิตมีตะขอที่ช่วยให้เราสามารถโต้ตอบกับส่วนประกอบในขั้นตอนเฉพาะได้

มาดูตะขอของส่วนประกอบเชิงมุมกัน

โดย OnChanges () - เป็นวิธีการที่เรียกครั้งเดียวเมื่อสร้างส่วนประกอบ และต่อมาทุกครั้ง คุณสมบัติอินพุตของส่วนประกอบจะเปลี่ยนไป ใช้วัตถุ SimpleChanges เป็นพารามิเตอร์ มันให้และค่าปัจจุบันและก่อนหน้าของอินพุตหากมีอยู่

โดย OnInit () - เป็น hook ที่ได้รับความนิยมมากที่สุดในวงจรชีวิตของส่วนประกอบเชิงมุม และถูกเรียกใช้หนึ่งครั้งต่อวงจรชีวิตของส่วนประกอบ หลังจากช่วงแรก |_+_| กระบวนการ. เป็นที่ที่เราสามารถทำการร้องขอเซิร์ฟเวอร์หรือตรรกะการเริ่มต้นอื่น ๆ

ngDoCheck() - ใช้เพื่อตรวจจับการเปลี่ยนแปลงที่ Angular ตรวจไม่พบ มันถูกเรียกในการตรวจจับการเปลี่ยนแปลงทุกครั้ง หลังจากสองวิธีแรก เบ็ดนี้ไม่เหมาะสำหรับประสิทธิภาพเนื่องจากมีการเรียกใช้บ่อยมาก ดังนั้นจึงควรใช้อย่างระมัดระวัง

ngAfterContentInit () - วิธีการนี้ถูกเรียกเพียงครั้งเดียว หลังจาก ngDoCheck() ครั้งแรก และมันทำให้เราสามารถเข้าถึง ElementRef ของ ContentChild

ngAfterContentChecked() - hook นี้ถูกเรียกหลังจาก ngAfterContentInit() และหลังจาก ngDoCheck() ทุกครั้ง

ngAfterViewInit() - เมธอดวงจรชีวิตนี้ถูกเรียกหลังจากมุมมองของคอมโพเนนต์หรือมุมมองของคอมโพเนนต์ย่อยเริ่มต้นขึ้น มันถูกเรียกหนึ่งครั้งหลังจากวิธี ngAfterContentChecked() แรก

ngAfterViewChecked() - เบ็ดนี้ตอบสนองเมื่อ Angular ตรวจสอบมุมมองของส่วนประกอบและมุมมองลูกของส่วนประกอบ มันถูกเรียกหลังจาก ngAfterViewInit() และหลังจากทุก ๆ ngAfterContentCheck()

ngOnDestroy() - เป็นวิธีสุดท้ายของวงจรชีวิตของคอมโพเนนต์ของ Angular เป็นที่ที่เราควรทำความสะอาดส่วนประกอบของเราก่อนที่จะทำลาย ซึ่งหมายความว่าเราควรยกเลิกการติดตามหรือกิจกรรมที่สังเกตได้ มันถูกเรียกก่อนที่ Angular จะทำลายส่วนประกอบ

10. Rxjs คืออะไร (ส่วนขยายปฏิกิริยาสำหรับ Javascript)?

Rxjs เป็นไลบรารี่ มักใช้กับกรอบงานเชิงมุม รองรับการเขียนโปรแกรมแบบตอบสนอง ซึ่งเป็นกระบวนทัศน์การเขียนโปรแกรมแบบอะซิงโครนัสที่เน้นที่สตรีมข้อมูลและการเปลี่ยนแปลงการแพร่กระจาย

Rxjs ใช้ Observables ซึ่งทำให้ง่ายต่อการสร้างโค้ดแบบอะซิงโครนัส นอกจากนี้ยังมีฟังก์ชั่นยูทิลิตี้เพื่อช่วยให้เราใช้งาน Observables ได้

11. ข้อแตกต่างระหว่างสิ่งที่สังเกตได้และคำสัญญาคืออะไร?

สัญญา	สังเกตได้
ปล่อยหนึ่งเหตุการณ์	ปล่อยหลายเหตุการณ์
ไม่ขี้เกียจ	ขี้เกียจต้องการสมาชิก
ยกเลิกไม่ได้	สามารถยกเลิกได้ด้วย .unsubscribe() method
ไม่ตรงกันเสมอ	สามารถซิงโครนัสและอะซิงโครนัสได้
ไม่มีอะไรแบบนั้นสำหรับ Promise	มีโอเปอเรเตอร์หลายตัวที่สามารถใช้กับ Observable (เช่น แผนที่ ตัวกรอง)

12. Subject คืออะไร และ Subject คืออะไร?

ตัวแบบคล้ายกับ Observable สามารถสมัครและยกเลิกการสมัครได้ นอกจากนี้ยังมีเมธอดชุดเดียวกัน เช่น .next(), .error(), .complete()

Subject เป็น multicast และ Observable เป็น unicast

ด้วยสิ่งที่สังเกตได้ สมาชิกแต่ละคนสามารถรับค่าที่แตกต่างกัน และด้วยหัวเรื่อง การดำเนินการที่สังเกตได้หนึ่งครั้งจะถูกแชร์ในหมู่สมาชิกจำนวนมาก นอกจากนี้ Subject ยังสามารถใช้เป็นสมาชิกข้อมูลและผู้บริโภคข้อมูลได้ แต่ Observable ไม่สามารถเป็นผู้บริโภคข้อมูลได้

วิชามีสามประเภท:

เรื่องพฤติกรรม - มันเก็บค่าปัจจุบัน และด้วยเหตุนั้น เราจึงสามารถรับค่าที่ปล่อยออกมาล่าสุดจาก Behavior Subject ได้โดยตรง สามารถทำได้โดยใช้คุณสมบัติ .value หรือโดยสมัครรับเรื่อง

สามารถสร้าง Behavior Subject ด้วยค่าเริ่มต้น ซึ่งไม่ง่ายนักกับ Observables

Replay Subject - Subject ประเภทนี้คล้ายกับ Behavior Subject ในกรณีที่ส่งค่าปัจจุบันไปยังสมาชิกใหม่

แต่ Reply Subject ไปไกลกว่านั้นอีก มันทำให้เรามีความเป็นไปได้ในการกำหนดจำนวนค่าที่เราต้องการจำและระยะเวลา จากนั้นจำนวนค่าจะถูกส่งไปยังสมาชิกใหม่

หัวเรื่อง Async - ในกรณีนี้ เฉพาะค่าสุดท้ายของการดำเนินการที่สังเกตได้เท่านั้นที่ถูกส่งไปยังสมาชิก และส่งเมื่อการดำเนินการเสร็จสิ้นเท่านั้น จึงต้องเรียกเมธอด .complete()

13. องค์ประกอบโต้ตอบกันในเชิงมุมอย่างไร?

การส่งผ่านข้อมูลระหว่างส่วนประกอบเชิงมุมสามารถทำได้หลายวิธี ขึ้นอยู่กับความสัมพันธ์ระหว่างส่วนประกอบ

ในกรณีของความสัมพันธ์แบบ Parent to Child เราสามารถใช้ @Input decorator มาดูตัวอย่างโค้ดกัน

*ngIf

ในตัวอย่างโค้ดด้านบน คุณจะเห็นองค์ประกอบหลักที่มี |_+_| คุณสมบัติ และส่งต่อไปยังองค์ประกอบลูก ในองค์ประกอบลูก เราใช้ |_+_| มัณฑนากรเพื่อรับข้อมูลและแสดงผล

วิธีทำเว็บไซต์ช้อปปิ้งออนไลน์ใน html

จาก Child to Parent เราสามารถใช้ @ViewChild มัณฑนากร มาดูตัวอย่างโค้ดกัน

*ngFor

ในตัวอย่างโค้ดด้านบน ฉันใช้ @ViewChild ในองค์ประกอบหลัก ซึ่งอนุญาตให้ฉันเข้าถึงข้อมูลจากองค์ประกอบย่อยในองค์ประกอบหลัก

อีกตัวอย่างหนึ่งของการส่งผ่านข้อมูลจากองค์ประกอบลูกไปยังองค์ประกอบหลักคือ @Output และ EventEmitter

@Injectable

ในตัวอย่างนี้ เราใช้ @Output และ EventEmitter เพื่อส่งข้อมูลจากองค์ประกอบลูกไปยังองค์ประกอบหลัก

นอกจากนี้เรายังสามารถส่งข้อมูลผ่านบริการได้หากส่วนประกอบไม่ได้เชื่อมต่อกันโดยตรง

14. ท่อเชิงมุมคืออะไร?

ท่อใน Angular เป็นคลาสที่มีการตกแต่ง @Pipe ซึ่งแปลงข้อมูลอินพุตเป็นเอาต์พุตข้อมูลที่ต้องการตามตรรกะในไพพ์

บทสรุป

ในบทความนี้ ฉันได้อ่านคำถามยอดนิยมที่ถามระหว่างการสัมภาษณ์นักพัฒนา front-end ด้วย Angular

ฉันจะเริ่มต้นด้วยการครอบคลุมข้อมูลพื้นฐานเช่นความแตกต่างระหว่าง AngularJS และ Angular หรือที่เป็นแบบจำลองและคำสั่ง นอกจากนี้ ฉันยังครอบคลุมแนวคิดขั้นสูงบางอย่าง เช่น Observables และ Subjects

ฉันหวังว่าคุณจะพบว่าบทความนี้มีประโยชน์ แต่จำไว้ว่าการเตรียมตัวจากเทคโนโลยีต่างๆ ก็จำเป็นเช่นกัน โปรดดูรายการคำถามสัมภาษณ์ Javascript ที่เราเตรียมไว้

คำถามสัมภาษณ์ Javascript

รหัสโปรโมชั่น Duomly

ขอบคุณสำหรับการอ่านและขอให้โชคดีในการสัมภาษณ์ครั้งต่อไปของคุณ
อันนา

#angular #javascript #angular-js #web-development

www.blog.duomly.com