Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

Projektaufbau

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Entwickler von AngularJS empfehlen, einen bestimmten Projektaufbau für eine Anwendung einzuhalten und hierbei eine auf Modulen basierte Ordnerhierarchie zu realisieren.
05:03

Transkript

Das Team von AngularJS epfiehlt einen bestimmten Projektaufbau für AngularJS Anwendung, die ihr macht Das heißt, es spricht davon, dass ihr idealerweise einen Projektaufbau, wie diesen jetzt z. B. machen sollt dabei könnt ihr erkennen, dass auf der Root-Ebene Zunächst einmal ein Ordner Images, scripts und styles Dabei beinhaltet ''styles'' alle Haupt CSS-Elemente die index.html Elemente ebenfalls auf Im Scripts befinden sich alle selbstprogrammierten Javascrips und im Imagebefinden sich alle eure Bilder Innerhalb des Scripts Ordners soll auf unterste Ebene ein app.js existieren Diese app.js ist das Applikationsmodul, mit dem später eure Anwendung initialisiert werden soll Weiterhin soll es anschließend in diesem scripts Ordner unterschiedliche Unterordner geben Jeder dieser Unterordner wiederum soll dazu dienen einem Angular Modlul, das ihr selbst erzeugt habt, einen entsprechenden Speicherort zu bieten in meinem speziellen Beispiel sehen wir also hier, dass ich hier einen Ordner Users habe und dieser Users Ordner, den ich hier erzeugt habe, ist in diesem smpl Projekt ein Modul Innerhalb dieses Ordners sollen nun alle Modul relevanten Informationen enthalten werden Modul relevante Informationen in meinem Fall, beispielsweise ist es Style Informationen selbsterzeugte Direktiven, HTML- Templates, selbsterzeugte Kontrolle, das User- Modul selbst,Services und ein weiteres html- Tamplate für das Voting Weiterhin seht ihr, dass es hier zu jeder relevanten JavaScripts Datei ebenfalls eine Datei gibt mit ''test'', welches hier mit Tests für die jeweiligen Scripte dann entsprechend beinhaltet damit das Ganze dann getestet werden soll Der Hauptgedanke dabei ist es, dass wir nicht dann später tatsächlich das Modul ''users'' verwenden möchte in diesem gesammten Ordner, das Projekt, in dem ich dann entsprechend verwenden möchte dann hineinkopieren kann und durch das Laden und einbinden dann des users Moduls in der Lage bin auf die direkriven Kontroller und des Services vom User zurückgreifen zu können Dies ist relativ neu Im früheren gab es ein anderes Motto Und zwar war das Motto ''Hey, pack deine Direktiven in ein speziellen Ordner, pack deine Kontrolle in ein speziellen Ordner und deine Service in ein speziellen Ordner'' Ich habe das Neu bei 2-3 Projekten gemacht und ihr köönt euch nicht vorstellen wie schwierig es dann wird, wenn ihr dann auch Module neu erzegt habt, dann in dem jeweiligen Ordner immer herauszufinden wo ist die Service - Datei dazu, wo ist die direktiven Datei dazu und das war wirklich in der Tatsache begründet Das heißt, ich befürworte vollkommen diese Art und Weise des Projekts und finde sie auch sehr schön mann muss sich nur daran gewöhnen, weil es halt früher etwas anders war Wenn ihr das jetzt mal sehr schnell machen wollt, dann würde ich jetzt hier einfach hingehen und werde dann entsprechen mein Applikationsmodul erzeugen wollen, das heißt ich erzeuge hier ein ''script src'' und sage dann ''hey in scripts soll auch ein app.js erzeugt werden'' und app.js selbst existiert nicht und erzeuge ich erstmal den Ordner, danach die Datei und in der Datei selber erzeuge ich entsprechend hier ein angullar-Modul, dieses Modul soll app heißen Das wars, ich habe jetzt schon mein erstes Applikationsmodul erzeugt und muss jetzt hier entsprechend im ng-app auch nur noch app einbinden und somit habe ich das entsprechend wunderbar hinzgefügt Würde ich jetzt nun zusätzlich auch noch hingehen wollen und ein weiteres Modul beispielsweise für Users angeben wollen muss ich dann einfach hier unter script wieder mein Source erzeugen würde in Scripts-Ordner gehen und dort ein Users-Modulordner erzeugen und dort ein user-modul machen snd dieses User-Modul, das ich dann andieser Stelle erzeuge (Ordner erstellen, Datei erstellen) wartet, ich zeige euch ganz schnell, ihr seht, dass er wirklich die Dateien direkt hier stellt dann musst ich natürlich auch js dran schreiben So erzeugen wir gewöhnlich meistens auch die Dateien, so wunderbar Und jetzt kann ich wieder über ''ngm'' entsprechend einfach ein app.users, also mal eigenes Users-Modul entsprechend hier erzeugen und bin dann anschließend in der Lage dieses User-Modul als Abhängigkeit in meiner eigenen Applikation hinzuzupacken Und so weit so gut, das heißt ab jetzt erzeuge ich dann mit der index.html Seite eine Applikation für Angular mit dem app-Modul, das ich hier habe Dieses app-Modul soll zusammen mit app.users arbeiten deshalb habe ich es hier reingepackt Hier haben wir jetzt in den vergangenen Minuten gelern wie wir das Projekt entsprechend erzeugen können und wie wichtig ist es eine bestimmte Ordnung einzuhalten, damit jeder im Team weiß ''das Modul'', in dem Modul befinden sich alle entsprechenden Elemente, dann muss ich nicht iergendetwas davon suchen, habe eine klare Richtlinie, wo welche Dateien zu finden sind

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!