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

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

A Người điều khiển trong AngularJS lấy dữ liệu từ Chế độ xem, xử lý dữ liệu và sau đó gửi dữ liệu đó đến chế độ xem được hiển thị cho người dùng cuối. Bộ điều khiển sẽ có logic kinh doanh cốt lõi của bạn. Bộ điều khiển sẽ sử dụng mô hình dữ liệu, thực hiện quá trình xử lý được yêu cầu và sau đó chuyển đầu ra tới chế độ xem để hiển thị cho người dùng cuối.

Bộ điều khiển làm gì 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 AngularJS Controller:

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.
Các thuộc tính của khung nhìn có thể gọi các “hàm” trên phạm vi. Hơn nữa, các sự kiện trên khung nhìn có thể gọi các “phương thức” trên phạm vi. Đoạn mã dưới đây đưa ra một ví dụ đơn giản về hàm.

hàm($phạm vi) được xác định khi xác định bộ điều khiển và một hàm bên trong được sử dụng để trả về kết nối của $scope.firstName và $scope.lastName.
In AngularJS, khi bạn định nghĩa một hàm là một biến, nó được gọi là Phương thức.

Dữ liệu theo cách này truyền từ bộ điều khiển đến phạm vi và sau đó dữ liệu chuyển qua lại từ phạm vi đến dạng xem.
Phạm vi được sử dụng để hiển thị mô hình cho khung nhìn. Mô hình có thể được sửa đổi thông qua các phương thức được xác định trong phạm vi có thể được kích hoạt thông qua các sự kiện từ chế độ xem. Chúng ta có thể định nghĩa ràng buộc mô hình hai chiều từ phạm vi đến mô hình.
Bộ điều khiển không nên được sử dụng lý tưởng để thao tác DOM. Điều này nên được thực hiện bằng các chỉ thị mà chúng ta sẽ thấy sau.
Cách thực hành tốt nhất là có bộ điều khiển dựa trên chức năng. Ví dụ: nếu bạn có một biểu mẫu để nhập liệu và bạn cần một bộ điều khiển cho việc đó, hãy tạo một bộ điều khiển có tên là “bộ điều khiển biểu mẫu”.

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 bộ điều khiển trong AngularJS:

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

Trước khi bắt đầu tạo bộ điều khiển, trước tiên chúng ta cần thiết lập trang HTML cơ bản.

Đoạn mã dưới đây là một trang HTML đơn giản có tiêu đề là “Đăng ký sự kiện” và có tham chiếu đến các thư viện quan trọng như Bootstrap, jquery và Angular.

Chúng tôi đang thêm các tham chiếu đến các bảng định kiểu CSS bootstrap, sẽ được sử dụng cùng với các thư viện bootstrap.
Chúng tôi đang thêm tài liệu tham khảo vào thư viện AngularJS. Vì vậy, bây giờ bất cứ điều gì chúng ta làm với Angular.js trong tương lai sẽ được tham chiếu từ thư viện này.
Chúng tôi đang thêm các tham chiếu vào thư viện bootstrap để làm cho trang web của chúng tôi phản ứng nhanh hơn với một số điều khiển nhất định.
Chúng tôi đã thêm các tham chiếu đến thư viện jquery sẽ được sử dụng để thao tác DOM. Điều này được Angular yêu cầu vì một số chức năng trong Angular phụ thuộc vào thư viện này.

Theo mặc định, đoạn mã trên sẽ có trong tất cả các ví dụ của chúng tôi, do đó chúng tôi chỉ có thể hiển thị mã AngularJS cụ thể trong các phần tiếp theo.

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

Thứ hai, chúng ta hãy xem các tệp và cấu trúc tệp mà chúng ta sẽ bắt đầu trong suốt khóa học.

Đầu tiên, chúng tôi tách các tệp của mình thành 2 thư mục như được thực hiện với bất kỳ ứng dụng web thông thường nào. Chúng tôi có thư mục CSS CSS. Nó sẽ chứa tất cả các tệp biểu định kiểu xếp tầng của chúng tôi và sau đó chúng tôi sẽ có thư mục “lib” chứa tất cả các tệp của chúng tôi. JavaScript các tập tin.
Tệp bootstrap.css được đặt trong thư mục CSS và nó được sử dụng để thêm giao diện đẹp mắt cho trang web của chúng tôi.
Angular.js là tệp chính của chúng tôi được tải xuống từ trang AngularJS và được lưu trong thư mục lib của chúng tôi.
Tệp app.js sẽ chứa mã của chúng tôi dành cho bộ điều khiển.
Tệp bootstrap.js được sử dụng để bổ sung tệp bootstrap.cs nhằm thêm chức năng bootstrap vào ứng dụng web của chúng tôi.
Tệp jquery sẽ được sử dụng để thêm chức năng thao tác DOM vào trang web của chúng tôi.

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

Những gì chúng ta muốn làm ở đây chỉ là hiển thị các từ “AngularJS” ở cả định dạng văn bản và trong hộp văn bản khi trang được xem trong trình duyệt. Hãy xem một ví dụ về cách sử dụng angular.js để thực hiện việc này:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Giải thích mã:

ứng dụng ng từ khóa được sử dụng để biểu thị rằng ứng dụng này nên được coi là một ứng dụng góc cạnh. Bất cứ điều gì bắt đầu bằng tiền tố 'ng' được biết đến như một Chỉ thị. “DemoApp” là tên được đặt cho ứng dụng Angular.JS của chúng tôi.
Chúng tôi đã tạo một thẻ div và trong thẻ này, chúng tôi đã thêm một lệnh ng-controller cùng với tên của Bộ điều khiển “DemoController”. Về cơ bản, điều này làm cho thẻ div của chúng tôi có khả năng truy cập nội dung của Trình điều khiển Demo. Bạn cần đề cập đến tên của bộ điều khiển theo lệnh để đảm bảo rằng bạn có thể truy cập chức năng được xác định trong bộ điều khiển.
Chúng tôi đang tạo một ràng buộc mô hình bằng cách sử dụng chỉ thị ng-model. Điều này thực hiện là ràng buộc hộp văn bản cho Tutorial Name để được ràng buộc với biến thành viên “tutorialName”.
Chúng tôi đang tạo một biến thành viên có tên là “tutorialName” sẽ được sử dụng để hiển thị thông tin mà người dùng nhập vào hộp văn bản cho Tên hướng dẫn.
Chúng tôi đang tạo một mô-đun sẽ đính kèm vào ứng dụng DemoApp của chúng tôi. Vì vậy, mô-đun này bây giờ trở thành một phần của ứng dụng của chúng tôi.
Trong mô-đun này, chúng tôi xác định một hàm gán giá trị mặc định là “AngularJS” cho biến tutorialName của chúng tôi.

Nếu lệnh được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Vì chúng ta đã gán giá trị “Angular JS” cho biến tutorialName nên giá trị này sẽ được hiển thị trong hộp văn bản và dòng văn bản thuần túy.

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

Thông thường, người ta muốn xác định nhiều phương thức trong bộ điều khiển để phân tách logic nghiệp vụ.

Ví dụ: giả sử nếu bạn muốn bộ điều khiển của mình thực hiện 2 việc cơ bản,

Thực hiện phép cộng 2 số
Thực hiện phép trừ 2 số

Sau đó, lý tưởng nhất là bạn nên tạo 2 phương thức bên trong bộ điều khiển của mình, một phương thức để thực hiện phép cộng và phương thức còn lại để thực hiện phép trừ.

Hãy xem một ví dụ đơn giản về cách bạn có thể xác định các phương thức tùy chỉnh trong bộ điều khiển Angular.JS. Bộ điều khiển sẽ chỉ trả về một chuỗi.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Giải thích mã:

Ở đây, chúng ta chỉ định nghĩa một hàm trả về một chuỗi “AngularJS”. Hàm này được gắn vào đối tượng phạm vi thông qua một biến thành viên có tên là tutorialName.
Nếu lệnh được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

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

Hãy xem một ví dụ về “HelloWorld” trong đó tất cả chức năng được đặt trong một tệp duy nhất. Bây giờ là lúc đặt mã cho bộ điều khiển vào các tệp riêng biệt.

Hãy làm theo các bước dưới đây để thực hiện việc này:

Bước 1) Trong tệp app.js, hãy thêm mã sau cho bộ điều khiển của bạn

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

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

Xác định một mô-đun có tên là “ứng dụng” sẽ chứa bộ điều khiển cùng với chức năng của bộ điều khiển.
Tạo bộ điều khiển có tên “HelloWorldCtrl”. Bộ điều khiển này sẽ được sử dụng để có chức năng hiển thị thông báo “Hello World”.
Đối tượng phạm vi được sử dụng để truyền thông tin từ bộ điều khiển đến khung nhìn. Vì vậy, trong trường hợp của chúng ta, đối tượng phạm vi sẽ được sử dụng để chứa một biến gọi là “thông báo”.
Chúng ta đang xác định biến message và gán giá trị “Hello World” cho nó.

Bước 2) Bây giờ, trong tệp Sample.html của bạn, hãy thêm một lớp div chứa lệnh ng-controller và sau đó thêm một tham chiếu đến biến thành viên “message”

Ngoài ra, đừng quên thêm tham chiếu đến tệp tập lệnh app.js có mã nguồn cho bộ điều khiển của bạn.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Nếu nhập đúng mã trên, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.

Đầu ra:

Tổng kết

Trách nhiệm chính của bộ điều khiển là tạo một đối tượng phạm vi, sau đó được chuyển đến dạng xem
Cách xây dựng bộ điều khiển đơn giản bằng cách sử dụng các chỉ thị ng-app, ng-controller và ng-model
Cách thêm các phương thức tùy chỉnh vào bộ điều khiển có thể được sử dụng để phân tách các chức năng khác nhau trong mô-đun Angularjs.
Bộ điều khiển có thể được xác định trong các tệp bên ngoài để tách lớp này khỏi lớp View. Đây thường là cách thực hành tốt nhất khi tạo ứng dụng web.

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

Bộ điều khiển làm gì từ góc nhìn của Angular?

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

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

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

Tổng kết

Đăng kí để nhận thư mới