Cấu trúc thư mục AngularJS [đã đóng]

Làm thế nào để bạn bố trí một cấu trúc thư mục cho một ứng dụng AngularJS lớn và có thể mở rộng?

Sắp xếp theo loại

Ở bên trái, chúng tôi có các ứng dụng được sắp xếp theo loại. Không quá tệ cho các ứng dụng nhỏ hơn, nhưng ngay cả ở đây bạn có thể bắt đầu thấy khó khăn hơn để tìm thấy những gì bạn đang tìm kiếm. Khi tôi muốn tìm một khung nhìn cụ thể và bộ điều khiển của nó, chúng nằm trong các thư mục khác nhau. Có thể tốt để bắt đầu ở đây nếu bạn không chắc chắn cách tổ chức mã khác vì nó khá dễ dàng để chuyển sang kỹ thuật bên phải: cấu trúc theo tính năng.

Sắp xếp theo tính năng (ưu tiên)

Bên phải dự án được tổ chức theo tính năng. Tất cả các chế độ xem và trình điều khiển bố trí đều nằm trong thư mục bố cục, nội dung quản trị viên sẽ nằm trong thư mục quản trị viên và các dịch vụ được sử dụng bởi tất cả các khu vực trong thư mục dịch vụ. Ý tưởng ở đây là khi bạn đang tìm kiếm mã làm cho một tính năng hoạt động, nó được đặt ở một nơi. Các dịch vụ có một chút khác biệt vì chúng phục vụ các dịch vụ của nhiều người. Tôi thích điều này một khi ứng dụng của tôi bắt đầu hình thành vì nó trở nên dễ quản lý hơn đối với tôi.

Một bài đăng blog được viết tốt: http://www.johnpapa.net/angular-growth-structure/

Ứng dụng mẫu: https://github.com/angular-app/angular-app

Sau khi xây dựng một vài ứng dụng, một số trong Symfony-PHP, một số .NET MVC, một số ROR, tôi đã thấy rằng cách tốt nhất đối với tôi là sử dụng Yeoman.io với trình tạo AngularJS.

Đó là cấu trúc phổ biến và phổ biến nhất và được duy trì tốt nhất.

Và quan trọng nhất, bằng cách giữ cấu trúc đó, nó giúp bạn tách mã phía máy khách của bạn và làm cho nó không tin vào công nghệ phía máy chủ (tất cả các loại cấu trúc thư mục khác nhau và các công cụ tạo khuôn mẫu phía máy chủ khác nhau).

Bằng cách đó bạn có thể dễ dàng sao chép và sử dụng lại mã của bạn và của người khác.

Đây là trước khi xây dựng grunt: (nhưng sử dụng trình tạo yeoman, đừng chỉ tạo nó!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

Và sau khi xây dựng grunt (concat, uglify, rev, v.v ...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Tôi thích mục này về cấu trúc angularjs

Nó được viết bởi một trong những nhà phát triển angularjs, vì vậy sẽ cung cấp cho bạn cái nhìn sâu sắc

Đây là một đoạn trích:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

Ngoài ra còn có cách tiếp cận tổ chức các thư mục không phải theo cấu trúc của khung mà là cấu trúc của chức năng của ứng dụng. Có một ứng dụng khởi động github Angular / Express minh họa cho ứng dụng này được gọi là angular-app .

Tôi đang sử dụng ứng dụng angularjs thứ ba của mình và cấu trúc thư mục đã được cải thiện mỗi lần cho đến nay. Tôi giữ cho tôi đơn giản ngay bây giờ.

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

Tôi thấy rằng tốt cho các ứng dụng duy nhất. Tôi chưa thực sự có một dự án nào mà tôi cần nhiều.