Search by category:
AngularJS

Điều khiển Controller trong AngularJS

Điều khiển Controller trong AngularJS, tìm hiểu về thành phần AngularJS controllers trong ứng dụng AngularJS applications. Controller là thành phần rất quan trọng trong bất cứ ngôn ngữ lập trình nào, còn trong AngularJS thì Controller đóng vai trò gì?

Ở bài trước chúng ta đã tìm hiểu về AngularJS Expressions là gì, bài này mời các bạn xem tiếp về điều khiển Controller trong AngularJS nhé.

AngularJS Controller là gì?

AngularJS Controller là bộ điều khiển kiểm soát dữ liệu của các ứng dụng AngularJS.

Ứng dụng AngularJS hoạt động dựa vào thành phần controller để điều khiển luồng dữ liệu trong ứng dụng. Một controller được định nghĩa bởi sử dụng directive ng-controller. Một controller là một đối tượng javascript được đóng gói với các hàm và thuộc tính.

Controller trong AngularJS hoạt động như thế nào?

Để tìm hiểu về cách hoạt động hãy xem các ví dụ và cách khai báo cũng như giải thích các thông số sau:

Cách khai báo Controller: ng-controller=”ten”

Ví dụ:

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

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

</body>
</html>


Giải thích các thông số:

  • Khai báo bộ điều khiển tên myCtrl: ng-controller=”myCtrl”, có thể xem myCtrl giống như một hàm.
  • firstName và lastName là các thuộc tính của hàm myCtrl.
  • {{firstName + ” ” + lastName}} chính là biểu thức toán học hay gọi là các Directives đã học ở bài trước.
  • $scope là tham số để hướng đến ứng dụng/module mà phần controller này điều khiển.
  • $scope.firstName là gán cho firstName giá trị là John, tương tụ $scope.lastName gán lastName giá trị Doe
  • Còn những thông số khác là mặt nhiên nó như vậy, cấu trúc như vậy.

Xem thêm ví dụ:

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

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

</body>
</html>

Một ví dụ khác:

<html>
<head>
<title>Thanh phan Controller trong AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>Ung dung AngularJS</h2>
<div ng-app="ungdungAngularjs" ng-controller="sinhvienController">

Nhap ho: <input type="text" ng-model="sinhvien.ho"><br><br>
Nhap ten: <input type="text" ng-model="sinhvien.ten"><br>
<br>
Bạn đang nhập: {{sinhvien.hoten()}}
</div>
<script>
var ungdungAngularjs = angular.module("ungdungAngularjs", []);

ungdungAngularjs.controller('sinhvienController', function($scope) {
   $scope.sinhvien = {
      ho: "Blog",
      ten: "Tinh Tế",
      hoten: function() {
         var doituongsinhvien;
         doituongsinhvien = $scope.sinhvien;
         return doituongsinhvien.ho + " " + doituongsinhvien.ten;
      }
   };
});
</script>
</body>
</html>

Post Comment

Loading...
loading...
loading...