Buna si dupa cum am promis am revenit cu un tutorial despre prima aplicatie in AngularJS, defapt este mai mult o structura de pe care voi sa invatati, ca mai apoi cu un REST in expressjs sa va puteti construi o aplicatie utila, ceva mult mai util decat voi prezenta eu in acest mic articol. Oricum in acest articol ma voi limita la structura primei aplicatii AngularJS MVC.
Structura Proiectului :
1. Continut
Acest director contine pana in prezend doar *.json pentru a improviza call-urile de api
2. Public
Acest director contine insusi aplicatia angular aici ne referim la configul aplicatiei si anume mp.js + strcutura mvc controllerele, modelurile + view-urile. Bine Inteles fiind vorba de angular si un folder specific directivelor de care vam vorbit in tutorialul trecut.
2.1 Controllers
Acest director contine dupa cum sigur ati banuit controalere aplicatiei, adica legatura dintre model si view (MVC pentru cine nu stie gaseste pe site PHP design pattern).
2.2 Models
Sigur ati banuit ca si in cazul de mai sus directorul models contine toate call-urile catre rest api.
2.3 Views
Aici se vor gasi toate fisierele HTML
2.4 Directives
Aici vor fi fisiere cu supertagurile create de noi, mai multe detalii despre directive va voi da in tutorialele viitoare insa exemple sunt atat in aplicatia curenta cat si in tutorialul trecut.
3. Vendor
3.1 angular
Aici se gaseste insasi libraria angular + alte cateva dependinte folositoare ca resursele si rutele.
3.2 css/fonts
Aici vor fi fisierele css + librariile css gen bootstrap
3.3 javascripts
librarii javascript gen boostrap.js, jquery etc.
Toate fisierele sunt include in index.html iar de acolo se randeaza intraga noastra aplicatie. Dupa cum cred ca va amintiti in tutorialul trecut am prezentat o directiva ng-app care ne defineste aplicatia noastra si locul unde angular poate modifica dom-ul, daca o sa va uitati pe index o sa vedeti nelipsitul ng-app, fara care angular nu stie unde trebuie sa se "joace".
Toata aplicatia noastra este inglobata intr-o directiva si anume <site-content></site-content> cu alte cuvinte in index nu vor fi decat scripturile + un body cu un tag <site-content>.
Aceasta directiva contine la randul ei alte directive insa in interiorul ei o sa gasiti ceva important si anume o directiva sub numele de ng-view care impreuna cu libraria routes pune la dispozitie rute angular, iar un exemplu ar fi ca la ruta /test/ ng-view va randa ce va primi ca view sub actiune unui controller, iar asta se poate face foarte simplu(la noi din mp.js) ca in exemplul de mai jos
Pentru a va arata cat de simplu e AngularJS, o sa va mai arat structura unui call la un api care se face prin
ca mai apoi in controller sa fie simplu apelat ca
Cam aceasta este structura, voi explica in tutoriale viitoare mai multe despre fiecare componenta in parte, daca aveti intrebari le astept cu drag.
Aplicatie este pe github : https://github.com/miculprogramator/mp-AngularJS
