Views trong AngularJS
- 20-04-2022
- Toanngo92
- 0 Comments
Dễ hiểu nhất, views là thứ người dùng nhìn thấy trên ứng dụng.
HTML5 code sẽ được trình duyệt render bằng trình duyệt để hiển thị cho người dùng, được gọi là view, hay là giao diện người dùng.
<!DOCTYPE html>
<html lang="en" ng-app="exampleviewApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example View AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-controller="mainController">
<h2>Hello {{name}}</h2>
<input type="text" ng-model="name" />
</body>
<script>
var exampleviewApp = angular.module('exampleviewApp', []);
exampleviewApp.controller('mainController', function($scope) {
$scope.name = 'Toanngo92';
});
</script>
</html>
Kết quả khi in ra trình duyệt
Ở ví dụ phía dưới, chúng ta thấy trình duyệt hiển thị ra chữ hello, kèm với một text box được render theo HTML code, nhìn lại cấu trúc code phía trên, chúng ta thấy bên trong body có một directive là ng-controller=”mainController”, nội dung bên trong này chính là views được trả ra cho người dùng từ controller có tên mainController trong tầng script.
Có thể có một hoặc nhiều views trong một ứng dụng angularJS tùy theo độ lớn của dự án, thông thường là nhiều views, mỗi một views sẽ là một giao diện khác nhau hiển thị để người dùng tương tác, đây là nền tảng xây dựng nên ứng dụng SPA (single page application). Vì lí do đó, angularJS rất hữu dụng trong việc xây dựng ứng dụng SPA.