Biểu thức Angular JS là gì?
Biểu thức là các biến được xác định trong dấu ngoặc kép {{}}. Chúng rất thường được sử dụng trong Angular JS và bạn sẽ thấy chúng trong các hướng dẫn trước đây của chúng tôi.
Trong hướng dẫn này, bạn sẽ học-
- Giải thích Biểu thức Angular.js với ví dụ
- Số AngularJS
- Chuỗi AngularJS
- Đối tượng AngularJS
- Mảng AngularJS
- Các khả năng và hạn chế của AngularJS Expression
- Sự khác biệt giữa biểu thức và $ eval
Giải thích Biểu thức Angular.js bằng một ví dụ
Biểu thức AngularJS là những biểu thức được viết bên trong dấu ngoặc kép {{biểu thức}}.
Cú pháp:
Một ví dụ đơn giản về biểu thức là {{5 + 6}}.
Biểu thức Angular.JS được sử dụng để liên kết dữ liệu với HTML theo cách giống như chỉ thị ng-bind. AngularJS hiển thị dữ liệu chính xác tại nơi đặt biểu thức.
Hãy xem một ví dụ về biểu thức Angular.JS.
Trong ví dụ này, chúng tôi chỉ muốn hiển thị một phép cộng đơn giản các số dưới dạng một biểu thức.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Giải thích mã:
- Chỉ thị ng-app trong ví dụ của chúng tôi để trống như được hiển thị trong ảnh chụp màn hình ở trên. Điều này chỉ có nghĩa là không có mô-đun nào để gán bộ điều khiển, chỉ thị, dịch vụ được đính kèm với mã.
- Chúng tôi đang thêm một biểu thức đơn giản xem xét phép cộng 2 số.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rằng phép cộng hai số 9 và 6 diễn ra và giá trị cộng thêm của 15 được hiển thị.
Số Angular.JS
Biểu thức cũng có thể được sử dụng để làm việc với các con số. Hãy xem một ví dụ về biểu thức Angular.JS với số.
Trong ví dụ này, chúng tôi chỉ muốn hiển thị một phép nhân đơn giản của 2 biến số được gọi là lợi nhuận và lợi nhuận và hiển thị giá trị nhân của chúng.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Giải thích mã:
- Chỉ thị ng-init được sử dụng trong angle.js để xác định các biến và giá trị tương ứng của chúng trong chính khung nhìn. Nó giống như việc xác định các biến cục bộ để viết mã trong bất kỳ ngôn ngữ lập trình nào. Trong trường hợp này, chúng tôi đang xác định 2 biến được gọi là ký quỹ và lợi nhuận và gán giá trị cho chúng.
- Sau đó, chúng tôi sử dụng 2 biến cục bộ và nhân các giá trị của chúng.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ rằng phép nhân của 2 số 2 và 200 diễn ra, và giá trị nhân 400 được hiển thị.
Chuỗi AngularJS
Biểu thức cũng có thể được sử dụng để làm việc với chuỗi. Hãy xem một ví dụ về biểu thức Angular JS với chuỗi.
Trong ví dụ này, chúng ta sẽ xác định 2 chuỗi "firstName" và "lastName" và hiển thị chúng bằng cách sử dụng các biểu thức cho phù hợp.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Giải thích mã:
- Chỉ thị ng-init được sử dụng để xác định các biến firstName với giá trị "Guru" và biến lastName với giá trị "99".
- Sau đó, chúng tôi sử dụng các biểu thức của {{firstName}} và {{lastName}} để truy cập giá trị của các biến này và hiển thị chúng trong dạng xem tương ứng.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ kết quả đầu ra, có thể thấy rõ rằng giá trị của firstName và lastName được hiển thị trên màn hình.
Đối tượng Angular.JS
Các biểu thức cũng có thể được sử dụng để làm việc với các đối tượng JavaScript.
Hãy xem một ví dụ về biểu thức Angular.JS với các đối tượng javascript. Một đối tượng javascript bao gồm một cặp tên-giá trị.
Dưới đây là một ví dụ về cú pháp của một đối tượng javascript.
Cú pháp:
var car = {type:"Ford", model:"Explorer", color:"White"};
Trong ví dụ này, chúng ta sẽ định nghĩa một đối tượng là một đối tượng người sẽ có 2 cặp giá trị chính là "firstName" và "lastName".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Giải thích mã:
- Chỉ thị ng-init được sử dụng để xác định đối tượng lần lượt có các cặp giá trị khóa là firstName với giá trị "Guru" và biến lastName với giá trị "99".
- Sau đó, chúng tôi sử dụng các biểu thức của {{person.firstName}} và {{person.secondName}} để truy cập giá trị của các biến này và hiển thị chúng trong chế độ xem tương ứng. Vì các biến thành viên thực tế là một phần của đối tượng, chúng phải truy cập nó bằng ký hiệu dấu chấm (.) Để truy cập giá trị thực của chúng.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ giá trị của "firstName" và "secondName" được hiển thị trên màn hình.
Mảng AngularJS
Biểu thức cũng có thể được sử dụng để làm việc với mảng. Hãy xem một ví dụ về biểu thức Angular JS với mảng.
Trong ví dụ này, chúng ta sẽ xác định một mảng sẽ chứa điểm của một học sinh trong 3 môn học. Trong khung nhìn, chúng tôi sẽ hiển thị giá trị của các dấu này tương ứng.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Giải thích mã:
- Chỉ thị ng-init được sử dụng để xác định mảng có tên "mark" với 3 giá trị là 1, 15 và 19.
- Sau đó, chúng tôi đang sử dụng các biểu thức của dấu [chỉ số] để truy cập từng phần tử của mảng.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ kết quả đầu ra, có thể thấy rõ rằng các dấu đang được hiển thị, được xác định trong mảng.
Các khả năng và hạn chế của AngularJS Expression
Khả năng biểu hiện Angular.JS
- Biểu thức góc giống như biểu thức JavaScript. Do đó, nó có cùng sức mạnh và tính linh hoạt.
- Trong JavaScript, khi bạn cố gắng đánh giá các thuộc tính không xác định, nó sẽ tạo ra một ReferenceError hoặc TypeError. Trong Angular, đánh giá biểu thức được tha thứ và tạo ra một giá trị không xác định hoặc null.
- Người ta có thể sử dụng các bộ lọc bên trong các biểu thức để định dạng dữ liệu trước khi hiển thị nó.
Các hạn chế của biểu thức Angular JS
- Hiện không có khả năng sử dụng điều kiện, vòng lặp hoặc ngoại lệ trong biểu thức Angular
- Bạn không thể khai báo các hàm trong biểu thức Angular, ngay cả bên trong chỉ thị ng-init.
- Người ta không thể tạo biểu thức chính quy trong biểu thức Angular. Biểu thức chính quy là sự kết hợp của các ký hiệu và ký tự, được sử dụng để tìm các chuỗi chẳng hạn như. * \. Txt $. Các biểu thức như vậy không thể được sử dụng trong các biểu thức Angular JS.
- Ngoài ra, người ta không thể sử dụng hoặc vô hiệu trong một biểu thức Angular.
Sự khác biệt giữa biểu thức và $ eval
Hàm $ eval cho phép một người đánh giá các biểu thức từ bên trong chính bộ điều khiển. Vì vậy, trong khi các biểu thức được sử dụng để đánh giá trong khung nhìn, thì $ eval được sử dụng trong hàm bộ điều khiển.
Hãy xem một ví dụ đơn giản về điều này.
Trong ví dụ này,
Chúng ta sẽ chỉ sử dụng hàm $ eval để thêm 2 số và làm cho nó có sẵn trong đối tượng phạm vi để nó có thể được hiển thị trong khung nhìn.
Event Registration Guru99 Global Event
{{value}}
Giải thích mã:
- Đầu tiên chúng ta định nghĩa 2 biến 'a' và 'b', mỗi biến giữ giá trị 1.
- Chúng tôi đang sử dụng hàm $ scope. $ Eval để đánh giá việc bổ sung 2 biến và gán nó cho biến phạm vi 'value'.
- Sau đó, chúng tôi chỉ hiển thị giá trị của biến 'giá trị' trong chế độ xem.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Đầu ra ở trên hiển thị đầu ra của biểu thức đã được đánh giá trong bộ điều khiển. Kết quả trên cho thấy rằng biểu thức $ eval được sử dụng để thực hiện phép cộng 2 biến phạm vi 'a và b' với kết quả được gửi và hiển thị trong khung nhìn.
Tóm lược:
- Chúng ta đã thấy cách các biểu thức trong Angular JS có thể được sử dụng để đánh giá JavaScript thông thường như các biểu thức chẳng hạn như phép cộng các số đơn giản.
- Chỉ thị ng-init có thể được sử dụng để xác định các biến trong dòng có thể được sử dụng trong khung nhìn.
- Biểu thức có thể được thực hiện để làm việc với các kiểu nguyên thủy như chuỗi và số.
- Các biểu thức cũng có thể được sử dụng để làm việc với các kiểu khác như các đối tượng và mảng JavaScript.
- Các biểu thức trong Angular JS có một vài hạn chế như không có biểu thức chính quy hoặc sử dụng các hàm, vòng lặp hoặc câu lệnh điều kiện.