Struktur Folder AngularJS [ditutup]

Bagaimana Anda menata struktur folder untuk aplikasi AngularJS yang besar dan dapat diukur?

Sortir menurut Jenis

Di sebelah kiri kami memiliki aplikasi yang disusun berdasarkan jenis. Tidak terlalu buruk untuk aplikasi yang lebih kecil, tetapi bahkan di sini Anda dapat mulai melihatnya semakin sulit untuk menemukan apa yang Anda cari. Ketika saya ingin menemukan tampilan spesifik dan pengontrolnya, mereka berada di folder yang berbeda. Akan lebih baik untuk memulai di sini jika Anda tidak yakin bagaimana lagi mengatur kode karena cukup mudah untuk beralih ke teknik di sebelah kanan: struktur berdasarkan fitur.

Sortir Berdasarkan Fitur (disukai)

Di sebelah kanan proyek diatur oleh fitur. Semua tampilan dan pengontrol tata letak masuk dalam folder tata letak, konten admin masuk di folder admin, dan layanan yang digunakan oleh semua area masuk dalam folder layanan. Idenya di sini adalah bahwa ketika Anda mencari kode yang membuat fitur berfungsi, ia terletak di satu tempat. Layanan sedikit berbeda karena mereka "melayani" banyak fitur. Saya suka ini setelah aplikasi saya mulai terbentuk karena menjadi jauh lebih mudah dikelola untuk saya.

Posting blog yang ditulis dengan baik: http://www.johnpapa.net/angular-growth-structure/

Contoh Aplikasi: https://github.com/angular-app/angular-app

Setelah membangun beberapa aplikasi, beberapa di Symfony-PHP, beberapa .NET MVC, beberapa ROR, saya telah menemukan bahwa cara terbaik bagi saya adalah menggunakan Yeoman.io dengan generator AngularJS.

Itu struktur yang paling populer dan umum dan paling baik dipertahankan.

Dan yang paling penting, dengan menjaga struktur itu, ini membantu Anda memisahkan kode sisi klien Anda dan membuatnya agnostik dengan teknologi sisi server (semua jenis struktur folder yang berbeda dan mesin templating sisi server yang berbeda).

Dengan begitu Anda dapat dengan mudah menggandakan dan menggunakan kembali kode Anda dan orang lain.

Ini dia sebelum membangun kasar: (tapi gunakan generator yeoman, jangan hanya membuatnya!)

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

Dan setelah membangun kasar (concat, uglify, rev, dll ...):

    /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)

Saya suka entri ini tentang struktur sudut

Ini ditulis oleh salah satu pengembang angular, jadi seharusnya memberi Anda wawasan yang baik

Berikut ini kutipannya:

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
    └── ...

Ada juga pendekatan mengatur folder bukan oleh struktur kerangka kerja, tetapi oleh struktur fungsi aplikasi. Ada aplikasi pemula github Angular / Express yang menggambarkan aplikasi yang disebut angular ini .

Saya menggunakan aplikasi angularjs ketiga saya dan struktur folder telah meningkat setiap saat sejauh ini. Saya menjaga milik saya sederhana sekarang.

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

Saya menemukan itu bagus untuk aplikasi tunggal. Saya belum benar-benar memiliki proyek di mana saya perlu banyak.