Helpex - Trao đổi & giúp đỡ Đăng nhập

Hơn 50 câu hỏi và câu trả lời phỏng vấn góc độ hàng đầu

Angular đã trở thành một trong những framework phổ biến nhất để xây dựng các ứng dụng web front-end . Bộ câu hỏi phỏng vấn Angular này chắc chắn sẽ hữu ích cho cuộc phỏng vấn của bạn, nhưng trước khi đi sâu vào vấn đề đó, chúng ta hãy nhanh chóng tóm tắt lại về Angular.

Angular là gì?

Bạn sẽ nghĩ, Ah… Tuy nhiên, một khuôn khổ khác để học. Nhưng Angular thực sự khác. Bạn sẽ thích học khung ứng dụng web front end mã nguồn mở dựa trên TypeScript này. Trước khi cho bạn biết thêm, hãy để tôi nói rõ rằng Angular khác với AngularJS nhưng đã được thực hiện bởi cùng một nhóm Google, những người đã làm AngularJS . Ban đầu nó được phát triển như một Ứng dụng Trang đơn (SPA), nhưng sau đó các công cụ tốt hơn như React và Vue đã được phát hành, vì vậy Angular phải được cải tiến thành một thứ gì đó nhiều hơn - nếu nó là như ngày nay!

Bạn cũng có thể thích: Angular: Mọi thứ bạn cần biết [Hướng dẫn]

Khuôn khổ giao diện người dùng này có vô số thành phần có thể tái sử dụng và mạnh mẽ, và bạn có thể viết mã sạch sẽ, có thể bảo trì với nó. Năm 2018, Angular được xếp hạng là công nghệ được sử dụng nhiều thứ hai, công nghệ đầu tiên là Node.js. Sức mạnh thực sự của Angular đến với phiên bản 4 của nó, cung cấp khả năng tương thích ngược, biên dịch nhanh hơn, khả năng tái sử dụng nhiều hơn dẫn đến ít mã hóa hơn, thư viện tốt hơn cho các yêu cầu HTTP, vô hiệu hóa hoạt ảnh có điều kiện và hơn thế nữa.

Angular dựa trên HTML, CSS và TypeScript và là một nền tảng tuyệt vời để xây dựng cả ứng dụng dành cho máy tính để bàn và thiết bị di động.

Chờ đã ... cái gì?

Nhưng gần đây tôi đã đọc ở đâu đó rằng các trình duyệt không hỗ trợ typeScript!

Có, TypeScript được chuyển đổi thành một ngôn ngữ khác (JavaScript). Quá trình này được gọi là biên dịch (và không biên dịch).

Angular còn được gọi là Angular 2+. Vì Angular dựa trên TypeScript nên nó đáp ứng tất cả các tính năng của JavaScript cũng như TypeScript.

Tại sao Angular?

Bây giờ đến câu hỏi quan trọng.

Angular đi kèm với một loạt các lợi ích và tính năng phù hợp với các ứng dụng doanh nghiệp và các trang web có nhiều nội dung động hoặc nhiều quy trình làm việc. Cho dù đó là tài liệu đầy đủ, hoặc sự hỗ trợ rộng rãi của Google, hoặc kiến ​​trúc dựa trên thành phần (từ phiên bản 2), Angular có tất cả những gì bạn có thể yêu cầu từ khung phát triển web . Một số lý do tại sao bạn nên sử dụng Angular là:

  • Sự hỗ trợ tuyệt vời của Google, do đó làm cho nền tảng này trở nên thân thiện và đáng tin cậy.
  • Một kiến ​​trúc dựa trên thành phần trong đó ứng dụng được chia thành các thành phần chức năng và logic độc lập với nhau. Các bộ phận có thể được tách rời, thay thế hoặc tái sử dụng một cách dễ dàng. Loại kiến ​​trúc này cũng đảm bảo việc kiểm tra dễ dàng hơn ở mỗi giai đoạn.
  • Rất nhiều mã có thể sử dụng lại và các thành phần của bên thứ ba có sẵn, do đó cải thiện năng suất.
  • Mã được hiển thị nhanh hơn vì nó được chuyển đổi từ TypeScript (hoặc HTML) sang JavaScript trong chính quá trình xây dựng. Đây được gọi là biên dịch trước thời gian (AOT).
  • Giao diện dòng lệnh (CLI) - CLI tạo điều kiện phát triển theo cách hiệu quả nhất. Bạn có thể tạo một dự án mới, thêm các chức năng của mình và kiểm tra chúng một cách nhanh chóng. Hơn nữa, việc khởi tạo và cấu hình cũng trở nên dễ dàng.
  • Angular six cho phép thêm các phần tử tùy chỉnh vào các ứng dụng web được xây dựng bằng các môi trường khác như React, Vue, jQuery, v.v.…
  • Angular six cũng bao gồm một trình kết xuất Ivy dịch các thành phần và mẫu sang JavaScript bằng cách kết xuất. Trong quá trình này, mọi mã không sử dụng sẽ bị xóa, do đó giúp ứng dụng web tải nhanh hơn.
  • Angular Universal được sử dụng để kết xuất phía máy chủ, giúp tăng số lượng người dùng trên trang web và tải trang nhanh hơn.
  • Tài liệu tuyệt vời và cộng đồng hỗ trợ

Làm thế nào để Crack Angular Interview?

Thư giãn đi. Angular rất dễ dàng và nếu bạn có kinh nghiệm thực tế, bạn sẽ có thể trả lời hầu hết các câu hỏi. Không có câu hỏi khó trong Angular. Trong cuộc phỏng vấn Angular, bạn cũng có thể được hỏi một số câu hỏi về TypeScript. Ngoài ra, bạn có thể chia sẻ kinh nghiệm làm việc với Angular.

Đôi khi, có thể có những câu hỏi chủ quan như, bạn đã làm việc với những công nghệ nào khác, so sánh giữa hai kỹ thuật được xây dựng cho cùng một mục đích theo quan điểm của bạn (ví dụ: kỹ thuật nào thoải mái hơn, kỹ thuật nào có đường cong học tập tốt hơn, v.v.) hoặc ngay cả ý kiến ​​cá nhân của bạn về công nghệ yêu thích của bạn trong số những công nghệ bạn đã làm việc.

Câu trả lời phụ thuộc vào kinh nghiệm cá nhân của bạn và đây là nơi bạn có thể đạt được lợi thế bổ sung đó. Bạn càng chia sẻ nhiều kinh nghiệm được cá nhân hóa, người phỏng vấn sẽ càng quan tâm đến việc hỏi bạn nhiều câu hỏi hơn. Các câu hỏi dưới đây hoàn toàn là kỹ thuật và đôi khi câu trả lời của bạn sẽ tự nhiên dẫn đến câu hỏi tiếp theo.

Câu hỏi phỏng vấn góc độ

Câu hỏi: Angular là gì / Bạn biết gì về Angular?

Trả lời: Nếu bạn đã đề cập đến Angular trong sơ yếu lý lịch của mình, thì đây sẽ là câu hỏi Angular đầu tiên mà bạn sẽ được hỏi.

Angular là một khung phát triển web front-end mã nguồn mở dựa trên TypeScript. Nó phù hợp nhất để phát triển các ứng dụng web doanh nghiệp vì mã có thể tái sử dụng và có thể bảo trì. Angular bắt đầu như một khuôn khổ SPA (Single-Page-Application) và hiện hỗ trợ nội dung động dựa trên những người dùng khác nhau thông qua việc tiêm phụ thuộc. YouTubeTV là công ty phổ biến nhất sử dụng Angular.

Câu hỏi: Mục đích của Angular là gì?

Trả lời: Mục đích của việc sử dụng Angular là tạo các ứng dụng web nhanh, năng động và có thể mở rộng một cách dễ dàng, sử dụng các thành phần và chỉ thị.

Câu hỏi: Các Khối Xây dựng Cơ bản của Angular là gì?

Câu trả lời: 

  1. Khái niệm về Angular dựa trên các Thành phần, là khối xây dựng đầu tiên. Các thành phần tuân theo cấu trúc cây trong đó thành phần Ứng dụng là thành phần gốc. Một thành phần đóng gói logic của chế độ xem, dữ liệu và đánh dấu HTML. Mọi ứng dụng phải có ít nhất một phần. Càng nhiều phần có kích thước càng nhỏ thì mã càng dễ đọc.
  2. Mô-đun, khối xây dựng quan trọng thứ hai là một thùng chứa nhóm các thành phần liên quan. Mô-đun mặc định trong một ứng dụng là mô-đun ứng dụng. Lưỡi dao nên có kích thước nhỏ và có các thành phần liên quan.

Các khối xây dựng thiết yếu khác của Angular là:

  • Mẫu: Các mẫu được viết bằng HTML và chứa các phần tử và thuộc tính Angular. Mô hình cung cấp chế độ xem động cho người dùng bằng cách kết hợp thông tin từ bộ điều khiển và xem và hiển thị nó.
  • Directives: Directives cho phép các nhà phát triển thêm cú pháp HTML mới, dành riêng cho ứng dụng. Hành vi về cơ bản được thêm vào các phần tử DOM hiện có.
  • Dịch vụ: Thay vì gọi dịch vụ Http, Angular cho phép tạo các lớp dịch vụ mới. Khi các Dịch vụ mới được tạo trong Angular, chúng có thể được sử dụng bởi các thành phần khác nhau.

Câu hỏi: Hãy cho chúng tôi biết sự khác biệt giữa Angular và Angularjs

Trả lời: Đây là sự khác biệt giữa cả hai -

AngularJSAngular
Dựa trên JavaScriptDựa trên TypeScript
Dựa trên mẫu thiết kế MVCDựa trên các thành phần, mô-đun và chỉ thị
Không hỗ trợ cho ứng dụng di độngHỗ trợ di động
Không thể xây dựng các ứng dụng thân thiện với SEOCác ứng dụng thân thiện với SEO có thể được tạo dễ dàng
Mã thông báo tiêm phụ thuộc chỉ có thể là chuỗi. Ngoài ra, chỉ có kim phun là có mặt.Mã thông báo DI có thể thuộc bất kỳ loại nào, ví dụ: chuỗi hoặc lớp. Angular tuân theo một hệ thống phân cấp cây cho các bộ phun bắt đầu với bộ phun gốc và một vòi phun cho mỗi thành phần từ đó trở đi.
Không hỗ trợ hoặc tương thích ngượcKhả năng tương thích ngược có thể được thực hiện mà không có vấn đề gì. Ngoài ra, có rất nhiều tài liệu hỗ trợ cho cùng một.
Sử dụng $ routeprovider.when () để định tuyếnĐịnh tuyến được thực hiện bằng @RouteConfig [()]
Yêu cầu chỉ thị cụ thể cho từng thuộc tính, sự kiện và hình ảnhĐối với ràng buộc sự kiện, () được sử dụng và đối với ràng buộc hình ảnh hoặc thuộc tính [] được sử dụng

Câu hỏi: Đề cập đến một số tính năng của Angular

Trả lời: Một số tính năng quan trọng là -

  • Kiến trúc dựa trên thành phần - các ứng dụng được viết như một tập hợp các thành phần độc lập.
  • Các bộ phận có thể được tạo, kiểm tra, tích hợp bằng Angular CLI.
  • Hỗ trợ tuyệt vời cho các hình ảnh động phức tạp mà không cần viết nhiều mã.
  • Bởi vì bộ định tuyến thành phần, Angular hỗ trợ tách mã tự động. Do đó, chỉ mã cần thiết để hiển thị một chế độ xem cụ thể mới được tải.
  • Phát triển ứng dụng đa nền tảng.
  • Cú pháp mẫu để tạo giao diện người dùng.

Câu hỏi: Thảo luận về một số ưu điểm của việc sử dụng Angular

Trả lời: Có rất nhiều lợi thế ngoài việc Angular cho phép chúng ta thoát khỏi mẫu MVC, vì nó tuân theo cấu trúc dựa trên Thành phần. Dưới đây là một số lợi ích quan trọng hơn -

  • Hỗ trợ liên kết dữ liệu hai chiều.
  • Hỗ trợ xác thực và cú pháp mẫu (cả góc và tĩnh).
  • Chúng tôi có thể thêm các hoạt ảnh, chỉ thị và dịch vụ tùy chỉnh.
  • Quá trình xử lý sự kiện diễn ra liền mạch.
  • Cấu trúc Hierarchical Dependency Injection (Parent-child).
  • Cung cấp để tạo điều kiện cho các dịch vụ RESTful và giao tiếp máy khách-máy chủ.

Tiếp theo, (những) người phỏng vấn có thể hỏi bạn thêm về bất kỳ ưu điểm nào ở trên. Một hoặc hai dòng là đủ. Chúng tôi sẽ trả lời từng câu hỏi khi bạn đọc thêm câu hỏi.

Câu hỏi: Bạn có thể nghĩ về bất kỳ nhược điểm nào khi sử dụng Angular không?

Trả lời: Không phải là một bất lợi, nhưng trong một số trường hợp, Angular có thể không phù hợp. Ví dụ, đối với các dự án ngắn hạn hoặc các trang web có dung lượng nhẹ có nhiều nội dung tĩnh hơn thì không yêu cầu khuôn khổ phức tạp như Angular. Tương tự như vậy, các ứng dụng có cách tiếp cận thiết kế microservice sẽ tìm thấy quá nhiều tính năng không được sử dụng nếu chúng sử dụng Angular vì nó là một giải pháp hoàn chỉnh. Nhà phát triển sẽ ít linh hoạt hơn trong việc lựa chọn các công cụ bổ sung.

Câu hỏi: Angular CLI là gì? Làm thế nào để bạn sử dụng nó?

Trả lời: Angular CLI tự động hóa quá trình phát triển end-to-end. Quá trình khởi tạo, cấu hình và phát triển của ứng dụng trở nên đơn giản và dễ dàng. Với CLI (Giao diện dòng lệnh), chúng ta có thể tạo một dự án mới, thêm các tính năng mới và chạy các bài kiểm tra (bài kiểm tra đơn vị và bài kiểm tra đầu cuối) chỉ bằng cách gõ một vài lệnh đơn giản. Bằng cách này, các quá trình phát triển và thử nghiệm đều trở nên nhanh hơn.

Ví dụ,

Để tạo một ứng dụng mới, chúng ta nên nhập -

ng new <appname> [options]
to create a class using CLI (in Angular 7), we have to type –
ng generate class MySampleClass [options]
to generate a component,
ng g c <componentname></componentname></appname>


Câu hỏi: Directives trong Angular là gì?

Trả lời: Với các chỉ thị, các nhà phát triển có thể viết cú pháp HTML tùy chỉnh dành riêng cho ứng dụng. Ngôn ngữ mới được viết trong DOM và trình biên dịch Angular thực thi các chức năng chỉ thị khi nó tìm thấy một cú pháp HTML mới. Có ba loại chỉ thị - thuộc tính, thành phần, cấu trúc.

Câu hỏi: Đề cập đến một ví dụ về Chỉ thị cấu trúc

Trả lời: Các chỉ thị cấu trúc thay đổi cấu trúc của DOM. Ví dụ, * ngIf và * ngFor. Ví dụ về cách sử dụng.

{{product.name}}

Cùng một cách.

  • {{product.name}}

Câu hỏi: Dependency Injection (DI) được thực hiện như thế nào trong Angular?

Trả lời: Trong Angular, một lớp yêu cầu các dịch vụ hoặc đối tượng khi nó được khởi tạo, có nghĩa là nếu một lớp được gọi, nó sẽ không tạo bất kỳ đối tượng nào, thay vào đó nó phụ thuộc vào nguồn bên ngoài để khởi tạo các đối tượng, dịch vụ hoặc tham số. Trong quá trình này, một dịch vụ tiêm được tạo và đăng ký. Vòi phun có thể được cấu hình theo ba cách khác nhau,

  • @Injectable () trang trí cho dịch vụ.
  • @NgModule cho NgModule.
  • @Component cho thành phần.

Câu hỏi: Mẫu trong Angular là gì?

Trả lời: Mẫu chỉ đơn giản là một dạng xem HTML nơi các điều khiển ràng buộc có thể hiển thị dữ liệu cho các thuộc tính của thành phần Angular. Các mẫu có thể được xác định nội tuyến bằng cách sử dụng thuộc tính mẫu là:

Bản mẫu:

My sample Template

Hoặc có thể được gọi từ một tệp HTML khác bằng cách sử dụng thuộc tính URL của @Component decorator -

templateUrl: 'app/app.component.html' 

Câu hỏi: Biểu thức góc khác với biểu thức Javascript như thế nào?

Trả lời: Cả hai đều tương tự nhau và có thể có toán tử, biến và nghĩa đen. Tuy nhiên, một số khác biệt giữa cả hai là -

Biểu thức gócBiểu thức JavaScript
Không thể sử dụng các điều kiện, ngoại lệ và vòng lặp (câu lệnh điều khiển)Tất cả các câu lệnh kiểm soát có thể được sử dụng
Không thể sử dụng biểu thức chính quyRegex được sử dụng rộng rãi
Bộ lọc có thể được sử dụng trong chính biểu thức để dữ liệu được định dạng trước khi hiển thịMột khái niệm như vậy không tồn tại
Các biểu thức được đánh giá dựa trên một đối tượng phạm viCác biểu thức được đánh giá dựa trên cửa sổ chung
Đánh giá biểu thức được tha thứ cho không xác định hoặc nullNếu có vấn đề trong việc đánh giá một biểu thức hoặc thuộc tính, JS sẽ tạo ra ReferenceError hoặc TypeError.
Các hàm không thể được khai báoBất kỳ số lượng chức năng nào có thể được khai báo
Không thể sử dụng các toán tử mới, dấu phẩy, bitwise, void.Đây là những điều có thể

Bạn có thể đề cập 3-4 bất kỳ với giám khảo. Nếu họ hỏi cụ thể, bạn có thể nói điểm khác biệt cụ thể đó.

Câu hỏi: Giải thích kiến ​​trúc của Angular

Trả lời: Như chúng ta đã thấy trong Câu hỏi 2, Các thành phần, mô-đun, mẫu, v.v. là các khối xây dựng chính của Angular. Tất cả những điều này một lần nữa dựa trên NgModules, cung cấp bối cảnh biên dịch cho các thành phần. Khi được hỏi trong cuộc phỏng vấn, bạn có thể nói về các yếu tố cơ bản cần thiết và sau đó vẽ sơ đồ sau (nguồn: tài liệu góc ) để mô tả mối quan hệ giữa mỗi -

Bạn có thể thấy rằng dạng xem được chứa trong mẫu và các thuộc tính được liên kết từ các thành phần đến mẫu. Các dịch vụ DI được bơm vào các bộ phận theo yêu cầu. Chỉ thị được thêm vào mô hình. Mô-đun chứa logic cốt lõi như dịch vụ, giá trị, chức năng và thành phần.

Câu hỏi: Hãy cho chúng tôi biết một số điểm khác biệt giữa thành phần và chỉ thị

Trả lời: Thành phần là một loại chỉ thị cụ thể, có một khung nhìn.

Thành phầnChỉ thị
Để đăng ký thành phần, Chú thích được sử dụng là @Component@Directive được sử dụng để đăng ký một chỉ thị
Mục đích chính của các thành phần là chia ứng dụng phức tạp thành các phần (thành phần) nhỏ hơn, dễ quản lý hơnMục đích của `chỉ thị là tạo ra các thành phần tùy chỉnh mới có thể tái sử dụng
Mỗi phần tử DOM chỉ có thể có một thành phầnBất kỳ số lượng lệnh nào cũng có thể được sử dụng trong một phần tử DOM
Thành phần bắt buộc yêu cầu trình trang trí @View, mẫu hoặc URL mẫu để chỉ định chế độ xem.Một chỉ thị không liên quan gì đến các lượt xem

Câu hỏi: Ngôn ngữ chính được sử dụng trong Angular là gì?

Trả lời: Angular dựa trên TypeScript và HTML. HTML được sử dụng cho mẫu và TypeScript (một tập hợp siêu JavaScript) được sử dụng cho các thành phần.

Câu hỏi: Liên kết dữ liệu là gì và Các loại ràng buộc dữ liệu khác nhau là gì?

Trả lời: Liên kết dữ liệu được sử dụng để kết nối dữ liệu ứng dụng và DOM tức là các thành phần với khuôn mẫu. Chúng có thể được phân loại dựa trên hướng của luồng dữ liệu.

Hướng luồng dữ liệuKiểuSự miêu tả
Từ nguồn đến chế độ xem (một chiều)Nội suy - Thuộc tính, kiểu, lớp, thuộc tínhNội suy các giá trị được tính toán từ dữ liệu ứng dụng thành HTML
Từ ánh sáng đến nguồn (một chiều)Biến cốCho phép các ứng dụng phản hồi người dùng trong môi trường đích
Xem-nguồn-xem (hai chiều)Hai chiềuCác thay đổi trong trạng thái ứng dụng tự động được phản ánh trong chế độ xem và ngược lại. Đối với loại liên kết này, chỉ thị ngModel được sử dụng.

Câu hỏi: Giải thích sự khác biệt giữa ràng buộc một chiều và ràng buộc hai chiều

Câu trả lời:

Ràng buộc một chiềuRàng buộc hai chiều
Chế độ xem không thay đổi hoặc cập nhật tự động bất cứ khi nào có thay đổi trong mô hình dữ liệu. Mã tùy chỉnh cần được viết thủ công để phản ánh các thay đổi.Giao diện người dùng hoặc chế độ xem liên tục được cập nhật tự động khi mô hình dữ liệu thay đổi. Quá trình này tương tự như quá trình đồng bộ hóa.

Câu hỏi: Các bộ lọc khác nhau được hỗ trợ bởi Angular là gì?

Câu trả lời: 

Tên bộ lọcSự miêu tả
Chữ hoaChuyển chuỗi thành chữ hoa
Chữ thườngChuyển chuỗi thành chữ thường
NgàyChuyển đổi ngày sang định dạng được chỉ định
Tiền tệChuyển đổi số sang định dạng tiền tệ
Con sốĐịnh dạng số thành một chuỗi
Đặt bởiSắp xếp một mảng theo biểu thức cụ thể
giới hạnGiới hạn mảng thành số phần tử được chỉ định; chuỗi thành số ký tự được chỉ định
JSONĐịnh dạng đối tượng thành chuỗi JSON
Bộ lọcA chọn một tập hợp con các mục từ mảng

Bạn có thể đề cập đến một vài trong số chúng và cũng đưa ra một ví dụ -

Amount: {{ amount | currency }}

Câu hỏi: Ngmodules là gì? Phân biệt giữa các mô-đun Javascript và các mô-đun

Trả lời: NgModule được giới thiệu sau Angular 2, để cho phép các nhà phát triển khai báo tất cả các mối quan hệ ở một nơi với siêu dữ liệu. Như vậy, nói ngắn gọn, NgModules được xây dựng từ siêu dữ liệu mô tả các thành phần, dịch vụ, chỉ thị, đường ống, v.v. Sau đó Angular tạo ra một nhà máy sản xuất thành phần, một lớp tạo ra các thành phần.

Sự khác biệt giữa mô-đun JS và NgModules -

Mô-đun JSNgModules
Giới hạn tất cả các lớpChỉ giới hạn các lớp có thể khai báo
Tất cả các lớp thành viên được xác định trong một tệp duy nhấtCác lớp của mô-đun được liệt kê trong danh sách @ NgModule.decl Tuyên bố
Không thể mở rộng toàn bộ ứng dụng với các dịch vụToàn bộ ứng dụng có thể được mở rộng với các dịch vụ sử dụng danh sách @ NgModules.providers để thêm nhà cung cấp
Có thể nhập hoặc xuất bất kỳ loại lớp nàoNó chỉ có thể nhập hoặc xuất những lớp có thể khai báo mà nó sở hữu hoặc nhập từ các mô-đun khác.

Câu hỏi: NgIf và ngFor là gì? Bạn có thể chỉ ra một ví dụ nhỏ để sử dụng chúng không?

Trả lời: Cũng giống như if và for trong các ngôn ngữ khác, ngIf và ngFor được sử dụng làm câu lệnh điều khiển. Thí dụ -

Chỉ hiển thị điều này nếu "display" Boolean là true

Nơi hiển thị là boolean với giá trị true hoặc false. Tìm hiểu thêm về ngIf.

ngFor được sử dụng để lặp qua và hiển thị các phần tử của một mảng (tập dữ liệu).

{{student.name}}

{{i}}

Phần thứ hai (i = index) là tùy chọn và chỉ cần thiết nếu bạn muốn hiển thị chỉ mục.

Câu hỏi: Phiên bản mới nhất của Angular là gì? Các tính năng mới trong đó là gì?

Trả lời: Phiên bản mới nhất là Angular 8. Một số tính năng là -

  • Hỗ trợ cho TypeScript 3.4.
  • Nhập động cho các tuyến lười.
  • Công nhân web.
  • Tải khác biệt cho mã ứng dụng.
  • Giới thiệu Angular Ivy - cải thiện kích thước tải trọng, khả năng tương thích ngược, thời gian xây dựng lại nhanh hơn, gỡ lỗi dễ dàng hơn, v.v.

Câu hỏi: Thành phần là gì?

Trả lời: Thành phần là một đoạn mã logic. Thành phần bao gồm mẫu (chứa HTML (hoặc URL) cần được hiển thị), lớp (lớp xác định thuộc tính và phương thức hỗ trợ chế độ xem) và siêu dữ liệu (được xác định bằng decorator).

Thí dụ -

@Component ({ selector: 'my-app', template: `

{{appTitle}}

What is your name?
, })

Câu hỏi: Có cách nào để chuyển đổi mã Typecript thành mã Javascript không? Nó được hoàn thành như thế nào?

Trả lời: Có, việc chuyển đổi TypeScript thành JavaScript được gọi là chuyển đổi.

Câu hỏi: Chu kỳ tiêu hóa là gì?

Trả lời: Chu kỳ tiêu hóa là quá trình theo dõi danh sách theo dõi để theo dõi những thay đổi trong giá trị của biến đồng hồ. Chu kỳ thông báo được kích hoạt ngầm, nhưng chúng tôi cũng có thể kích hoạt nó theo cách thủ công bằng cách sử dụng hàm $ apply ().

Câu hỏi: Ống là gì? Viết một mã đơn giản để chứng minh.

Trả lời: Pipe (|) được sử dụng để biến đổi dữ liệu đầu vào thành định dạng mong muốn. Ví dụ,

Price is {{ price | currency }}

Câu hỏi: Bạn có thể tạo một đường ống được tham số hóa trong ví dụ trên không?

Trả lời: Có,

Price is {{ price | currency : “USD$” : 0.00 }}

Câu hỏi: Giải thích cách bạn có thể xâu chuỗi ống

Trả lời: Chúng tôi có thể thêm bất kỳ số lượng bộ lọc nào bằng cách sử dụng đường ống -

Average is {{ average | uppercase | number}}

Câu hỏi: Có thể tạo một đường ống tùy chỉnh không? Làm sao?

Trả lời: Có, chúng tôi có thể tạo đường ống tùy chỉnh.

  • Siêu dữ liệu ống @Pipe decorator có thể được nhập từ thư viện Angular cốt lõi
  • Pipe là một lớp được trang trí bằng siêu dữ liệu ở trên (@Pipe ({name: 'myCustomPipe'}))
  • Bước tiếp theo là xác định phép biến đổi. Đối với điều này, lớp ống nên thực hiện phương thức biến đổi () của lớp PipeTransform.
  • Chỉ định tên đường ống trong mã chính

Size: {{number | myCustomPipe: 'Error'}}

Câu hỏi: Mục đích của một ống không đồng bộ là gì?

Trả lời: Đường ống không đồng bộ đăng ký một lời hứa hoặc một lời hứa có thể quan sát được và trả về giá trị mới nhất. Nếu một giá trị mới được phát ra, đường ống đánh dấu thành phần cần được kiểm tra xem có bất kỳ thay đổi nào không.

observable|async 

Câu hỏi: Sự khác biệt giữa ống tinh khiết và không tinh khiết là gì?

Câu trả lời:

Ống tinh khiếtĐường ống không tinh khiết
Không bị ảnh hưởng bởi trạng thái bên trongCó thể tạo ra các đầu ra khác nhau cho cùng một đầu vào dựa trên trạng thái bên trong
Có thể được chia sẻ với nhiều trường hợp khác nhauNó không thể được chia sẻ vì trạng thái bên trong có thể bị ảnh hưởng bởi bất kỳ yếu tố nào.

Câu hỏi: Giải thích tầm quan trọng của HttpClient.

Trả lời: HttpClient là một Http API đơn giản hóa cho các ứng dụng Angular. Nó cung cấp các API có thể quan sát tốt hơn, cơ chế xử lý lỗi tốt hơn, khả năng kiểm tra, đánh chặn yêu cầu và phản hồi, các đối tượng yêu cầu và phản hồi đã nhập. HttpClientAPI nằm trên giao diện XMLHttpRequest được trình duyệt hiển thị.

Câu hỏi: Angular Router hoạt động như thế nào?

Trả lời: Bộ định tuyến Angular diễn giải một URL của trình duyệt dưới dạng các lệnh để điều hướng đến chế độ xem do máy khách tạo. Bộ định tuyến được liên kết với các liên kết trên một trang. Bằng cách này, Angular biết cách điều hướng chế độ xem ứng dụng đến trang được yêu cầu khi người dùng nhấp vào nó.

Câu hỏi: Sự kiện Điều hướng Bộ định tuyến là gì?

Trả lời: Các sự kiện điều hướng của bộ định tuyến giúp theo dõi vòng đời của một tuyến đường. Đó là -

  • Điều hướng Bắt đầu,
  • RouteConfigLoadStart,
  • RouteConfigLoadEnd,
  • RoutesRecognized,
  • GuardsCheckStart,
  • ChildActivationStart,
  • Kích hoạt Bắt đầu,
  • GuardsCheckEnd,
  • ResolveStart,
  • ResolveEnd,
  • ActivationEnd
  • ChildActivationEnd
  • NavigationEnd,
  • Điều hướng Hủy bỏ,
  • NavigationError
  • Cuộn

Câu hỏi: Mô-đun Định tuyến có bắt buộc đối với một ứng dụng không?

Trả lời: Không, hoàn toàn có thể bỏ qua mô-đun định tuyến nếu có cấu hình đơn giản.

Câu hỏi: Tuyến ký tự đại diện là gì?

Trả lời: Tuyến ký tự đại diện có đường dẫn bao gồm hai dấu hoa thị (**) có thể khớp với bất kỳ URL nào. Sẽ rất hữu ích khi một URL không khớp với bất kỳ tuyến nào được xác định trước. Thay vì đưa ra lỗi, chúng ta có thể sử dụng một tuyến ký tự đại diện và xác định một thành phần cho cùng một thành phần.

Câu hỏi: Giải thích các móc vòng đời

Tập hợp các quy trình mà Angular trải qua từ khi bắt đầu cho đến khi kết thúc cùng nhau được gọi là các móc vòng đời.

ngOnChangesPhương thức này được gọi khi giá trị của thuộc tính liên kết dữ liệu thay đổi
ngOnInitĐiều này được gọi bất cứ khi nào việc khởi tạo chỉ thị / thành phần xảy ra.
ngDoCheckPhương pháp này là để phát hiện và thực hiện hành động đối với những thay đổi mà Angular sẽ không tự phát hiện ra.
ngAfterContentInitĐiều này được gọi để phản hồi sau khi Angular chiếu bất kỳ nội dung bên ngoài nào vào khung nhìn của thành phần.
ngAfterContentCheckedĐiều này được gọi để phản hồi sau khi Angular kiểm tra nội dung được chiếu vào thành phần.
ngAfterViewInitĐiều này được gọi để phản hồi sau khi Angular khởi tạo các khung nhìn của thành phần và các khung nhìn con.
ngAfterViewCheckedĐiều này được gọi để phản hồi sau khi Angular kiểm tra các khung nhìn của thành phần và các khung nhìn con.
ngOnDestroyĐây là quá trình dọn dẹp được thực hiện trước khi Angular phá hủy chỉ thị / thành phần.

Câu hỏi: Hoạt ảnh được thực hiện như thế nào trong Angular?

Trả lời: Để sử dụng mô-đun hoạt ảnh, nó phải được kích hoạt. Đối với điều này, BrowserAnimationModule phải được nhập.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; After this, import the required animation functions into the component files. Example, import { state, animate, transition, // ... } from '@angular/animations';


Tiếp theo, thêm thuộc tính siêu dữ liệu hoạt ảnh trong trình trang trí @Component () trong tệp thành phần.

@Component({ selector: 'app-root', templateUrl: 'app.component.html', animations: [ // animation triggers go here ] })


Câu hỏi: Các Quốc Gia Chuyển Đổi Đặc Biệt Là Gì?

Trả lời: Các trạng thái chuyển đổi đặc biệt là ký tự đại diện (*) và void. Ký tự đại diện khớp với bất kỳ trạng thái hoạt ảnh nào. Trạng thái trống được sử dụng để định cấu hình chuyển tiếp cho các phần tử vào hoặc rời trang.

Câu hỏi: Làm thế nào bạn có thể vô hiệu hóa tất cả các hoạt ảnh trong Angular?

Trả lời: Để tắt tất cả các hoạt ảnh, hãy đặt liên kết máy chủ lưu trữ @ .disabled lên thành phần Angular trên cùng.

  1. Giải thích các bước để tạo hoạt ảnh có thể sử dụng lại.

Để tạo hoạt ảnh có thể được sử dụng lại, hãy sử dụng phương thức animation () và xác định hoạt ảnh trong một tệp .ts riêng biệt. Khai báo hoạt ảnh này dưới dạng biến xuất const. Sau đó, điều này có thể được nhập và sử dụng lại trong bất kỳ thành phần ứng dụng nào sử dụng API useAnimation (). Kiểm tra một ví dụ trên trang web Angular .

Câu hỏi: Đề cập đến một số chức năng giúp kiểm soát chuỗi hoạt ảnh phức tạp

Câu trả lời:

truy vấn()tìm một hoặc nhiều phần tử HTML bên trong trong phần tử hiện tại đang được làm động trong chuỗi
loạng choạng ()áp dụng độ trễ xếp tầng (khoảng cách thời gian) sau mỗi hoạt ảnh
nhóm()chạy song song nhiều bước hoạt ảnh.
sự nối tiếp()chạy các bước hoạt ảnh lần lượt (tuần tự)

Câu hỏi: Giải thích các tính năng của biểu mẫu trong Angular.

Trả lời:  Có hai cách tiếp cận để xử lý dữ liệu biểu mẫu (đầu vào của người dùng) - phản ứng và hướng theo mẫu.

Biểu mẫu phản ứng có thể được sử dụng khi bạn đang sử dụng các mẫu phản ứng trong ứng dụng của mình và biểu mẫu là một phần quan trọng trong ứng dụng của bạn. Các biểu mẫu này có thể mở rộng, mạnh mẽ và có thể kiểm tra được.

Biểu mẫu theo hướng mẫu được sử dụng để thêm các biểu mẫu đơn giản, ví dụ: trang đăng ký. Chúng không thể mở rộng như các biểu mẫu phản ứng và chỉ nên được sử dụng nếu các yêu cầu biểu mẫu của bạn đơn giản và tối thiểu.

Câu hỏi: Siêu dữ liệu được biểu diễn như thế nào trong Angular?

Trả lời:  Siêu dữ liệu được biểu diễn bằng cách sử dụng trình trang trí như trình trang trí lớp, trình trang trí thuộc tính, trình trang trí phương thức, trình trang trí thuộc tính. Ví dụ, @Component, @NgModule, v.v.…

Câu hỏi: Trình trang trí lớp trong Angular là gì?

Trả lời: Trình  trang trí lớp chứa siêu dữ liệu của loại lớp phù hợp. Nó xuất hiện ngay trước định nghĩa lớp và khai báo lớp thuộc một kiểu nhất định. Một số trình trang trí lớp là - @Component, @NgModule, @Pipe, @Directive, @Injectable.

Câu hỏi: Giải thích sự khác biệt giữa chú thích và trang trí trong Angular

Trả lời:  Chú thích là tính năng được mã hóa cứng của Angular và lưu trữ mảng trong đó. Trình biên dịch tạo thuộc tính am của lớp chú thích và khởi tạo một đối tượng có cùng tên, truyền siêu dữ liệu cho phương thức khởi tạo.

Mặt khác, Decorator là chức năng tiếp nhận đối tượng được trang trí. Sau khi nhận được, họ có thể tự do sửa đổi đối tượng theo cách mà nó thích. Trình trang trí được thực hiện bởi trình biên dịch TypeScript.

Câu hỏi: Sự khác biệt giữa Trình trang trí lớp và Trình trang trí trường lớp là gì?

Trả lời: Trình  trang trí lớp xuất hiện ngay trước định nghĩa lớp, trong khi trình trang trí trường lớp xuất hiện ngay trước một trường trong định nghĩa lớp. Ví dụ về trình trang trí lớp là @Component, @NgModule, v.v.… Ví dụ về trình trang trí trường lớp là @Input, @Output, v.v.

Câu hỏi: Package.json là gì? Giải thích Mục đích của nó

Trả lời:  Với gói json, việc quản lý các phụ thuộc của dự án trở nên dễ dàng. Chúng tôi có thể đề cập đến các chi tiết như phiên bản, ngôn ngữ, v.v. trong package.json. Ví dụ: nếu typecript được sử dụng trong dự án của chúng tôi, chúng ta có thể đề cập đến typecript và phiên bản của nó trong package.json. Ví dụ như metadata.json, tsconfig.json, v.v.…

Câu hỏi: {{}} Đại diện cho Điều gì? Cái này được dùng để làm gì? Hiển thị một ví dụ

Trả lời: Dấu ngoặc nhọn kép thể hiện phép nội suy. Nó là một cú pháp đặc biệt. Angular chuyển nó thành ràng buộc tài sản. Bạn có thể coi nó như một sự thay thế để ràng buộc tài sản. Tên của thành phần được viết bên trong dấu ngoặc nhọn bên trong. Trong quá trình thực thi, tên được thay thế bằng giá trị chuỗi thực của thuộc tính. Ví dụ,

{{apptitle}}

Angular sẽ đánh giá và thay thế apptitle và imgname bằng các giá trị thực của chúng.

Câu hỏi: Biểu diễn [()] Nghĩa là gì?

Trả lời: Đây là đại diện cho ngModel được sử dụng để liên kết dữ liệu hai chiều. Nó được viết là [(ngModel)] = “giá trị tài sản”.

Câu hỏi: Mô-đun Bootstrapping trong Angular là gì?

Trả lời: Mô-đun gốc mà bạn bootstrap để khởi chạy ứng dụng được gọi là mô-đun khởi động. Mọi ứng dụng Angular đều có một mô-đun bootstrapping. Nó còn được gọi là AppModule. Mô-đun bootstrapping được đề cập trong lớp AppModule.

@NgModule ({khai báo: [AppComponent], nhập: [BrowserModule, FormsModule, HttpClientModule], nhà cung cấp: [], bootstrap: [AppComponent]}) xuất lớp AppModule {}

Câu hỏi: Nói về một số khác biệt giữa lời hứa và có thể quan sát được

Câu trả lời: 

Lời hứaCó thể quan sát được
Thực thi ngay sau khi được tạoChỉ thực thi khi đăng ký bắt đầu
Được sử dụng với mệnh đề .then ()Có chuỗi và đăng ký để xử lý các ứng dụng phức tạp
Lỗi được chuyển sang lời hứa trẻ emXử lý lỗi tập trung và có thể dự đoán được bằng cách sử dụng phương thức subscribe ()
Chỉ cung cấp một giá trịCó thể cung cấp nhiều giá trị theo thời gian

Câu hỏi: Ứng dụng Trang Đơn là gì? Nó khác với công nghệ web truyền thống như thế nào?

Trả lời: Trong một ứng dụng trang đơn (SPA), chỉ trang chủ (index.html) được duy trì xuyên suốt mặc dù URL liên tục thay đổi. Nó nhanh hơn và dễ thực hiện hơn khi so sánh với công nghệ web truyền thống. Trong công nghệ truyền thống, mỗi khi người dùng đưa ra yêu cầu, yêu cầu đó sẽ được chuyển đến máy chủ. Điều này cần nhiều thời gian hơn.

Câu hỏi: Các loại biên dịch khác nhau trong Angular là gì?

Trả lời: Hai loại biên dịch - AOT (Trước thời gian) và JIT (Đúng lúc).

Câu hỏi: Liệt kê sự khác biệt giữa biên dịch Just-In-Time (JIT) và biên dịch trước thời gian (AOT)

Trả lời: Với JIT, quá trình biên dịch diễn ra trong thời gian chạy trình duyệt. Nó là cách mặc định được sử dụng bởi Angular. Các lệnh được sử dụng để biên dịch JIT là:

ng build ng serve 

Trong biên dịch AOT, trình biên dịch biên dịch mã trong quá trình xây dựng chính nó. Lệnh CLI để biên dịch aot là:

ng build --aot ng server –aot

AOT phù hợp hơn với môi trường sản xuất trong khi JIT phù hợp nhiều với sự phát triển của địa phương.

Câu hỏi: Cái nào tốt hơn ngoài AOT và JIT?

Trả lời: AOT giảm tải và thời gian khởi động của ứng dụng. Các trang cũng tải nhanh hơn. Bất kỳ lỗi nào cũng được hiển thị trong thời gian tự xây dựng ứng dụng. Do đó, AOT là một lựa chọn tốt hơn.

Câu hỏi: Thảo luận về một số khác biệt giữa Angular và Jquery. Cái nào phù hợp nhất cho một trang web phức tạp với nhiều quy trình làm việc?

Câu trả lời:

AngularjQuery
Khung giao diện người dùng dựa trên TypeScript và JavaScriptThư viện JS hỗ trợ hoạt ảnh và thao tác DOM
Có thể liên kết dữ liệu hai chiềuKhông thể thực hiện ràng buộc dữ liệu hai chiều
Xác thực biểu mẫu có thể được thực hiệnKhông có tùy chọn để xác thực biểu mẫu
Hỗ trợ các apis RESTfulKhông hỗ trợ cho RESTful apis

Đối với một trang web phức tạp với nhiều quy trình làm việc, Angular phù hợp hơn và dễ dàng hơn để phát triển và bảo trì.

Câu hỏi: Thư viện Angular là gì? Bạn có thể tạo thư viện của riêng mình trong Angular không?

Trả lời: Thư viện Angular là một tập hợp các giải pháp chung mà các nhà phát triển khác đã tập hợp lại để sử dụng lại. Chúng ta có thể tạo thư viện riêng bằng Angular. Các thư viện này có thể được xuất bản và chia sẻ dưới dạng gói npm. Một thư viện phải được nhập vào ứng dụng.

Câu hỏi: Bạn Biết gì về Gói NPM?

Trả lời: Các thành phần, khuôn khổ và CLI được sử dụng bởi các ứng dụng Angular được đóng gói dưới dạng gói npm. Các gói Npm có thể được tải xuống bằng ứng dụng khách npm CLI.

Câu hỏi: Viết mã mẫu để tạo thư viện

Trả lời: Bạn có thể sử dụng Angular CLI cho việc này. Tập hợp các lệnh sau đây tạo ra một khung thư viện mới:

ng new my-workspace --create-application=false cd my-workspace 

ng generate library my-lib 

Tóm lược

Nếu bạn muốn học Angular hoặc AngularJS, hãy xem một số hướng dẫn hay trên Youtube. Có rất nhiều câu hỏi phỏng vấn Angular và câu hỏi phỏng vấn AngularJS nhưng danh sách này bao gồm tất cả các khái niệm cơ bản và thường gặp nhất. Hãy cho chúng tôi biết trong phần nhận xét nếu bạn muốn chúng tôi thêm câu hỏi từ kinh nghiệm cá nhân của bạn vào danh sách này.


Đọc thêm

Tốt nhất của DZone: Hướng dẫn góc cạnh cho người mới bắt đầu và các chuyên gia mới bắt đầu

DZone Refcard: Angular Essentials

Bắt đầu với Angular 7.0

15 hữu ích 0 bình luận 169k xem chia sẻ

Có thể bạn quan tâm

loading