Khi bắt đầu xây dựng một ứng dụng AngularJS, có thể bạn không biết chính xác cách thức tổ chức các files, hoặc thậm chí là không biết mình cần những files nào. Trong bài viết này, tôi sẽ trình bày về cách tạo ra một ứng dụng bằng AngularJS và cách tổ chức cấu trúc thư mục với các ứng dụng ở các mức độ khác nhau.
Tạo ứng dụng đơn giản
Bạn chỉ cần 1 thư mục gồm 1 file
index.html và 1 file app.js như sau:app/
----index.html
----app.js
Trong file
index.html, chúng ta cần gọi đến thư viện angularjs, file app.js và sử dụng các chỉ thị lệnh (directive) ng- đã được xây dựng sẵn cho ứng dụng angularjs. Bạn có thể tìm hiểu thêm trong tài liệu về AngularJS.
Hiện nay, việc sử dụng cấu trúc thư mục ứng dụng như thế nào là tốt nhất đang là vấn đề được quan tâm đối với một số nhà phát triển. Dĩ nhiên, không có mô hình nào được coi là hoàn hảo. Tôi sẽ trình bày các xu hướng cấu trúc thư mục đang được áp dụng hiện nay.
Typical Struture
Trong đa số các tutorial hướng dẫn về angularjs, cấu trúc thư mục được áp dụng như sau:
app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
assets/
----- img/ // Images and icons for your app
----- css/ // All styles and style related files (SCSS or LESS files)
----- js/ // JavaScript files written for your app that are not for angular
----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.
views/
----- mainView.html
----- otherView.html
----- index.html
Đây là cấu trúc đặc trưng thường thấy. Với cấu trúc này, chúng ta tách riêng từng loại file vào chung một thư mục, controllers có thư mục riêng cho controllers, directives có thư mục riêng cho directives, …. Nó khá giống với cách tổ chức của các MVC framework. Cấu trúc này phù hợp với các ví dụ và các ứng dụng nhỏ và cho những người mới bắt đầu tìm hiểu AngularJS vì nó giúp cho người đọc dễ hình dung và có thể khái quát hóa các khái niệm đang được nghiên cứu.
Nguyên tắc LIFT
John Papa đưa ra nguyên tắc khi cấu trúc thư mục rất hữu ích trong bài viết Angular App Structuring Guidelines đó là LIFT (Locating - Indenty - Flat - T-DRY).
- Locating: dễ dàng định vị được file cần tìm.
- Indentify: xác định được đoạn code chúng ta cần tìm một cách nhanh chóng.
- Flat: làm phẳng cấu trúc nhất có thể.
- T-DRY: cố gắng để không lặp lại những gì đã làm (Try to Don’t Repeat Yourself).
Lựa chọn cấu trúc khi ứng dụng lớn dần lên
Có nhiều cách để tổ chức thư mục. Ở đây, chúng ta tập trung vào 2 cách cấu trúc: By Type (theo loại file) và By Feature (theo đặc tính).
Cấu trúc by type
Với cấu trúc by type theo cột bên trái, sẽ phù hợp với các ứng dụng nhỏ. Khi các chức năng nhiều dần lên, giả sử chúng ta có nhiều hơn 10 controllers, directives, views, và chúng ta muốn thay đổi một nội dung naò đó. Khi đó, chúng ta vẫn có thể xác định được các files cần thiết trong từng thư mục riêng biệt nhưng sẽ khó khăn trong việc tìm thấy file đó ngay lập tức trong cả mớ file controller, directive, views, …. Khi đó, chúng ta chuyển sang cấu trúc theo tính năng (by feature).
Cấu trúc by feature
Với cấu trúc
by feature (cột bên phải hình), chúng ta sẽ nhóm các files có liên quan đến một tính năng nào đó vào trong cùng một thư mục. Nó sẽ bao gồm các file view, directive , controller, service cho tính năng đó. Chúng ta có thể coi mỗi một folder theo feature là một mô hình MVC thu nhỏ. Với cách này, khi cần thay đổi một tính năng nào đó, chúng ta có thể dễ dàng và nhanh chóng xác định được vị trí và đoạn code chúng ta cần làm việc, nó giúp chúng rút ngắn được thời gian phát triển của dự án.Kết luận
Có rất nhiều cách để tổ chức cấu trúc thư mục ứng dụng và không có cách nào là hoàn hảo. Chúng ta dựa trên quy mô ứng dụng để chọn một cấu trúc phù hợp với ứng dụng của mình. Các bạn cũng có thể tự tạo ra cấu trúc của riêng mình ;). Và điều quan trọng nhất vẫn là cấu trúc phải rõ ràng và chúng ta có thể dễ dàng và nhanh chóng xác định được cái mà chúng ta cần làm.
Không có nhận xét nào:
Đăng nhận xét