TOP 33+ Câu hỏi phỏng vấn Angular Developer hay gặp

Các câu hỏi phỏng vấn Angular intern, fresher

Nhóm câu hỏi phỏng vấn Angular fresher phù hợp với các ứng viên có dưới 1 năm kinh nghiệm. Các câu hỏi tập trung vào kiến thức cơ bản, định nghĩa, khái niệm của các thành phần, thuộc tính, quy trình của Angular.

1. Angular Framework là gì? 

Angular là một framework mã nguồn mở dựa trên TypeScript, giúp dễ dàng xây dựng các ứng dụng web, thiết bị di động và máy tính để bàn. Các tính năng chính của khung này bao gồm các mẫu khai báo, tính năng chèn phụ thuộc, công cụ end to end giúp dễ dàng phát triển ứng dụng. Angular hiện đang được duy trì và phát triển bởi Google.

2.  AngularJS và Angular có phải là một không?

Không, Angular và AngularJS là hai framework khác nhau, đều được phát triển bởi Google.

AngularJS được đề cập để chỉ phiên bản Angular 1 viết bằng ngôn ngữ chính là JavaScript. Trong khi đó Angular dùng để chỉ các phiên bản Angular 2 trở lên, viết bằng TypeScript.  Dưới đây là một số điểm khác biệt của Angular và AngularJS:

3. TypeScript là gì?

TypeScript là một siêu tập hợp JavaScript phát triển bởi Microsoft, bổ sung type, class, async/await và nhiều tính năng khác, đồng thời biên dịch thành JavaScript đơn giản. Angular được viết hoàn toàn bằng TypeScript như ngôn ngữ chính. Bạn có thể cài đặt TypeScript bằng câu lệnh:

npm install -g typescript

Ví dụ về cách dùng TypeScript dưới đây:

function greeter(person: string) {

    return "Chào, " + person;

}

let user = "Sudheer";

document.body.innerHTML = greeter(user);

4. Các thành phần chính của Angular là gì?

Angular các component chính là:

• Component: Đây là các block dựng cơ bản của ứng dụng Angular để kiểm soát HTML views.
• Modules: Là một tập hợp các block xây dựng cơ bản như thành phần, lệnh (directives), dịch vụ,... Một ứng dụng được chia thành các phần logic và mỗi phần code được gọi là module, nó chỉ thực hiện các task đơn lẻ.
• Templates: Cho thấy views của một ứng dụng Angular.
• Services: Được dùng để tạo các thành phần có thể được chia sẻ trên toàn bộ ứng dụng.
• Metadata: Dùng để thêm nhiều dữ liệu hơn vào Angular class.

5. Ta dùng hàm nào trong lifecycle hook của Angular để bắt sự kiện page đã render (kết xuất) xong?

Để bắt sự kiện page đã render xong, ta dùng hàm ngAfterViewChecked.

6. Phân biệt let và var?

let và vả đều được dùng để khai báo biến trong JavaScript. Nhưng chúng có các điểm khác biệt rõ rệt, cụ thể:

let: Là scope block, không được hosting lên đầu hàm, không cho phép khai báo biến trong cùng một phạm vi, cho phép gán lại biến.

var: Là function scope, được hosting lên đầu hàm, tạo ra property của global object, cho phép tái khai báo biến trong cùng một phạm vi, nhưng chỉ được gán lại biến trong lần đầu tiên.

7. CodeLyzer là gì?

Codelyzer là một công cụ linting mã nguồn mở có nền tảng là TSLint, dùng để xác thực các dự án Angular TypeScript 3.4 có tuân theo bộ quy tắc linting hay không, phát hiện lỗi và cảnh báo trong code Angular TypeScript, đảm bảo chất lượng của chương trình.

8. Cách để Angular phát hiện giá trị binding thay đổi là gì?

Dùng change detection để so sánh giá trị hiện tại với giá trị trước đó. Ta cũng có thể dùng thư viện zone.js.

9. Hãy liệt kê các operator bạn từng sử dụng của thư viện RxJS?

Một số operator đã từng dùng của RxJS như:

• map
• switchMap
• mergeMap
• of
• tap
• catchError
• …

10. Bạn biết những gì về Directives trong Angular?

Directives (hướng dẫn) là thuộc tính quan trọng cho phép người dùng viết cú pháp HTML mới dành riêng cho ứng dụng, cũng cho phép mở rộng và điều khiển cách các phần tử DOM hoạt động và hiển thị. Có 2 loại directives trong Angular là: Structural Directives (Hướng dẫn cấu trúc) và Attribute Directives (Hướng dẫn thuộc tính).

Ngoài các câu hỏi kèm câu trả lời phía trên, bạn có thể tham khảo thêm một số câu hỏi phỏng vấn Angular theo chủ đề dưới đây:

• Angular có ưu điểm gì đối với dự án phát triển ứng dụng?
• Nhược điểm của Angular?
• Angular CLI là gì? Cách để dùng CLI?
• Bạn hiểu về template trong Angular thế nào?
• Các kiến trúc của Angular
• Databinding One-way & two-way khác nhau thế nào?
• ngModule là gì?
• Component là gì?
• Nhận định có thể chuyển mã TypeScript thành mã JavaScript có đúng không? Nếu đúng thì chuyển bằng cách nào?
• Bạn hãy mô tả tóm tắt vòng đời của một component?
• Phân biệt Promise và Observable
• Biên dịch AOT là gì?
• AOT có ưu điểm gì?
• Bạn hãy nêu khái niệm Front-end & backend
• Dùng câu lệnh nào để khởi tạo một dự án Angular?
• Bạn dùng câu lệnh nào để chạy một dự án Angular?
• Typescript có các kiểu dữ liệu nào?
• Các vòng lặp được typescript hỗ trợ gồm những loại nào?
• ngFor là gì?
• ngIf là gì?
• Bạn tạo form trong Angular bằng cách nào?
• Router trong Angular có tác dụng?
• Có thể lấy tham số trên URL trong Angular bằng cách nào?
• Có thể kiểm tra người dùng có quyền truy cập vào 1 route hay không?
• Lazy-loading là gì?
• Angular Component và Module khác nhau thế nào?
• Service trong Angular là gì?
• ngShow và ngHide khác nhau thế nào?
• Phân biệt @Component và @Directive
• Làm thế nào để chạy unit test trong Angular?
• Thẻ base href là gì?
• Interpolation là gì ?
• …

Câu hỏi phỏng vấn Angular cho người có kinh nghiệm

Nhà tuyển dụng dùng nhóm câu hỏi phỏng vấn Angular nâng cao để đánh giá kỹ hơn kiến thức và khả năng ứng dụng của ứng viên thuộc level junior, senior, có kinh nghiệm trên 3 năm làm việc trực tiếp với framework Angular.

1. Bạn phân loại data binding như thế nào?

Các loại binding được chia ra làm 3 nhóm theo hướng của data flow, bao gồm:

• Từ source-to-view
• Từ view-to-source
• View-to-source-to-view

Cú pháp Binding và kiểu cụ thể hãy theo dõi bảng dưới đây:

2. Pipes là gì?

Pipes là các hàm đơn giản sử dụng template expressions để nhận dữ liệu đầu vào và chuyển đổi nó thành đầu ra như mong muốn. Pipes thường được dùng để thực hiện các tác vụ như định dạng ngày tháng, chuyển đổi đơn vị, hiển thị dữ liệu theo dạng cụ thể,... giúp ứng dụng web trở nên đẹp mắt và dễ sử dụng hơn.

Ví dụ lấy pipe để thuộc tính của birthday của thành phần chuyển thành định dạng ngày thân thiện với người dùng bằng việc sử dụng date pipe:

import { Component } from '@angular/core';

@Component({

  selector: 'app-birthday',

  template: `<p>Birthday is {{ birthday | date }}</p>`

})

export class BirthdayComponent {

  birthday = new Date(1997, 6, 20); // June 20, 1997

3. HttpClient là gì và nó có lợi ích gì?

Trong các ứng dụng, hầu hết front-end giao tiếp với backend qua giao thức HTTP bằng  XMLHttpRequest interface hoặc fetch() API. Angular cung cấp client HTTP API được đơn giản hoá gọi là HttpClient dựa trên XMLHttpRequest interface. HttpClient có sẵn trong @angular/common/http package.

Ta có thể nhập vào module gốc của mình bằng lệnh:

import { HttpClientModule } from '@Angular/common/http';

HttpClient có rất nhiều ưu điểm, cụ thể:

• Chứa các tính năng kiểm tra
• Cung cấp đối tượng được yêu cầu và phản hồi 
• Chặn yêu cầu và phản hồi
• Hỗ trợ API Observable
• Hỗ trợ xử lý lỗi

4. Bạn thực hiện xử lý lỗi (Error handling) thế nào?

Nếu yêu cầu không thành công trên máy chủ hoặc không truyền dữ liệu được đến máy chủ do sự cố mạng thì HttpClient sẽ trả về một đối tượng lỗi. Trường hợp này xử lý bằng cách chuyển đối tượng error thành dạng second callback cho phương thức subscribe().

Ví dụ:

fetchUser() {

  this.userService.getProfile()

    .subscribe(

      (data: User) => this.userProfile = { ...data }, // success path

      error => this.error = error // error path

    );

}

5. AOT là gì? Lợi ích của AOT

Trình biên dịch Ahead-of-time (AOT) là quá trình biên dịch code Angular HTML và TypeScript thành code JavaScript thuần tuý trước khi ứng dụng được tải xuống trình duyệt.

AOT có một số lợi ích như:

• Tăng tốc độ tải trang
• Giảm dung lượng ứng dụng bằng việc loại bỏ các code không cần thiết.
• Tăng hiệu suất ứng dụng bằng cách tối ưu hoá CPU.

6. Hãy liệt kê các hàm Angular Global API phổ biến

Một số hàm Angular Global API thường được sử dụng là:

• Angular.isString: Chỉ trả về true nếu reference đã cho có kiểu chuỗi.
• Angular.lowercase: Chuyển đổi bất kỳ chuỗi (string) nào thành chữ thường
• Angular.uppercase: Chuyển đổi bất kỳ chuỗi (String) nào thành chữ hoa.
• Angular.isNumber: Chỉ trả về true nếu tham chiếu (reference) là giá trị số hoặc số.

Bạn có thể tham khảo thêm các chủ đề, câu hỏi phỏng vấn Angular Developer level senior dưới đây để chuẩn bị kỹ hơn cho buổi phỏng vấn:

• Phân biệt Promise và Observable
• Tại sao lại dùng ngOnInit trong khi đã có constructor?
• Declarations, providers và import trong NgModule khác nhau thế nào?
• Codelyzer được dùng với mục đích gì?
• Theo bạn, khi nào nên dùng eager module để loading?
• Wildcard route được dùng với mục đích gì?
• Component dynamic (component động) là gì?
• Cách để error handling trong Observable?
• Multicasting là gì?
• Hãy mô tả vòng đời hook component và directive
• Các để phát hiện ra Route thay đổi?
• Dùng local storage để thay thế cookie có ổn không?
• Phương thức detectChanges có tác dụng gì trong Jasmine test?
• Reactive Programming là gì? Có liên quan đến Angular không?
• Làm thế nào để bảo mật code trong Angular? Bạn có thể đưa ra một vài ví dụ về bảo mật code không?
• Incremental Dom và Virtual Dom có giống nhau không?
• Service Worker trong Angular có tác dụng gì?
• …

Câu hỏi phỏng vấn kỹ năng Angular

Ngoài những câu hỏi phỏng vấn Angular lý thuyết, một số người phỏng vấn chuyên môn sẽ đưa ra một số tình huống hoặc bài tập thực hành để sàng lọc ứng viên ưu tú, có tư duy và EQ cao. Dưới đây là một số câu hỏi phỏng vấn kỹ năng bạn có thể luyện tập:

1. Bạn hãy viết chương trình khởi động quá trình trong Angular

Chương trình cơ bản cho quá trình khởi động trong Angular là:

<html>

    <body ng-app="TestApp">

        <div ng-controller="Ctrl">Xin chào{{msg}}!</div>

        <script src="https://ajax.googleapis.com/ajax/libs/Angularjs/1.7.8/angular.min.js">

</script>

        <kịch bản>

            var test = angular.module('TestApp', []);

            test.controller('Ctrl', function($scope) {

                $scope.msg = 'Chào';

            });

        </script>

    </body>

</html>

2. Tại sao TypeScript được ưu tiên hơn JavaScript trong Angular?

TypeScript là bản thân vẫn là JavaScript, nhưng được cải tiến hơn với các tính năng bổ sung như đánh máy cho các biến, chú thích và phạm vi biến,... Về cơ bản, TypeScript có nhiều ưu điểm hơn JavaScript khi sử dụng trong Angular như:

• Tính an toàn: Giảm số lỗi và cải thiện chất lượng code.
• Tính hiệu quả: Vẫn có thể được chuyển sang JavaScript để tối ưu hiệu suất ứng dụng.
• Dễ sử dụng: TypeScript hoàn toàn tương thích với JavaScript.

Câu hỏi phỏng vấn Angular về TypeScript thường sẽ là câu kết cho buổi phỏng vấn chuyên môn. Theo kinh nghiệm là vậy thôi, chứ chúng ta vẫn nên luyện tập hết các câu hỏi khác nữa. Ví dụ như:

• Bạn đã từng gặp phải lỗi dự án khiến ảnh hướng đến các bên liên quan chưa? Trong trường hợp ấy bạn xử lý thế nào? 
• Bạn có thể kể về dự án làm web phức tạp mà bạn đã tham gia được chứ?
• Bạn đã hoàn thành dự án web đó như thế nào?
• …

Cần chuẩn bị gì cho buổi phỏng vấn Angular

Luyện tập với các câu hỏi phỏng vấn Angular là chưa đủ. Chỉ biết kiến thức và làm chuyên môn có thể là một cái cân lệch. Và điều đó thì không thực sự thuyết phục được nhà tuyển dụng. Đó là lý do bạn cũng nên trau dồi cho mình các kỹ năng khác, cũng như luyện tập mỗi ngày để tăng EQ, AQ và kỹ năng giao tiếp. Nhớ nhé, luyện tập hàng ngày chứ không nên chỉ khi sắp tới đợt phỏng vấn mới cố gắng ghi nhớ.

Dưới đây là các kinh nghiệm phỏng vấn và các điều cần lưu ý trong buổi phỏng vấn front-end Angular:

• Tìm hiểu về thị trường, xu hướng công nghệ về lập trình front-end, Angular và  thông tin về công ty, vị trí công việc bạn ứng tuyển.
• Luyện trả lời phỏng vấn trước gương hoặc luyện tập trao đổi với bạn bè.
• Tham khảo trước các câu hỏi phỏng vấn Angular về tình huống khi làm dự án, tình huống trong môi trường công sở nói chung.
• Sẵn sàng cho các câu hỏi thực hành lập trình front-end Angular.
• Hãy chuẩn bị các câu hỏi cho nhà tuyển dụng. Những câu hỏi này nên liên quan tới công việc, phù hợp với vị trí ứng tuyển.
• Chuẩn bị bút và sổ cho buổi phỏng vấn.
• Chuẩn bị một nụ cười tự tin và tinh thần thoải mái trước khi vào phòng phỏng vấn.
• …

Kinh nghiệm tìm việc IT Angular thu nhập hấp dẫn

Một số tip để có thể tìm được công việc lập trình Angular, lập trình front-end thu nhập hấp dẫn, lựa chọn được công ty uy tín, chế độ tốt mà bạn có thể tham khảo dưới đây:

• Tìm kiếm thông qua network của cá nhân, tức là được giới thiệu từ những người quen làm trong ngành IT.
• Tìm kiếm việc làm IT trên website của ITnavi (itnavi.com.vn) với 198+ việc làm Angular được cập nhật liên tục từ các công ty công nghệ hàng đầu tại Hà Nội, Hồ Chí Minh, Đà Nẵng,...

Trên đây là các câu hỏi phỏng vấn Angular developer được nhà tuyển dụng hỏi nhiều nhất. Chúng tôi sẽ liên tục cập nhật thêm các câu hỏi và câu trả lời chi tiết về Angular front-end để hỗ trợ bạn tốt nhất cho buổi phỏng vấn sắp tới. Chúc bạn sẽ nhận được offer công việc như ý!