Kết nối

[AngularJS] Phần 19: API trong AngularJS

5.266 lượt xem 
 Cập nhật lần cuối: 23/09/2023 lúc 16:03:21
Thể loại: AngularJS, Thiết kế Web 

API là từ viết tắt của cụm từ “Application Programming Interface” (tiếng Việt là Giao diện Lập trình Ứng dụng) là một tập các định nghĩa chương trình con, các giao thức và các công cụ để xây dựng phần mềm ứng dụng. API chứa tập các phương thức được định nghĩa rõ ràng để liên lạc giữa các thành phần phần mềm khác nhau. API cũng cung cấp việc truy xuất dữ liệu của một hệ điều hành, ứng dụng và các dịch vụ khác.

API toàn cục (Global API)
API toàn cục trong AngularJS là một tập các hàm JavaScript toàn cục để thực thi các tác vụ chung, chẳng hạn:

  • So sánh đối tượng
  • Lặp lại đối tượng
  • Chuyển đổi dữ liệu

Các hàm API toàn cục được truy xuất bằng cách dùng đối tượng angular. Sau đây là danh sách một số hàm API phổ biến:

  • angular.lowercase(): chuyển một chuỗi thành chữ thường
  • angular.uppercase(): chuyển một chuỗi thành chữ HOA
  • angular.isString(): trả về true nếu đối tượng tham chiếu là 1 chuỗi
  • angular.isNumber(): trả về true nếu đối tượng tham chiếu là 1 số

Để xem toàn bộ các hàm API trong AngularJS, bạn có thể tham khảo ở đây: https://docs.angularjs.org/api/ng/function

Hàm angular.lowercase()
Hàm này dùng để chuyển đổi một chuỗi thành chữ thường, ví dụ chuyển “DAMMIO” thành “dammio”.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "DAMMIO";
    $scope.x2 = angular.lowercase($scope.x1);
});
</script>

</body>
</html>

Hàm angular.uppercase()
Hàm này dùng để chuyển đổi một chuỗi thành chữ thường, ví dụ chuyển “dammio” thành “DAMMIO”.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "dammio";
    $scope.x2 = angular.uppercase($scope.x1);
});
</script>

</body>
</html>

Hàm angular.isString()
Kiểm tra đối tượng tham chiếu có phải là kiểu chuỗi. Ví dụ sau kiểm tra “DAMMIO” có phải là kiểu chuỗi, nếu đúng xuất true, ngược lại false.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "DAMMIO";
    $scope.x2 = angular.isString($scope.x1);
});
</script>

</body>
</html>

Hàm angular.isNumber()
Kiểm tra đối tượng tham chiếu có phải là kiểu số. Ví dụ sau kiểm tra “DAMMIO” có phải là kiểu chuỗi, nếu đúng xuất true, ngược lại false.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "DAMMIO";
    $scope.x2 = angular.isNumber($scope.x1);
});
</script>

</body>
</html>

Kết luận: Bài viết đã hướng dẫn cho bạn khái niệm API, cách sử dụng API trong AngularJS thông qua 1 số ví dụ đơn giản.

Liên quan:  [AngularJS] Phần 16: Sự kiện AngularJS
Trích dẫn bài viết
  • APA:
    Dammio. (2017). [AngularJS] Phần 19: API trong AngularJS. https://www.dammio.com/2017/09/11/angularjs-phan-19-api-trong-angularjs.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[AngularJS] Phần 19: API trong AngularJS},
    year = {2017},
    url = {https://www.dammio.com/2017/09/11/angularjs-phan-19-api-trong-angularjs},
    urldate = {2024-03-14}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x