Xây dựng một cấu trúc project dùng angularjs 1.x

[whitefangd (Bò Lúc Lắc)]

Trước khi đi vào vấn đề chính mình có một số lưu ý như sau:

1. Đây không phải là hướng dẫn sử dụng framwork angularjs mà là dành có những bạn đã biết và hiểu angularjs là gì sử dụng thế nào nhưng chứ biết cách bắt đầu cấu trúc project như thế nào hoặc đã xây dựng một cấu trúc project mà cảm thấy chưa tốt
2. Câu trúc project này là thể hiển cái lối suy nghĩ và quan điểm riêng của người tạo.
3. Không có khái niệm như thế nào là cấu trúc tốt nhất chỉ có tốt hơn.

Trong này mình dùng phiên bản angularjs mới nhất. và có sử dụng angularjs route:

I Cấu trúc

Trong thư mục trên mình chia làm 4 phần chính:

• app: chứa các folder cũng như file cho project (đây là phần quan tâm chính)
• css: chứa định nghĩa css
• js: chứa các định nghĩa js chung chung
  • (cái này thật sự rất ít dùng và đang băng khoăng là không biết có cần thiết hay không)
• libs: chứa các framwork cần thiết: angularjs, jquery, bootstrap, v.v

Mô hình project mình thiếp kế như sau:

• index.html: sẽ là trang giao diện chính: là nó sẽ quyết định hiển thị pages A, pages B hay page C thông quan angularjs route
• page A, B, C: chính là angularjs component chính
  • Component bao gồm 1 file html layout và 1 file js xử lý
• UC-Component: chính là component con bên trong component chính trong trường hợp page quá phức tạp
  • Component bao gồm 1 file html layout và 1 file js xử lý
• Service : là angularjs Service ứng với từng component
• Service Common: là Service thực tiếp gửi request cho server các Service khác muốn gửi request phải thông qua Service Common:

Đây là cấu trúc thư mục:

• common: chứa các cấu hình, hàm common, constant v.v
• compoents: chứ file js xử lý cho compoent:
  • forms: chứ file js cho component chính
  • control: chứa file js cho component con
• controllers: chứa các file js controllers cho các xử lý khác mà không có layout html đi kèm
• services: chứa file js Service cho từng Component chịu trách nhiệm xử lý data
  • forms: service cho component chính
  • controls: service cho compoent con
• views: chứ file html layout ứng với các components
  • forms: layout cho components chính
  • control layout cho components con

II Include

Này giờ là đi qua các cấu trúc thư mục giờ là đi vào chi tiết các nhúng từng thành phần:
trang index chính

để xử dụng project
chỉ cần include file config.js là đủ:
trong config.js:

sẽ nhúng:

1. các thư viện angularjs
2. nhúng các config và các file js common. trong đó:
   • app.js cấu hình ban đầu:
   • appconstant.js cấu hính các constant
   • approuter.js: cấu hình route
   • apprun.js: cấu hình khời tạo các biến các thông số ban đầu (nó sẽ chạy angularjs run)
3. nhung controller.js
   • file này để nhúng các file js trong thư mục controllers
4. nhúng component.js
   • file này để nhúng các file js trong thư mục components
5. nhúng service.js
   • file này để nhúng các file js trong thư mục services

III Liên kết:

Bây giờ là cách liên kết các phần lại với nhau:
app.js:

Trong đây mình tạo 1 module chính dùng cho app include các module cần thiết. Trong module chính lại include 2 module nhỏ hơn 1 là module dành riêng cho Controllers và 1 là module dánh riêng cho Service

• Vấn đè à tại sao lại cần chia 2 module nhỏ cho 2 phần controller với serivce để làm gì vì có thể mình sẽ cần thay đổi toàn bộ service này thành 1 bộ service khác, hoặc sau này phát triển 1 bộ compoents khác và có như cầu xài lại service này.

Trong 1 compoent:

1. component hay controller thì đều phải dùng module của controller để đăng ký:
2. component phải luôn đi kèm với 1 file html template trong thư mục views
3. một component đều phải thông qua Service ứng với component đó để xử lý data (không gửi request trực tiếp dù là xử lý đơn giản
   • Như trong hình là component ucHeader phải dùng UCHeaderService để xử lý data

Trong 1 service:

1. service đều phải dùng module của service để đăng ký
2. Service chỉ xử lý data không gửi request trực tiếp cho server mà phải thông qua Service common
   • Trong hình thì ApiService chính là service common

Trong Service common:

1. Chỉ có duy nhất 1 Service common cho toàn bộ project
2. Service common chỉ làm duy nhất 1 xử lý là gửi request cho server và nhận kết quả trả về sau đó gửi lại cho Service bên trên