Thế giới phát triển web là một thế giới luôn thay đổi và biến đổi. Cho dù đó là về framework, hoặc cách mọi thứ được thực hiện, không có gì thực sự giữ nguyên sau một khoảng thời gian nhất định. Trong quá trình phát triển như vậy, hai thứ đã trở nên phổ biến giữa các developers – Angular và MVC architecture. Trong blog này, chúng ta sẽ nói về cả Angular và MVC architecture cũng như cách mà cái trước được sử dụng để triển khai cái sau. Các chủ đề sau được đề cập trong blog này bao gồm:
- Angular/AngularJS là gì?
- MVC architecture là gì?
- Các thành phần của MVC?
- Việc triển khai MVC của Angular?
- MVVM architecture
1. Angular/AngularJS là gì?
AngularJS là một framework dựa trên JavaScript, được phát triển bởi Google. Nó được phát hành lần đầu tiên vào cuối năm 2010 nhưng chỉ nhận được bản phát hành ổn định đầu tiên vào đầu năm 2011. Nó được quảng cáo sôi nổi như một framework mạnh mẽ để tạo các ứng dụng web động bằng cách triển khai Model-View-Controller còn thường được gọi là MVC architecture.
Google cũng chịu trách nhiệm duy trì và liên tục cập nhật framework. Trong lần cập nhật thứ hai của họ, AngularJS hoàn toàn không còn được dùng nữa và bắt đầu mới với tên Angular. Kể từ đó, Angular đã nhận được các bản cập nhật hai năm một lần và ngày nay, phiên bản mới nhất của Angular là Angular 8. Sự khác biệt duy nhất là Angular hiện dựa trên TypeScript, là một tập hợp siêu của JavaScript, nhưng nó vẫn duy trì MVC architecture.
Đó là một giới thiệu ngắn về Angular, bây giờ chúng ta hãy xem tất cả đằng sau MVC architecture là gì?
2. MVC architecture là gì?
Như bạn đã biết, MVC là viết tắt của Model-View-Controller. Ý tưởng cơ bản là có ba thực thể riêng biệt và không bao giờ trộn lẫn chúng với nhau. Trước khi có khái niệm về kiến trúc MVC, các developers đã phải vật lộn với việc tích hợp logic của họ vào view của họ, vốn cũng phải được mô hình hóa theo một cách nhất định. Mọi thứ thường trở nên vô cùng vô tổ chức, điều mà không ai mong muốn, đặc biệt là khi làm việc trong các dự án lớn kéo dài hàng nghìn dòng code. Nó làm cho các hoạt động debugging và bảo trì thực sự khó khăn.
Với kiến trúc MVC, các thực thể được tách biệt để logic nghiệp vụ liên kết mọi thứ với nhau luôn được viết riêng biệt. Do đó, chúng ta cũng có thể nói rằng MVC giống một software pattern là architecture. Bây giờ chúng ta đã có một ý tưởng ngắn gọn về MVC là gì, chúng ta hãy xem xét ba thành phần chính của nó.
3. Các thành phần của MVC?
- Model – Nó chịu trách nhiệm quản lý dữ liệu ứng dụng. Nó đáp ứng các yêu cầu từ View và các hướng dẫn từ Controller để tự cập nhật.
- View – Nó chịu trách nhiệm hiển thị tất cả dữ liệu hoặc chỉ một phần dữ liệu cho người dùng. Nó cũng chỉ định dữ liệu ở một định dạng cụ thể được kích hoạt bởi quyết định trình bày dữ liệu của Controller. Chúng là các hệ thống khuôn mẫu dựa trên tập lệnh như JSP, ASP, PHP và rất dễ tích hợp với công nghệ AJAX.
- Controller – Nó có trách nhiệm kiểm soát mối quan hệ giữa Models và Views. Nó phản hồi đầu vào của người dùng và thực hiện các tương tác trên các đối tượng mô hình dữ liệu. Controller nhận đầu vào, xác nhận nó, sau đó thực hiện các hoạt động nghiệp vụ sửa đổi trạng thái của data model.
4. Việc triển khai MVC của Angular?
Chà, khi tôi viết blog này là cuối năm 2019 và AngularJS đã không còn được sử dụng từ lâu. AngularJS chắc chắn đã tuân theo kiến trúc MVC, nhưng Angular ngày nay không thể nói như vậy. Hãy xem một số đoạn mã ví dụ để giải thích ý tôi.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html ng-demo> <head> <title>Example mvc</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body ng-controller="DisplayText"> <p>{{demoText}}</p> </body> <script> function DisplayText($scope) { $scope.demoText= 'This is a demo!'; } </script> </html> |
Trong đoạn mã trên, văn bản của chúng ta được thể hiện bằng biến demoText. Đây là Model của chúng tôi. Controller đang cập nhật View bằng cách hiển thị dữ liệu trên chế độ xem bằng cách thay thế {{demoText}} bằng giá trị có trong biến demoText. Controller đang quản lý mối quan hệ giữa Model của chúng tôi và View là HTML.
Một thiếu sót của MVC là nếu chúng tôi thực hiện bất kỳ thay đổi nào về View, nó sẽ không được cập nhật trong Model. Vấn đề này đã được giải quyết trong Angular2 bằng cách chuyển sang kiến trúc MVVM.
5. MVVM architecture
Về cơ bản MVVM bao gồm 3 thứ:
- Model
- View
- ViewModel
Controller thực sự được thay thế bởi View Model trong mẫu thiết kế MVVM. View Model không là gì ngoài một hàm JavaScript giống như một Controller và chịu trách nhiệm duy trì mối quan hệ giữa view và model, nhưng sự khác biệt ở đây là, nếu chúng ta cập nhật bất cứ thứ gì trong view, nó sẽ được cập nhật trong model, thay đổi bất kỳ thứ gì trong model, nó hiển thị trong view, chúng tôi gọi là ràng buộc 2 chiều
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html ng-app> <head> <title>Number Adition</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <form ng-controller="AdditionController"> <label>Number :</label> <input name="number" ng-change="additionNeeded()" ng-model="data.number1"> <label>Number entered by User :</label> {{data.number1}} <br> <label>Divisor :</label> <input name="divisor" ng-change="additionNeeded()" ng-model="data.number2"> <label>Number entered by User :</label> {{data.number2}} <br> <label>Result :</label> {{data.result}} </form> </body> <script> function DivisionController($scope) { $scope.data = {number1: 0, number2: 0, result: 0}; $scope.additionNeeded = function () { $scope.data.result = $scope.data.number1 + $scope.data.number2; } } </script> </html> |
Đoạn mã trên sẽ thực hiện phép cộng giữa hai số được lấy làm đầu vào của người dùng và sau đó hiển thị nó trong hộp được gọi là result. Bây giờ hãy chia nó thành các thành phần của nó – model, view và ViewModel.
View là HTML của chúng tôi và theo kiểu phân tách chức năng này, View và ViewModel có thể giao tiếp với nhau. Do đó, bất cứ khi nào có sự thay đổi trong View, ViewModel sẽ biết về nó. Sau đó, ViewModel cập nhật Model. Đây là cách phiên bản mới nhất của Angular hoạt động.
Với điều này, tôi muốn kết thúc blog của mình ở đây. Nếu bạn có bất kỳ nghi ngờ hoặc thắc mắc nào liên quan đến bài viết này, vui lòng gửi chúng trong phần bình luận bên dưới. Nếu bạn muốn tìm hiểu tất cả những gì bạn vừa học được từ blog này và hơn thế nữa, về góc cạnh và hướng sự nghiệp của bạn thành một nhà phát triển Angular thành thạo, thì hãy cân nhắc đăng ký Khóa học chứng chỉ Angular của chúng tôi.
Bài viết trên được dịch trên blog https://www.edureka.co/blog/angular-mvc-architecture/