AngularJS – Struktura projektu

W tym wpisie zajmiemy się organizacją plików w projekcie. Pisząc mniejszy lub większy projekt warto skupić się na tym, aby tworzone przez nas pliki, wykorzystywane przez aplikacje były odpowiednio rozmieszczone. Ważne jest to przy późniejszych pracach związanych ze znajdowaniem i usuwaniem błędów. A te jak wiadomo zdarzają się choćby najlepszym programistom.

Podstawowa struktura

Ucząc się AngularJS spotkałem się z kilkoma sposobami podejścia do omawianego tematu. Na wielu stronach internetowych można znaleźć taki oto podział:

app/ ----- controllers/ ---------- index.ctrl.js ---------- home.ctrl.js ----- directives/ ---------- ng-table-todo.js ----- services/ ---------- todosServices.js ----- js/ ---------- bootstrap.js ---------- jquery.js ----- app.js views/ ----- default.html ----- home.html ----- index.html

Jest bardzo dobry podczas tworzenia niewielkich aplikacji lub uczenia się omawianego zagadnienia. Dzięki takiej strukturze mamy oddzielone od siebie komponenty, dyrektywy oraz serwisy. A także mamy odseparowane do katalogu views pliki z rozszerzeniem .html.

Problem z takim podziałem plików pojawia się w chwili, kiedy nasza aplikacja rośnie w nowe funkcjonalności, jednocześnie zwiększając przy tym ilość plików. Gdy chcemy odszukać interesujący nas plik, zmuszeni jesteśmy do skrollowania całej struktury aplikacji.

Dodatkowo, chcąc dokonać zmiany w kodzie, może nastąpić konieczność znalezienia kontrolera, a także widoku co przy większym projekcie oznaczać będzie kolejne przeszukiwanie listy plików w celu znalezienia poszukiwanego.

Rozbudowana struktura

Kolejną strukturą z jaką się spotkałem jest podział na common oraz core. Strukturę tą znalazłem w książce AngularJS Pierwsze kroki z której na początku przygody z AngularJS często korzystałem. Książka ta była wydana przed wersją AngularJS wprowadzającą komponenty.

css ----- style.css script ----- common ---------- directives --------------- ng-table-todo.js ---------- filters --------------- filters.js ---------- services --------------- todosServices.js ----- core ---------- default --------------- default.html ---------- home --------------- home.ctrl.js --------------- home.tpl.html ---------- app.mdl.js ---------- app.rout.js ---------- index.ctrl.js ----- index.html

Jak widzimy mamy w tej strukturze również odizolowane pliki CSS od pozostałych plików związanych z aplikacją.

Common

W tym katalogu znajdują się wszystkie współdzielone elementy pisanej aplikacji. Takimi elementami mogą być:

• serwisy,
• dyrektywy,
• komponenty,
• filtry.

Core

To tak zwany rdzeń apliakcji. Zawiera widoki oraz kontrolery wykorzystane w aplikacji. Na przedstawionym przykładzie mamy podkatalogi odpowiadające podstroną pisanej przez nas aplikacji np. podkatalog contact zostanie wyświetlony pod adresem /#/contact.

Inna rozbudowa struktury plików

Przeglądając Internet, natknąłem się na zbliżoną strukturę do tej opisanej wyżej z małymi zmianami.

app ----- shared ---------- table-todo --------------- tableTodoDirective.js --------------- tableTodoView.html ----- components ---------- default --------------- defaultController.js --------------- bdefaultView.html ---------- home --------------- homeController.js --------------- homeService.js --------------- homeView.html ----- app.module.js ----- app.routes.js assets ----- img ----- css ----- js ----- libs index.html

Struktura ma inne nazwy katalogów, ale spełniają one takie same zadania. Zatem:

• app odpowiada katalogowi scripts
• Shared odpowiada katalogowi common
• components odpowiada katalogowi core

Dodatkowo w poprzedniej strukturze mieliśmy katalog css, w którym przechowywaliśmy pliki styli. W tej strukturze mamy folder assets, który zawiera:

• zdjęcia,
• biblioteki js,
• biblioteki css,
• własne pliki zawierające funkcję napisane w js, nie będące częścią AngularJS.

W przypadku tworzenia bardzo dużych aplikacji, najlepszym rozwiązaniem byłoby podzielenie jej na moduły. dzięki narzędzi takich jak Gulp czy Grunt istnieje możliwość łączenia oraz minimalizacji plików.

Podsumowanie

W tym wpisie poruszyliśmy bardzo istotny punkt towrzenia aplikacji. Źle utowrzona struktura plików w projekcie jest bardzo męcząca. Dlatego warto dobrać odpowiednią strukturę do wielkości projektu. jeżeli mamy niewielki projekt, wystarczy nam podstawowa struktura plików. jeżeli projekt jest większy, wtedy powinniśmy się zastanowić nad zastosowaniem bardziej zaawansowanej stryktury przedstawionej w tym wpisie.

Dobrze utoworzona struktura projektu ułatiwa pracę i sprawia, iż dodawanie kolejnych linijek kodu jest przyjemnością, a nie męczarnią.