JavaScript

AngularJS Controller

Posted on by Dục Đoàn Trình
Rate this post

AngularJS Controller được sử dụng để điều khiển luồng dữ liệu của ứng dụng AngularJS. Một bộ điều khiển được xác định bằng cách sử dụng chỉ thị ng-controller. Bộ điều khiển là một đối tượng JavaScript chứa các thuộc tính / thuộc tính và chức năng. Mỗi bộ điều khiển chấp nhận $scope làm tham số đề cập đến ứng dụng / mô-đun mà bộ điều khiển sẽ điều khiển.

Các bài viết liên quan:

Giới thiệu về AngularJS Controller

AngularJS Controller là một phần quan trọng trong kiến trúc MVC (Model-View-Controller) của AngularJS. Nó là một đối tượng JavaScript được sử dụng để quản lý dữ liệu và hành vi của một phần của giao diện người dùng (UI) trong ứng dụng web.

Controller có thể được sử dụng để liên kết các thành phần trong giao diện người dùng với dữ liệu và các hành động như xử lý sự kiện và gửi yêu cầu tới các dịch vụ khác. Điều này giúp tách biệt các thành phần của ứng dụng và giữ cho mã nguồn dễ bảo trì và mở rộng.

Trong AngularJS, Controller có thể được định nghĩa bằng cách sử dụng phương thức $controller hoặc thông qua việc sử dụng Directive như ng-controller. Controller cũng có thể được kết hợp với Service để tạo ra một hệ thống xử lý dữ liệu phức tạp hơn.

Việc sử dụng AngularJS Controller giúp cho việc phát triển ứng dụng web trở nên dễ dàng hơn và giúp tạo ra một mã nguồn dễ bảo trì và tái sử dụng.

Các tính năng của AngularJS Controller

AngularJS Controller cung cấp cho nhà phát triển các tính năng sau:

  1. Quản lý dữ liệu: AngularJS Controller cho phép quản lý dữ liệu trong phần giao diện người dùng (UI) một cách dễ dàng. Bằng cách sử dụng Controller, nhà phát triển có thể liên kết dữ liệu với các thành phần trong UI và cập nhật dữ liệu một cách tự động khi có sự thay đổi trong UI.
  2. Xử lý sự kiện: Controller cho phép xử lý các sự kiện từ người dùng và gửi yêu cầu tới các dịch vụ khác trong ứng dụng web. Điều này giúp tạo ra các tính năng tương tác trong UI, như là sự kiện click, hover, và các yêu cầu gửi đi để tải dữ liệu hoặc thay đổi trạng thái.
  3. Tách biệt mã nguồn: AngularJS Controller giúp tách biệt mã nguồn và tạo ra một cấu trúc tổ chức rõ ràng cho ứng dụng. Việc tách biệt thành phần và quản lý chúng trong các Controller riêng biệt giúp giảm thiểu sự phụ thuộc giữa các thành phần trong ứng dụng và giúp tạo ra mã nguồn dễ bảo trì và mở rộng.
  4. Tái sử dụng mã nguồn: Controller cũng giúp tạo ra mã nguồn dễ tái sử dụng trong các ứng dụng khác. Với các Controller được định nghĩa rõ ràng và tách biệt, nhà phát triển có thể tái sử dụng chúng trong các ứng dụng khác nhau hoặc trong các thành phần của cùng một ứng dụng.
  5. Kiểm thử: AngularJS Controller cung cấp một cách để kiểm thử mã nguồn trong ứng dụng. Nhà phát triển có thể kiểm thử các phương thức và hành vi của Controller một cách độc lập và dễ dàng với các Framework kiểm thử như Jasmine hoặc Karma.

Tóm lại, AngularJS Controller là một phần quan trọng của kiến trúc MVC trong AngularJS, cung cấp cho nhà phát triển các tính năng để quản lý dữ liệu, xử lý sự kiện, tách biệt mã nguồn, tái sử dụng mã nguồn, và kiểm thử.

Xem thêm controller trong Express.js

Cách sử dụng AngularJS Controller trong ứng dụng web

Để sử dụng AngularJS Controller trong ứng dụng web, ta có thể làm theo các bước sau:

  1. Tạo một Controller: Ta có thể tạo một Controller bằng cách sử dụng phương thức $controller hoặc thông qua Directive ng-controller. Ví dụ, để tạo một Controller tên là UserController, ta có thể sử dụng đoạn mã sau:
angular.module('myApp', [])
.controller('UserController', function($scope) {
  // code logic for UserController
});
  1. Liên kết Controller với UI: Sau khi đã tạo Controller, ta có thể liên kết nó với một phần của giao diện người dùng bằng cách sử dụng Directive ng-controller. Ví dụ, để liên kết Controller UserController với một div có id là user-info, ta có thể sử dụng đoạn mã sau:
<div id="user-info" ng-controller="UserController">
  <!-- UI elements and data bindings -->
</div>
  1. Sử dụng dữ liệu và xử lý sự kiện trong Controller: Sau khi đã liên kết Controller với UI, ta có thể sử dụng dữ liệu và xử lý sự kiện trong Controller. Để sử dụng dữ liệu trong Controller, ta có thể liên kết các biến và đối tượng với $scope object. Ví dụ:
$scope.user = {
  name: "John",
  email: "john@example.com"
};

Để xử lý sự kiện, ta có thể định nghĩa các phương thức trong Controller và gọi chúng từ UI bằng cách sử dụng Directive ng-click, ng-submit, và các Directive tương tự khác. Ví dụ:

$scope.submitForm = function() {
  // code to submit form data
};
  1. Sử dụng Service trong Controller: Để tạo ra các ứng dụng web phức tạp hơn, ta có thể sử dụng các Service trong Controller để tương tác với các dịch vụ khác trong ứng dụng. Các Service là các đối tượng được định nghĩa riêng trong AngularJS và có thể được tiêm vào Controller thông qua Dependency Injection. Ví dụ:
angular.module('myApp', [])
.controller('UserController', function($scope, UserService) {
  // code logic for UserController using UserService
});

Tóm lại, để sử dụng AngularJS Controller trong ứng dụng web, ta cần tạo một Controller, liên kết nó với UI, sử dụng dữ liệu và xử lý sự kiện trong Controller, và sử dụng Service để tương tác với các dịch vụ khác trong ứng dụng.

Hướng dẫn khởi tạo và định nghĩa AngularJS Controller

Để khởi tạo và định nghĩa một AngularJS Controller trong ứng dụng web, ta có thể làm theo các bước sau:

  1. Tạo module: Đầu tiên, ta cần tạo một module AngularJS bằng cách sử dụng phương thức angular.module() với tên của module làm tham số đầu tiên. Ví dụ:
var myApp = angular.module('myApp', []);
  1. Tạo Controller: Sau khi đã tạo module, ta có thể tạo một Controller bằng cách sử dụng phương thức controller() của module và truyền vào tên của Controller và một hàm để định nghĩa logic cho Controller đó. Ví dụ:
myApp.controller('MyController', function($scope) {
  // Định nghĩa logic cho Controller
});
  1. Sử dụng Controller: Để sử dụng Controller đã được định nghĩa, ta cần liên kết nó với một phần của giao diện người dùng bằng cách sử dụng Directive ng-controller. Ví dụ:
<div ng-controller="MyController">
  <!-- Các thành phần UI sử dụng Controller -->
</div>

Trong hàm định nghĩa cho Controller, ta có thể sử dụng tham số $scope để tạo các thuộc tính và phương thức cho Controller. Ví dụ:

App.controller('MyController', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";

  $scope.getFullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});

Trong ví dụ này, ta đã định nghĩa một Controller tên là MyController với hai thuộc tính là firstName và lastName, và một phương thức là getFullName(). Thuộc tính và phương thức này có thể được sử dụng trong các thành phần UI liên quan đến Controller bằng cách sử dụng biểu thức ràng buộc dữ liệu {{ }}. Ví dụ:

<div ng-controller="MyController">
  <p>First name: {{ firstName }}</p>
  <p>Last name: {{ lastName }}</p>
  <p>Full name: {{ getFullName() }}</p>
</div>

Tóm lại, để định nghĩa và sử dụng AngularJS Controller, ta cần tạo module, tạo Controller và liên kết nó với một phần của giao diện người dùng, định nghĩa các thuộc tính và phương thức cho Controller bằng tham số $scope, và sử dụng biểu thức ràng buộc dữ liệu {{ }} để hiển thị các giá trị của Controller trong thành phần UI.

Các phương thức của AngularJS Controller

AngularJS Controller cung cấp một số phương thức để thực hiện các chức năng khác nhau trong ứng dụng web. Dưới đây là một số phương thức quan trọng của AngularJS Controller:

  1. $scope.$watch(): Phương thức này cho phép theo dõi sự thay đổi của một biến trên $scope. Khi giá trị của biến thay đổi, nó sẽ gọi một hàm để thực hiện các hành động cần thiết. Ví dụ:
$scope.$watch('searchTerm', function(newVal, oldVal) {
  // Thực hiện các hành động khi giá trị của biến searchTerm thay đổi
});
  1. $scope.$apply(): Phương thức này cho phép cập nhật giao diện người dùng bằng cách gọi $digest cycle của AngularJS. Ví dụ:
$scope.$apply(function() {
  // Thực hiện các hành động để cập nhật giao diện người dùng
});
  1. $scope.$on(): Phương thức này cho phép đăng ký các event listener để lắng nghe các sự kiện trong ứng dụng. Ví dụ:
$scope.$on('eventName', function(event, data) {
  // Thực hiện các hành động khi sự kiện eventName được kích hoạt
});
  1. $scope.$emit(): Phương thức này cho phép phát ra các sự kiện từ Controller hiện tại lên các Controller cha. Ví dụ:
$scope.$emit('eventName', data);
  1. $scope.$broadcast(): Phương thức này cho phép phát ra các sự kiện từ Controller hiện tại xuống các Controller con. Ví dụ:
$scope.$broadcast('eventName', data);
  1. $scope.$onInit(): Phương thức này được gọi khi Controller được khởi tạo. Ví dụ:
myApp.controller('MyController', function($scope) {
  this.$onInit = function() {
    // Thực hiện các hành động khi Controller được khởi tạo
  };
});

Trên đây là một số phương thức của AngularJS Controller, tuy nhiên còn rất nhiều phương thức khác được cung cấp để phục vụ cho các chức năng cụ thể trong ứng dụng web.

Sử dụng AngularJS Controller để điều khiển dữ liệu và hiển thị trên giao diện

Để sử dụng AngularJS Controller để điều khiển dữ liệu và hiển thị trên giao diện, chúng ta cần định nghĩa một Controller và gắn nó với một phần tử HTML trên trang web. Sau đó, chúng ta có thể sử dụng các biến và phương thức trong Controller để tương tác với dữ liệu và cập nhật giao diện người dùng.

Ví dụ, chúng ta muốn hiển thị danh sách các sản phẩm trên giao diện và cho phép người dùng tìm kiếm các sản phẩm theo tên. Đầu tiên, chúng ta có thể định nghĩa một Controller để quản lý dữ liệu sản phẩm và tìm kiếm:

myApp.controller('ProductController', function($scope) {
  $scope.products = [
    { name: 'Product 1', price: 100 },
    { name: 'Product 2', price: 200 },
    { name: 'Product 3', price: 300 },
    { name: 'Product 4', price: 400 },
    { name: 'Product 5', price: 500 },
  ];

  $scope.searchTerm = '';

  $scope.filterProducts = function(product) {
    return product.name.toLowerCase().indexOf($scope.searchTerm.toLowerCase()) !== -1;
  };
});


Ở đây, chúng ta có một biến $scope.products để lưu trữ danh sách các sản phẩm và một biến $scope.searchTerm để lưu trữ giá trị tìm kiếm của người dùng. Ngoài ra, chúng ta còn có một phương thức $scope.filterProducts() để lọc danh sách các sản phẩm dựa trên giá trị tìm kiếm.

Tiếp theo, chúng ta có thể gắn Controller này với một phần tử HTML trên trang web:

<div ng-controller="ProductController">
  <input type="text" ng-model="searchTerm" placeholder="Search for products">

  <ul>
    <li ng-repeat="product in products | filter: filterProducts">{{ product.name }} - {{ product.price }}</li>
  </ul>
</div>

Ở đây, chúng ta sử dụng thuộc tính ng-controller để gắn Controller ProductController với phần tử <div> và sử dụng ng-model để liên kết giá trị của trường nhập liệu với biến $scope.searchTerm. Ngoài ra, chúng ta sử dụng ng-repeat để hiển thị danh sách các sản phẩm và sử dụng filter để lọc danh sách dựa trên giá trị tìm kiếm.

Khi người dùng nhập giá trị tìm kiếm vào trường nhập liệu, AngularJS sẽ tự động cập nhật giá trị của biến $scope.searchTerm và áp dụng hàm filterProducts() để lọc danh sách các sản phẩm. Kết quả sẽ được hiển thị.

Cách tạo và sử dụng Service trong AngularJS Controller

Trong AngularJS, Service là một đối tượng độc lập có thể được sử dụng để chia sẻ dữ liệu và logic giữa các Controller và các thành phần khác trong ứng dụng web. Để tạo và sử dụng Service trong AngularJS Controller, chúng ta có thể làm như sau:

1. Tạo Service

Để tạo Service trong AngularJS, chúng ta sử dụng phương thức factory() hoặc service() của đối tượng angular.module(). Ví dụ, để tạo một Service để lấy dữ liệu từ API, chúng ta có thể sử dụng phương thức factory() như sau:

myApp.factory('apiService', function($http) {
  var apiUrl = 'http://example.com/api';

  var getProducts = function() {
    return $http.get(apiUrl + '/products');
  };

  return {
    getProducts: getProducts
  };
});

Ở đây, chúng ta có một biến apiUrl để lưu trữ URL của API và một phương thức getProducts() để lấy danh sách các sản phẩm từ API. Sau đó, chúng ta trả về một đối tượng có chứa phương thức getProducts() để cho phép các Controller khác sử dụng Service này.

2. Sử dụng Service trong Controller

Sau khi đã tạo Service, chúng ta có thể sử dụng nó trong một Controller bằng cách sử dụng phương thức controller() của đối tượng angular.module(). Ví dụ, để sử dụng Service apiService trong một Controller để lấy danh sách các sản phẩm và hiển thị trên giao diện, chúng ta có thể làm như sau:

myApp.controller('ProductController', function($scope, apiService) {
  apiService.getProducts().then(function(response) {
    $scope.products = response.data;
  });
});

Ở đây, chúng ta đã inject Service apiService vào Controller ProductController thông qua tham số thứ hai của phương thức controller(). Sau đó, chúng ta gọi phương thức getProducts() của Service để lấy danh sách các sản phẩm và sử dụng phương thức then() để xử lý kết quả trả về. Kết quả sẽ được lưu trữ trong biến $scope.products và có thể được hiển thị trên giao diện.

Tương tự như vậy, chúng ta có thể sử dụng Service để chia sẻ dữ liệu và logic giữa các Controller và các thành phần khác trong ứng dụng web.

Làm thế nào để kiểm thử AngularJS Controller

Để kiểm thử AngularJS Controller, chúng ta có thể sử dụng các framework kiểm thử như Jasmine, Karma hoặc Protractor. Dưới đây là hướng dẫn kiểm thử AngularJS Controller bằng Karma và Jasmine:

1. Cài đặt Karma và Jasmine

Để sử dụng Karma và Jasmine trong dự án của mình, chúng ta cần cài đặt chúng bằng npm:

npm install karma --save-dev
npm install karma-jasmine jasmine-core --save-dev

2. Cấu hình Karma

Sau khi cài đặt Karma và Jasmine, chúng ta cần cấu hình Karma để nó có thể chạy được các file kiểm thử. Chúng ta có thể tạo file cấu hình karma.conf.js và thêm các thông tin sau:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.js', // link đến file AngularJS
      'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-mocks.js', // link đến file AngularJS Mocks
      'path/to/your/controller.js', // đường dẫn đến file chứa AngularJS Controller của bạn
      'path/to/your/test-file.js' // đường dẫn đến file chứa các kiểm thử của bạn
    ],
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

Trong đó, chúng ta cần thêm đường dẫn đến file AngularJS và AngularJS Mocks để sử dụng chúng trong các kiểm thử. Đồng thời, chúng ta cũng cần thêm đường dẫn đến file chứa AngularJS Controller và file chứa các kiểm thử của chúng ta.

3. Viết kiểm thử cho AngularJS Controller

Sau khi đã cấu hình Karma, chúng ta có thể viết các kiểm thử cho AngularJS Controller. Ví dụ, để kiểm thử một Controller có tên là MyController, chúng ta có thể viết các kiểm thử như sau:

describe('MyController', function() {
  beforeEach(module('myApp'));

  var $controller;

  beforeEach(inject(function(_$controller_) {
    $controller = _$controller_;
  }));

  describe('sum', function() {
    it('should return the sum of two numbers', function() {
      var $scope = {};
      var controller = $controller('MyController', { $scope: $scope });
      $scope.num1 = 1;
      $scope.num2 = 2;
      $scope.sum();
      expect($scope.result).toBe(3);
    });
  });
});

Trong đó, chúng ta sử dụng hàm describe() của Jasmine để mô tả các kiểm thử cho Controller MyController.

Ví dụ

  1. Ví dụ về Controller AngularJS
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" ng-controller="myCtrl">  
  
Tên:  <input type="text" ng-model="firstName"><br>  
Họ :  <input type="text" ng-model="lastName"><br>  
<br>  
Họ và tên: {{firstName + " " + lastName}}  
  
</div>  
  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.firstName = "first name";  
    $scope.lastName = "last name";  
});  
</script>  
  
</body>  
</html>

Ghi chú:

  • Ở đây, ứng dụng AngularJS chạy bên trong <div> được định nghĩa bởi ng-app = “myApp”.
  • Chỉ thị AngularJS là thuộc tính ng-controller = “myCtrl”.
  • Hàm myCtrl là một hàm JavaScript.
  • AngularJS sẽ gọi Controller với một đối tượng $ scope.
  • Trong AngularJS, $ scope là đối tượng ứng dụng (chủ sở hữu của các biến và hàm ứng dụng).
  • Controller tạo hai thuộc tính (biến) trong phạm vi (firstName và lastName).
  • Các chỉ thị ng-model ràng buộc các trường đầu vào với các thuộc tính của Controller (FirstName và lastName).

Xem thêm AngularJS Expressions

  1. Ví dụ về Controller AngularJS với các phương thức (biến dưới dạng hàm)
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" ng-controller="personCtrl">  
  
Tên: <input type="text" ng-model="firstName"><br>  
Họ : <input type="text" ng-model="lastName"><br>  
<br>  
Họ và tên: {{fullName()}}  
  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
    $scope.firstName = "first name";  
    $scope.lastName = "last name";  
    $scope.fullName = function() {  
        return $scope.firstName + " " + $scope.lastName;  
    };  
});  
</script>  
  
</body>  
</html>
  1. Controller AngularJS trong các tệp bên ngoài

Trong các ứng dụng lớn hơn, nói chung Controller được lưu trữ trong các tệp bên ngoài.

Tạo một tệp bên ngoài có tên “personController.js” để lưu trữ Controller.

Ở đây, “personController.js” là:

   angular.module('myApp', []).controller('personCtrl', function($scope) {  
    $scope.firstName = "Aryan",  
    $scope.lastName = "Khanna",  
    $scope.fullName = function() {  
        return $scope.firstName + " " + $scope.lastName;  
    }  
});

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="personCtrl">  
Tên: <input type="text" ng-model="firstName"><br>  
Họ : <input type="text" ng-model="lastName"><br>  
<br>  
Họ và tên: {{firstName + " " + lastName}}  
</div>  
<script src="personController.js"></script>  
</body>  
</html>

Xem thêm $_get trong php là gì ?

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now