AngularJS – Views: Hiển thị dữ liệu và tạo giao diện người dùng

Views trong AngularJS là các template HTML được sử dụng để hiển thị dữ liệu và tạo giao diện người dùng. Chúng được liên kết với các controller để xử lý logic và cập nhật dữ liệu.

Tạo một View

Tạo một file HTML chứa nội dung mà bạn muốn hiển thị.

HTML

<div ng-app="myApp" ng-controller="MyController">
  <h1>Xin chào, {{ name }}!</h1>
</div>

Liên kết View với Controller

Sử dụng directive ng-controller để liên kết một view với một controller.

HTML

<div ng-app="myApp" ng-controller="MyController">
  </div>

Truyền dữ liệu từ Controller sang View

Sử dụng biểu thức {{ expression }} để hiển thị dữ liệu từ controller trong view.

HTML

<div ng-app="myApp" ng-controller="MyController">
  <h1>Xin chào, {{ name }}!</h1>
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.name = 'World';
  });

Sử dụng Directives để tạo giao diện

AngularJS cung cấp nhiều directive để tạo các phần tử giao diện người dùng.

HTML

<div ng-app="myApp" ng-controller="MyController">
  <input type="text" ng-model="name">
  <button ng-click="greet()">Chào!</button>
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.name = 'World';

    $scope.greet = function() {
      alert('Xin chào, ' + $scope.name + '!');
    };
  });

Các tính năng của Views

• Hiển thị dữ liệu: Hiển thị dữ liệu từ controller trong view.
• Tạo giao diện người dùng: Sử dụng các directive để tạo các phần tử giao diện.
• Liên kết với controller: Liên kết view với controller để xử lý logic.
• Tương tác với người dùng: Xử lý các sự kiện người dùng như click, submit, v.v.

Các ứng dụng của Views

• Tạo giao diện người dùng cho ứng dụng.
• Hiển thị dữ liệu từ server.
• Tương tác với người dùng.