Bộ điều khiển AngularJS với ví dụ ng-Controller

Bởi: James Hartman James Hartman
Hours cập nhật

⚡ Tóm tắt thông minh

Trong AngularJS, Controller chứa logic nghiệp vụ của một màn hình. Nó nhận dữ liệu thông qua đối tượng scope, xử lý dữ liệu và trả lại kết quả cho view.ping Mã trình bày không chứa logic ứng dụng.

  • 🎯 Trách nhiệm chính: Bộ điều khiển điền dữ liệu vào đối tượng phạm vi và cung cấp các phương thức cho giao diện người dùng; nó không thao tác trực tiếp với DOM.
  • 🔗 dây: Chỉ thị ng-controller liên kết một controller có tên với một phần tử, cho phép phần tử đó và các phần tử con của nó truy cập vào phạm vi của controller.
  • 🔁 Cấu trúc đóng gáy hai chiều: ng-model liên kết một trường biểu mẫu với một thuộc tính phạm vi, vì vậy các chỉnh sửa trong giao diện sẽ cập nhật bộ điều khiển và ngược lại.
  • 🧩 Phương pháp: Các hàm được gắn vào phạm vi sẽ phân tách các phần logic riêng biệt và có thể được gọi trực tiếp từ các biểu thức khung nhìn.
  • 🏷️ Cú pháp controllerAs: Đặt bí danh cho bộ điều khiển và liên kết với nó. this Loại bỏ sự mơ hồ khi các bộ điều khiển được lồng vào nhau.
  • 📁 Tách biệt: Việc chuyển các bộ điều khiển vào một tệp app.js riêng biệt giúp giữ cho lớp giao diện người dùng độc lập với lớp logic.
Đọc thêm

Bộ điều khiển AngularJS với ng-controller

Bộ điều khiển trong AngularJS là gì?

A Người điều khiển Trong AngularJS, View nhận dữ liệu từ View, xử lý dữ liệu, rồi gửi dữ liệu đó đến View để hiển thị cho người dùng cuối. Controller chứa logic nghiệp vụ cốt lõi. Nó sử dụng mô hình dữ liệu, thực hiện quá trình xử lý cần thiết, và sau đó chuyển kết quả đầu ra đến View.

⚠️ Ghi chú phiên bản: AngularJS (phiên bản 1.x) đã hết hạn hỗ trợ vào ngày 31 tháng 12 năm 2021 và sẽ không nhận được bất kỳ bản vá bảo mật nào nữa. Các khái niệm dưới đây vẫn áp dụng cho các ứng dụng cũ; trong Angular hiện đại, vai trò tương tự được đảm nhiệm bởi một lớp thành phần (component class) thay vì một bộ điều khiển (controller class).

Hiểu được khái niệm về controller vẫn còn một câu hỏi bỏ ngỏ: làm thế nào nó thực sự giao tiếp với view. Phần tiếp theo sẽ giải đáp câu hỏi đó.

Chức năng của Controller từ góc nhìn của Angular

Sau đây là định nghĩa đơn giản về cách hoạt động của một Controller trong AngularJS:

Hoạt động của bộ điều khiển AngularJS
Hoạt động của bộ điều khiển AngularJS
  • Trách nhiệm chính của bộ điều khiển là kiểm soát dữ liệu được chuyển đến chế độ xem. Phạm vi và quan điểm có giao tiếp hai chiều.
  • Thuộc tính và sự kiện của chế độ xem có thể gọi các hàm trên phạm vi. Đoạn mã bên dưới minh họa điều đó. hàm($phạm vi) được khai báo với bộ điều khiển cộng với một hàm nội bộ trả về $scope.firstName và $scope.lastName đã tham gia. Trong AngularJSMột hàm được định nghĩa là một biến thì đó chính là một Phương thức.

Hoạt động của bộ điều khiển AngularJS

  • Dữ liệu được truyền từ bộ điều khiển đến phạm vi, rồi lại truyền qua lại giữa phạm vi và giao diện hiển thị.
  • Phạm vi (scope) cho phép hiển thị mô hình cho khung nhìn (view). Mô hình có thể được sửa đổi thông qua các phương thức được định nghĩa trên phạm vi, được kích hoạt bởi các sự kiện từ khung nhìn.
  • Không nên sử dụng bộ điều khiển để thao tác với DOM. Đó là nhiệm vụ của... chỉ thị.
  • Cách làm tốt nhất là xây dựng bộ điều khiển dựa trên chức năng. Nếu bạn có một biểu mẫu nhập liệu cần bộ điều khiển, hãy tạo một bộ điều khiển có tên là “bộ điều khiển biểu mẫu”.

Sau khi đã hiểu rõ cơ chế, phần tiếp theo sẽ xây dựng một bộ điều khiển từ một trang trống.

Cách xây dựng bộ điều khiển cơ bản trong AngularJS

Dưới đây là các bước để tạo một controller trong AngularJS.

Bước 1) Tạo trang HTML cơ bản

Trước khi tạo bộ điều khiển, trang HTML cơ bản phải được thiết lập. Đoạn mã bên dưới là một trang đơn giản có tiêu đề “Đăng ký sự kiện” tham chiếu đến Bootstrap và AngularJS.

Xây dựng bộ điều khiển cơ bản trong AngularJS

  1. Tham chiếu đến Bootstrap Bảng định kiểu CSS, được sử dụng cùng với Bootstrap thư viện.
  2. Đây là tham chiếu đến thư viện AngularJS. Mọi thao tác liên quan đến AngularJS từ đây trở đi đều được giải quyết thông qua tập tin này.
  3. Một tham chiếu đến Bootstrap Thư viện này giúp cho một số thành phần điều khiển có khả năng phản hồi.

⚠️ Điều chỉnh: Bài viết gốc đã tải jQuery và nói rằng AngularJS phụ thuộc vào nó. Điều đó không đúng. AngularJS đi kèm với jqLite, một tập hợp con tích hợp sẵn của API jQuery, và chỉ nâng cấp lên jQuery đầy đủ nếu jQuery được tải. trước Nó. Tài liệu tham khảo đã bị xóa.

Bước 2) Kiểm tra file và cấu trúc file

Xây dựng bộ điều khiển cơ bản trong AngularJS

  1. Các tệp được chia thành hai thư mục như trong bất kỳ ứng dụng web thông thường nào: “css” dành cho các tệp định kiểu và “lib” dành cho… JavaScript các tập tin.
  2. Tệp bootstrap.css nằm trong thư mục css và tạo nên giao diện cho trang web.
  3. angular.js là thư viện chính, được tải xuống từ trang web AngularJS và lưu trữ trong thư mục lib.
  4. Tệp app.js sẽ chứa mã cho các bộ điều khiển.

Bước 3) Sử dụng mã AngularJS để hiển thị kết quả đầu ra

Mục tiêu ở đây là hiển thị cụm từ “AngularJS” cả dưới dạng văn bản thuần và trong một hộp văn bản khi trang được mở trong trình duyệt.

Xây dựng bộ điều khiển cơ bản trong AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Giải thích:

  1. ứng dụng ng đánh dấu phần tử này là gốc của ứng dụng AngularJS. Các thuộc tính có tiền tố bằng ng- là các chỉ thị được tích hợp sẵn. “DemoApp” là tên được đặt cho ứng dụng.
  2. Phân chia mang bộ điều khiển ng Với tên gọi “DemoController”, điều này cho phép phần tử đó và mọi thứ bên trong nó có quyền truy cập vào phạm vi điều khiển.
  3. mô hình ng Tạo liên kết mô hình, liên kết hộp văn bản Tên hướng dẫn với thuộc tính phạm vi. tutorialName.
  4. Mô-đun DemoApp được tạo ra, và bộ điều khiển gán giá trị mặc định là “AngularJS” cho tutorialName.

⚠️ Đã áp dụng các chỉnh sửa. Thông báo đăng tải ban đầu cho biết chrset="UTF 8", đây không phải là thuộc tính hợp lệ cũng không phải là tên mã hóa hợp lệ, và AngularJS được tải hai lần — một lần từ CDN và một lần từ lib/angular.jsViệc tải thư viện hai lần sẽ đăng ký lại hệ thống mô-đun và gây ra hành vi không thể đoán trước. Chú thích mảng phụ thuộc ['$scope', function($scope){…}] Ngoài ra, nó cũng được thêm vào, nếu không có nó thì bộ điều khiển sẽ bị lỗi ngay khi tệp được thu nhỏ.

Đầu ra:

Xây dựng bộ điều khiển cơ bản trong AngularJS

Bởi vì tutorialName Giá trị được gán là “AngularJS”, giá trị này xuất hiện trong ô văn bản và trong dòng văn bản thuần túy. Một thuộc tính duy nhất là đủ để minh họa; các bộ điều khiển thực tế thường cũng thể hiện hành vi tương tự, điều mà phần tiếp theo sẽ đề cập đến.

NHỮNG BÀI VIẾT LIÊN QUAN

Cách xác định phương thức trong bộ điều khiển AngularJS

Thông thường, người ta sẽ định nghĩa nhiều phương thức trong một controller để tách biệt logic nghiệp vụ. Nếu controller phải cộng hai số và trừ đi một số nào đó, ví dụ như phép cộng hai số.tracVới hai số, bạn sẽ tạo một phương thức cho mỗi phép toán.

Ví dụ dưới đây định nghĩa một phương thức tùy chỉnh bên trong bộ điều khiển AngularJS trả về một chuỗi.

Xác định các phương thức trong Bộ điều khiển AngularJS

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Giải thích:

  1. Một hàm được gắn vào đối tượng phạm vi dưới dạng thành viên. tNameNó trả về giá trị hiện tại của tutorialName.
  2. View gọi phương thức với {{tName()}}Dấu ngoặc đơn rất quan trọng: nếu không có chúng, biểu thức sẽ in ra chính hàm đó chứ không phải kết quả của nó.

⚠️ Điều chỉnh: phương pháp ban đầu đọc $scope.tName = function() { return $scope.tName; };Hàm đó trả về chính nó chứ không phải tên bài hướng dẫn, vì vậy trang đã hiển thị phần thân hàm thay vì văn bản. Giờ thì nó trả về... $scope.tutorialName.

Đầu ra:

Xác định các phương thức trong Bộ điều khiển AngularJS

Cho đến nay, mọi thứ đều nằm trong một tập tin duy nhất. Các ứng dụng sản xuất giữ các bộ điều khiển riêng biệt, điều mà phần tiếp theo sẽ minh họa.

Bộ điều khiển AngularJS với ví dụ về bộ điều khiển ng

Ví dụ “HelloWorld” ở trên đã đặt tất cả chức năng vào một tệp duy nhất. Bây giờ là lúc chuyển mã điều khiển vào một tệp riêng.

Bước 1) Trong file app.js, hãy thêm đoạn mã sau cho controller của bạn.

Bộ điều khiển AngularJS với ng-Controller

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

Đoạn mã trên thực hiện như sau:

  1. Định nghĩa một mô-đun có tên là “app” chứa bộ điều khiển.
  2. Tạo một bộ điều khiển có tên “HelloWorldCtrl” hiển thị thông báo “Hello World”.
  3. Sử dụng đối tượng phạm vi để truyền thông tin từ bộ điều khiển đến khung nhìn, trong trường hợp này là một biến có tên là message.

Bước 2) Trong file Sample.html, hãy thêm một thẻ div chứa chỉ thị ng-controller và tham chiếu đến biến thành viên. messageHãy nhớ tham chiếu đến tệp app.js, nơi chứa mã nguồn của bộ điều khiển.

Bộ điều khiển AngularJS với ng-Controller

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Điều chỉnh: Tệp app.js phải được tải. sau khi angular.js, vì nó gọi angular.modulePhiên bản gốc cũng tải thư viện hai lần và mang cùng một nội dung. chrset lỗi đánh máy.

Đầu ra:

Bộ điều khiển AngularJS với ng-Controller

Mọi ví dụ cho đến nay đều đọc và ghi trực tiếp các thuộc tính. $scopePhần dưới đây đề cập đến giải pháp thay thế mà nhóm AngularJS khuyến nghị.

Hướng dẫn sử dụng cú pháp controllerAs trong AngularJS

Liên kết trực tiếp với $scope Nó hoạt động, nhưng trở nên mơ hồ ngay khi các bộ điều khiển được lồng nhau. Một biểu thức hiển thị như sau: {{name}} Không cho biết bộ điều khiển nào sở hữu nó. nameVà bởi vì các phạm vi con kế thừa từ các phạm vi cha theo kiểu nguyên mẫu, nên một bộ điều khiển lồng nhau ghi vào một đối tượng nguyên thủy được kế thừa sẽ tự động tạo ra bản sao bóng của chính nó. controllerAs Cú pháp này giải quyết cả hai vấn đề bằng cách gán cho mỗi bộ điều khiển một bí danh.

Bước 1) Đặt bí danh cho bộ điều khiển trong chế độ xem bằng cách sử dụng as Từ khóa, sau đó thêm tiền tố của bí danh đó vào mọi liên kết.

Bước 2) Bên trong bộ điều khiển, hãy gắn các thuộc tính vào this hơn là để $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Có ba lợi ích sau đây. Việc đóng sách trở nên tự động ghi chép lại thông tin, bởi vì demo.tutorialName đặt tên cho chủ sở hữu của nó. Các bộ điều khiển lồng nhau sẽ ngừng xung đột, vì bộ điều khiển cha đã đặt bí danh. outer và một đứa trẻ có biệt danh inner có thể phơi bày nameCác giá trị cũng được liên kết thông qua một đối tượng chứ không phải là một kiểu dữ liệu nguyên thủy đơn thuần, một bước né tránh.ping Cái bẫy mà trong đó việc chỉnh sửa ở nhánh con không bao giờ được truyền đến nhánh cha.

💡 Mẹo: Chụp this thành một biến như vm ở đầu bộ điều khiển. Bên trong một hàm gọi lại, this Nó đề cập đến một thứ hoàn toàn khác, và tham chiếu được nắm bắt giữ cho liên kết được chính xác.

Việc chọn kiểu liên kết là một quyết định. Việc quyết định xem cái gì nên có trong bộ điều khiển lại là một quyết định khác, và bảng so sánh dưới đây sẽ làm rõ điều đó.

Controller và Service trong AngularJS

Người mới bắt đầu thường xuyên gán quá nhiều công việc cho bộ điều khiển, trong khi những công việc đó thuộc về một dịch vụ. Sự khác biệt nằm ở vòng đời và khả năng tái sử dụng: bộ điều khiển chỉ tồn tại khi giao diện người dùng của nó được hiển thị trên màn hình, trong khi dịch vụ là một thực thể duy nhất tồn tại suốt vòng đời của ứng dụng.

Yếu tố Người điều khiển Dịch vụ
Lifetime Được tạo ra và bị phá hủy với tầm nhìn Một phiên bản duy nhất cho toàn bộ ứng dụng.
Mục đích Chuẩn bị dữ liệu cho một chế độ xem Logic, trạng thái và các cuộc gọi máy chủ được chia sẻ.
Tái sử dụng Không, nó gắn liền với quan điểm của nó. Đúng vậy, có thể tiêm ở bất cứ đâu.
Giữ trạng thái giữa các khung nhìn Không, trạng thái bị mất trong quá trình điều hướng Vâng, tình trạng đó vẫn tiếp diễn.
Nội dung điển hình Thuộc tính phạm vi và phương thức xem Các cuộc gọi HTTP, bộ nhớ đệm, quy tắc nghiệp vụ

Hãy giữ cho các controller gọn nhẹ. Nếu hai controller cần cùng một logic, hoặc nếu một giá trị phải được giữ nguyên khi chuyển đổi giữa các view, hãy chuyển nó vào một service và inject service đó vào nơi cần thiết. Một cách kiểm tra thực tế là xem liệu đoạn mã đó có còn ý nghĩa khi màn hình hiện tại đóng lại hay không. Nếu câu trả lời là có, thì nó nên nằm trong một service.

Câu Hỏi Thường Gặp

Đúng vậy. AngularJS tạo ra một thể hiện riêng biệt và một phạm vi riêng biệt cho mỗi phần tử mang chỉ thị. Các thể hiện này không chia sẻ trạng thái với nhau, vì vậy sự thay đổi ở một thể hiện sẽ không ảnh hưởng đến các thể hiện khác.

Khai báo nó trong tuyến đường khi bộ điều khiển thuộc về toàn bộ khung nhìn được tải bởi định tuyếnHãy sử dụng `ng-controller` cho một component xuất hiện bên trong trang bất kể route hiện tại là gì. Không bao giờ khai báo cả hai, nếu không controller sẽ chạy hai lần.

Sử dụng chú thích mảng, liệt kê tên các phần phụ thuộc dưới dạng chuỗi trước hàm. Trình nén đổi tên các đối số hàm nhưng không bao giờ đổi tên các chuỗi ký tự, vì vậy trình tiêm vẫn giải quyết đúng $scope và bất kỳ dịch vụ nào.

Vâng. AI Các công cụ hỗ trợ tạo ra các liên kết mô-đun, bộ điều khiển và phạm vi từ mô tả đơn giản của màn hình. Luôn kiểm tra chú thích phụ thuộc, vì mã được tạo thường bỏ qua nó.

Các công cụ AI viết lại các phép gán phạm vi dưới dạng thuộc tính trên một biến vm được ghi lại và thêm tiền tố vào mọi liên kết chế độ xem phù hợp bằng bí danh. RevHãy xem các lệnh gọi `$watch` và trình lắng nghe sự kiện bằng tay, vì chúng vẫn yêu cầu đối tượng phạm vi.

Tóm tắt bài viết này với: