Cấp bậc tác giả:

TRAINING

[Angular][Phần 3]Angular Controller - Điều khiển

Được viết bởi webmaster ngày 15/04/2016 lúc 11:10 PM
Ứng dụng AngularJS được điểu khiển bởi bộ điều khiển được định nghĩa bởi ng-controller.
  • 0
  • 1147

[Angular][Phần 3]Angular Controller - Điều khiển

Loading...

Ứng dụng AngularJS được điểu khiển bởi bộ điều khiển được định nghĩa bởi ng-controller.

Nó là một đối tượng JavaScript, được tạo theo cú pháp JavaScript.

  <div ng-app="myApp" ng-controller="myCtrl">
        First Name:
        <input type="text" ng-model="firstName"><br>
        Last Name:
        <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.firstName = "DOTNET";
            $scope.lastName = "GROUP";
        });
    </script>


Giải thích ví dụ
AngularJS modules định nghĩa ứng dụng AngularJS.

AngularJS controllers định nghĩa bộ điều khiển ứng dụng AngularJS. Chúng ta định nghĩa một template HTML bằng cách gọi tên controller đã được khai báo.

Chỉ thị ng-app là tên của ứng dụng được định nghĩa bởi AngularJS modules, chỉ thị ng-controller là tên của bộ điều khiển được định nghĩa bởi AngularJS controllers.

Định nghĩa Angular modules

var app = angular.module('myApp', []);

Định nghĩa bộ điều khiển (Angular controller)

app.controller('myCtrl', function ($scope) {
            $scope.firstName = "DOTNET";
            $scope.lastName = "GROUP";
        });

Hàm myCtrl là một hàm JavaScript, nó gọi đối tượng $scope bởi AngularJS. Phạm vi của đối tượng này nằm trong giao diện HTML được bao bởi ng-controller.

Angular Controller - $scope
$scope là một đối tượng cầu nối lưu trữ dữ liệu, hay có thể hiểu nó là một kho dữ liệu để trao đổi giữa controlllerHTML

Trong ví dụ trên, khi chúng ta khai báo một controller bên HTML thì bắt buộc phải khai báo module angular và một ứng dụng có thể có nhiều controller.

Trong ví dụ trên, đối tượng $scope tạo hai thuộc tính là firstName lastName (được gán giá trị ban đầu là "DOTNET" và "GROUP"). Giá trị của nó sẽ liên kết với những phẩn tử có chỉ thị ng-model.

Như bài trước, chạy chương trình và nhập dữ liệu và các input , bạn sẽ thấy Fullname thay đổi theo. Vì chỉ thị ng-model liên kết dữ liệu đến phần tử có chứa biểu thức {{}} hoặc ng-bind và trong controller cũng vậy, giá trị của $scope.firstName$scope.lastName cũng thay đổi.

Phương thức trong Controller
Ví dụ trên thể hiện một đối tượng có hai thuộc tính: lastName và firstName.

Bạn có thể xây dụng một phương thức để hiển thị 2 thuộc tính này

Trong điều khiển myCtrl, bạn thêm phương thức sau:

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

Trong HTML, bạn thêm như sau:

<p>Full Name: {{ fullName() }}</p>

Từ ví dụ trên ta có kết luận như sau:

Mỗi controller sẽ có một $scope riêng biệt. Trong view của mỗi controller có thể sử dụng giá trị của $scope thông qua cú pháp {{tên gía trị}} hoặc ng-bind.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML