Struktura folderów AngularJS [zamknięte]

Jak układasz strukturę folderów dla dużej i skalowalnej aplikacji AngularJS?

Sortuj według typu

Po lewej stronie mamy aplikację uporządkowaną według typu. Nieźle jak na mniejsze aplikacje, ale nawet tutaj możesz zacząć widzieć, że trudniej jest znaleźć to, czego szukasz. Kiedy chcę znaleźć konkretny widok i jego kontroler, znajdują się one w różnych folderach. Warto zacząć od tego, jeśli nie jesteś pewien, jak inaczej zorganizować kod, ponieważ przejście do techniki po prawej jest dość łatwe: struktura według funkcji.

Sortuj według funkcji (preferowane)

Po prawej stronie projekt jest uporządkowany według funkcji. Wszystkie widoki i kontrolery układu znajdują się w folderze układu, zawartość administratora jest w folderze administratora, a usługi używane przez wszystkie obszary znajdują się w folderze usług. Chodzi o to, że gdy szukasz kodu, który sprawia, że ​​funkcja działa, znajduje się w jednym miejscu. Usługi są nieco inne, ponieważ „obsługują” wiele funkcji. Podoba mi się to, gdy moja aplikacja zaczyna nabierać kształtu, ponieważ łatwiej mi nią zarządzać.

Dobrze napisany post na blogu: http://www.johnpapa.net/angular-growth-structure/

Przykładowa aplikacja: https://github.com/angular-app/angular-app

Po zbudowaniu kilku aplikacji, niektórych w Symfony-PHP, niektórych .NET MVC, niektórych ROR, odkryłem, że najlepszym sposobem dla mnie jest użycie Yeoman.io z generatorem AngularJS.

To najpopularniejsza i najczęstsza struktura i najlepiej utrzymana.

A co najważniejsze, utrzymując tę ​​strukturę, pomaga oddzielić kod po stronie klienta i sprawić, że będzie on niezależny od technologii po stronie serwera (wszelkiego rodzaju różne struktury folderów i różne silniki szablonów po stronie serwera).

W ten sposób możesz łatwo powielić i ponownie użyć kodu swojego i innych.

Oto przed kompilacją: (ale użyj generatora Yeoman, nie stwórz go!)

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

A po kompilacji gruntu (konkat, uglify, rev itp.):

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

Podoba mi się ten wpis o strukturze angularjs

Jest napisany przez jednego z deweloperów angularjs, więc powinien dać ci dobry wgląd

Oto fragment:

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

Istnieje również podejście polegające na organizowaniu folderów nie według struktury frameworka, ale przez strukturę funkcji aplikacji. Istnieje aplikacja Angular / Express uruchamiająca github, która ilustruje tę aplikację zwaną angular-app .

Korzystam z mojej trzeciej aplikacji angularjs, a struktura folderów poprawiała się za każdym razem. Teraz mój jest prosty.

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

Uważam to za dobre dla pojedynczych aplikacji. Tak naprawdę nie miałem jeszcze projektu, w którym potrzebowałbym wielu.