AngularJS Klasör Yapısı [kapalı]

Büyük ve ölçeklenebilir bir AngularJS uygulaması için bir klasör yapısını nasıl düzenlersiniz?

Türe Göre Sırala

Sol tarafta, türe göre düzenlenmiş bir uygulama var. Küçük uygulamalar için çok kötü değil, ancak burada bile aradığınızı bulmanın daha zor olduğunu görmeye başlayabilirsiniz. Belirli bir görünümü ve denetleyicisini bulmak istediğimde, bunlar farklı klasörlerde. Eğer kodu başka nasıl düzenleyeceğinizden emin değilseniz buradan başlamanız iyi olabilir, çünkü sağdaki tekniğe geçmek oldukça kolaydır: yapıya göre.

Özelliğe Göre Sırala (tercih edilen)

Sağda proje özelliğe göre düzenlenmiştir. Düzen görünümlerinin ve denetleyicilerinin tümü düzen klasörüne, yönetici içeriği yönetici klasörüne ve tüm alanların kullandığı hizmetler hizmetler klasörüne gider. Buradaki fikir, bir özelliğin çalışmasını sağlayan kodu ararken, tek bir yerde bulunmasıdır. Hizmetler, birçok özelliğe “hizmet verdiği” için biraz farklıdır. Uygulamam benim için yönetilmesi çok daha kolay hale geldiğinden şekil almaya başladığında bunu beğendim.

İyi yazılmış bir blog yazısı: http://www.johnpapa.net/angular-growth-sttruc/

Örnek Uygulama: https://github.com/angular-app/angular-app

Bazı Symfony-PHP, bazı .NET MVC, bazı ROR, birkaç uygulama inşa ettikten sonra, benim için en iyi yolu Yeogular.io AngularJS jeneratör ile kullanmak olduğunu bulduk .

Bu en popüler ve ortak yapı ve en iyi korunur.

Ve en önemlisi, bu yapıyı koruyarak, istemci tarafı kodunuzu ayırmanıza ve sunucu tarafı teknolojisine (her türlü farklı klasör yapısı ve farklı sunucu tarafı şablonlama motorları) agnostik hale getirmenize yardımcı olur.

Bu şekilde, kendinizin ve diğerlerinin kodunu kolayca çoğaltabilir ve yeniden kullanabilirsiniz.

İşte homurdanma yapmadan önce: (ama yeoman jeneratörünü kullanın, sadece yaratmayın!)

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

Ve homurdanma yapıldıktan sonra (concat, uglify, rev, vb ...):

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

Sevdiğim bu angularjs yapısı hakkında girişi

Angularjs geliştiricilerinden biri tarafından yazıldı, bu yüzden size iyi bir fikir vermeli

İşte bir alıntı:

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

Klasörleri çerçevenin yapısına göre değil, uygulamanın işlevinin yapısına göre organize etme yaklaşımı da vardır. Bu adlandırılan gösteren bir github marş Eğik / Express uygulaması yoktur açısal-app .

Üçüncü angularjs uygulamamdayım ve klasör yapısı her zaman gelişti. Şimdi benimkini basit tutuyorum.

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

Bunu tek uygulamalar için iyi buluyorum. Henüz çoklu projeye ihtiyacım olan bir projem olmadı.