Web Design

Angularjs, Bài 5: Giới thiệu về Controllers

Một điểm rất hay của AngularJS là nó hoạt động theo phạm vi. Bạn có thể cho nó kiểm soát toàn bộ trang HTML của bạn, hay chỉ một phần của trang. Và phạm vi kiểm soát này được đại diện bởi Controllers.

1. Định nghĩa Controllers:

Bây giờ hãy nghĩ bạn là một Tổ trưởng trong lớp học. Mỗi Tổ trưởng quản lí một tổ nhất định, và việc dùng AngularJS để kiểm soát một phần trang HTML của bạn là bạn chỉ đijnh cho nó làm Tổ trưởng một tổ vậy. Còn nếu bạn cho AngularJS kiểm soát toàn bộ trang thì nó là Lớp trưởng luôn rồi.

Thực ra, trong Bài 2 và Bài 3, bạn đã thao tác với Controllers rồi đó thôi, với một Controller duy nhất kiểm soát toàn bộ cả trang/ứng dụng web của bạn. Và trong trường hợp này, bạn không cần thiết phải khai báo ng-controller cụ thể. Tuy nhiên, trong trường hợp bạn chỉ muốn AngularJS “control” một đoạn HTML nào đó thì phải khai báo ng-controller vào ngay tag đầu tiên của đoạn đó, thường là thẻ <div>. Chẳng hạn:

Như các bạn thấy, DivOneController chỉ kiểm soát div-one và các con của nó. Còn div-two thì không, do đó khi bạn gọi một biến được định nghĩa trong DivOneController, lấy nó ra để dùng trong div-two thì div-two sẽ không biết cái biến kia là cái mô tê gì cả.

2. Sử dụng biến trong Controllers:

Ví dụ để nhất để bạn hình dung là tôi sẽ cho hiển thị các phần tử của một array ra. Đương nhiên, array này sẽ được định nghĩa trong JS, vì trong HTML thì dễ quá rồi và chúng sẽ mang tính toàn cục hơn là nội bộ phạm vi. Ở đây, tôi có một array items = [‘Adobe’, ‘Apple’, ‘Google’, ‘Microsoft’, ‘VNG, ‘VTC’] và tôi sẽ “moi” các phần tử của nó ra để hiển thị trong DivOneController. Tôi sẽ đưa ra code và giải thích trong từng dòng:

Param thứ hai trong method controller bên trên là một hàm constructor để construct controller đó. Nó có tham số (đầu tiên) là $scope (lưu ý dấu dollar). Scope trong tiếng Anh có nghĩa là phạm vi, trong trường hợp này thì nó chỉ phạm vi của Controller. Và do đó, $scope.items chỉ khả thi bên trong DivOneController mà thôi. Các HTML tags không nằm trong DivOneController sẽ không truy cập được chúng. Bây giờ, tôi sẽ cho in chúng ra trong HTML như sau:

Ở đây, tôi có dùng ng-repeat. Cấu trúc của nó chỉ đơn giản là “mỗi-phần-tử in mảng-chứa“, trong đó mảng-chứa đương nhiên là biến được định nghĩa trong $scope, còn mỗi-phần-tử thì bạn có thể đặt tên gì cũng được. Kết quả sẽ tương đương với:

Bấy giờ, tôi gọi items kia trong div-two. Tên này sẽ thắc mắc “items là cái vẹo gì?”, và nội dung của p thứ 2 cũng chẳng ra “cái vẹo” gì. Bởi lẽ, items được định nghĩa trong $scope của DivOneController, nên nó chỉ “visible” trong phạm vi – tức $scope – của DivOneController mà thôi.

3. Controllers trong Controller:

Bạn hoàn toàn có thể cho ParentController chứa nhiều ChildControllers theo kiểu “mẹ bồng con” – tức nest controllers inside parent controller. Tuy nhiên, ở đây bạn cần phải chú ý các $scope của các controllers con vì đôi khi các $scope bị “trỏ nhầm” tới $scope của controller mẹ bên ngoài, mà lí do thông thường là do bạn chưa quen. Vì vậy, tốt nhất trước khi gọi $scope trong các controller con, bạn nên cho log nó ra để kiểm tra coi là $scope đó là của ai. Một cách khác để né tránh là dùng alias cho các controllers kèm định nghĩa class.prototype. Chẳng hạn:

Ở đây, tôi có hai alias là parent và child. Trong trường hợp bạn muốn định các vars hay functions mang tính private cho DivOneChildController thì bạn có thể làm tương tự và gọi từ alias child. Lưu ý một điều là bạn không dùng $scope ở đây, mà thay vào đó là this như JS bình thường, vì $scope đã nằm trong các alias rồi. Chẳng hạn, $scope của DivOneController đã được đại diện bởi parent.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.