Jak układasz strukturę folderów dla dużej i skalowalnej aplikacji AngularJS?
Jak układasz strukturę folderów dla dużej i skalowalnej aplikacji AngularJS?
Odpowiedzi:
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.
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)
angular.module('myApp').config(function($routeProvider) { ... });
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.