Struktura folderów AngularJS [zamknięte]

Odpowiedzi:

251

wprowadź opis zdjęcia tutaj

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

Michael J. Calkins
źródło
22
czy odpowiadasz na swoje pytanie zaraz po jego opublikowaniu?
Jakub
34
@Jakub Podczas tworzenia pytania istnieje opcja o nazwie „odpowiedz na własne pytanie przyczyniające się do powstania wiki”.
Michael J. Calkins,
3
@MichaelCalkins, podoba mi się ten pomysł. Właśnie sprawdziłem niektóre z twoich youtube na kanale, fajnie
Ronnie,
5
@ Ronnie Po prostu pamiętam, że był to jeden z najtrudniejszych etapów nauki w AngularJS, więc mam nadzieję, że pomaga ludziom wyjść. Myślę, że po przeczytaniu blogów przeszedłem przez 10 różnych układów, a co nie.
Michael J. Calkins,
5
Oto strona najlepszych praktyk angularJS kierowana przez społeczność. Sugerowana struktura plików to połączenie obu pomysłów w dwóch przykładach. Drugi przykład bardziej mi się podoba, ponieważ bardziej przypomina ideę sortowania według funkcji.
Jan
32

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)
Urigo
źródło
1
gdzie powinna być konfiguracja bloku kodu trasy? angular.module('myApp').config(function($routeProvider) { ... });
sport
1
+1 Możesz także dostosować miejsce, w którym mężczyzna umieszcza swoje rzeczy. IMHO, sortowanie według funkcji / modułu w dużych aplikacjach jest lepsze, ponieważ łatwiej można ponownie użyć funkcji w innych aplikacjach.
Tivie
30

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
    └── ...
Chris
źródło
1
Pytanie dotyczy struktury folderów i chociaż link jest interesujący w inny sposób, nie wnosi nic nowego do tabeli dla tego pytania.
JohnC
Jest to używane przez generator kątowy
Yeomana
Więc uporządkowałeś folder według rodzaju skryptów.
Tudor
4

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 .

BoxerBucks
źródło
Jest to często lepsze podejście do bardzo dużych projektów. Niestety nadal tkwimy w strukturze folderów ... oznaczanie byłoby lepsze, więc nie miałoby to większego znaczenia i moglibyśmy mieć wiele widoków w zależności od tagów.
Christophe Roussy
3

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.

Ronnie
źródło
Później będziesz mieć problemy z utrzymaniem i wprowadzaniem nowych funkcji. Dobrą praktyką jest zawsze posiadanie struktury folderów z funkcjami i komponentami związanymi z tą funkcją w folderze.
Jaseem Abbas,
Czy mam rację sądząc, że Angular JS nie ma standardowej struktury folderów projektu ani szablonu projektu, takiego jak projekt internetowy asp.net lub aplikacja komputerowa dla systemu Windows?
1
@dotNetBlackBelt, który jest poprawny. Nie ma standardu, jeśli chodzi o kąt. Od czasu opublikowania tego dokonałem zmian w sposobie konfigurowania folderów. Mój ostatni projekt poszedłem mniej więcej do tego, jaka jest najlepsza odpowiedź tego OP
Ronnie,