MEAN.JS - Các thành phần góc trong ứng dụng
Trong chương này, chúng ta sẽ thêm các thành phần góc vào một ứng dụng. Nó là một khung JavaScript giao diện người dùng web, cho phép tạo các ứng dụng động, trang đơn bằng cách sử dụng mẫu Model View Controller (MVC). Trong chương kiến trúc MEAN.JS , bạn đã thấy cách AngularJS sẽ xử lý yêu cầu của khách hàng và lấy kết quả từ cơ sở dữ liệu.
Làm quen với AngularJS
AngularJS là một khung ứng dụng web mã nguồn mở sử dụng HTML làm ngôn ngữ mẫu và mở rộng cú pháp của HTML để thể hiện các thành phần ứng dụng của bạn một cách rõ ràng. AngularJS cung cấp một số tính năng cơ bản như ràng buộc dữ liệu, mô hình, khung nhìn, bộ điều khiển, dịch vụ, v.v. Để biết thêm thông tin về AngularJS, hãy tham khảo liên kết này .
Bạn có thể biến trang thành ứng dụng Angular bằng cách thêm Angular vào trang. Nó có thể được thêm vào chỉ bằng cách sử dụng tệp JavaScript bên ngoài, tệp này có thể được tải xuống hoặc có thể được tham chiếu trực tiếp với phiên bản CDN.
Hãy xem xét chúng tôi đã tải xuống tệp và tham chiếu nó cục bộ bằng cách thêm vào trang như sau:
<script src="angular.min.js"></script>Bây giờ, chúng ta cần nói với Angular rằng trang này là một ứng dụng Angular. Do đó, chúng ta có thể thực hiện việc này bằng cách thêm một thuộc tính, ng-app vào thẻ <html> hoặc <body> như hình dưới đây -
<html ng-app>
or
<body ng-app>Ng-app có thể được thêm vào bất kỳ phần tử nào trên trang, nhưng nó thường được đặt vào thẻ <html> hoặc <body> để Angular có thể hoạt động ở bất kỳ đâu trong trang.
Ứng dụng Angular như một mô-đun
Để làm việc với một ứng dụng Angular, chúng ta cần xác định một mô-đun. Nó là nơi bạn có thể nhóm các thành phần, chỉ thị, dịch vụ, v.v., có liên quan đến ứng dụng. Tên mô-đun được tham chiếu bởi thuộc tính ng-app trong HTML. Ví dụ: chúng tôi sẽ nói tên mô-đun ứng dụng Angular là myApp và có thể được chỉ định trong thẻ <html> như hình dưới đây -
<html ng-app="myApp">Chúng tôi có thể tạo định nghĩa cho ứng dụng bằng cách sử dụng câu lệnh dưới đây trong tệp JavaScript bên ngoài -
angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definitionXác định bộ điều khiển
Ứng dụng AngularJS dựa vào bộ điều khiển để kiểm soát luồng dữ liệu trong ứng dụng. Bộ điều khiển được xác định bằng cách sử dụng chỉ thị ng-controller .
Ví dụ: chúng tôi sẽ gắn bộ điều khiển vào phần thân bằng cách sử dụng lệnh ng-controller, cùng với tên của bộ điều khiển bạn muốn sử dụng. Trong dòng dưới đây, chúng tôi đang sử dụng tên của bộ điều khiển là "myController".
<body ng-controller="myController">Bạn có thể gắn bộ điều khiển (myController) vào mô-đun Angular (myApp) như hình dưới đây:
angular
.module('myApp')
.controller('myController', function() {
// controller code here
});Tốt hơn là sử dụng hàm được đặt tên thay vì hàm ẩn danh để dễ đọc, khả năng tái sử dụng và khả năng kiểm tra. Trong đoạn mã dưới đây, chúng tôi đang sử dụng hàm mới có tên "myController" để giữ mã bộ điều khiển -
var myController = function() {
// controller code here
};
angular
.module('myApp')
.controller('myController', myController);Để biết thêm thông tin về bộ điều khiển, hãy tham khảo liên kết này .
Xác định phạm vi
Phạm vi là một đối tượng JavaScript đặc biệt kết nối bộ điều khiển với các khung nhìn và chứa dữ liệu mô hình. Trong bộ điều khiển, dữ liệu mô hình được truy cập thông qua đối tượng $ scope. Hàm controller nhận tham số $ scope đã được tạo bởi Angular và nó cấp quyền truy cập trực tiếp vào mô hình.
Đoạn mã dưới đây chỉ định cách cập nhật hàm bộ điều khiển để nhận tham số $ scope và đặt giá trị mặc định -
var myController = function($scope) {
$scope.message = "Hello World...";
};Để biết thêm thông tin về bộ điều khiển, hãy tham khảo liên kết này . Trong chương tiếp theo, chúng ta sẽ bắt đầu tạo ứng dụng trang đơn bằng cách sử dụng Angular.