30. August 2016

synTechTalk: AngularJS CRUD Beispielapplikation

Screenshot: synaix, AngularJS Logo by AngularJS.org website, MIT, https://commons.wikimedia.org/w/index.php?curid=19180291

Mit Hilfe von AngularJS lassen sich „leichtgewichtige“ Web-Anwendungen entwickeln. Im heutigen synTechTalk Beitrag stelle ich ein simples Beispiel für eine CRUD (Create, Read, Update, Delete) Webanwendung vor, die sich später einfach erweitern lässt.

Dabei gehe ich davon aus, dass Du erste Grundkenntnisse von AngularJS in der Version 1.x besitzt und daher auch schon einmal mit JavaScript und JSON gearbeitet hast. Außerdem sollten Kenntnisse in HTML(5) vorhanden sein.

Zunächst zeige ich den Inhalt der jeweiligen Datei und erläutere dann ein paar Worte zu den wichtigen Stellen.

Als Beispiel nehme ich eine Task-Entität, mit der wir uns kleine Aufgaben wie auf einer ToDo Liste merken können.

Die Dateistruktur

Fangen wir zunächst mit der Datei-Struktur des Projektes an:

  • Wir benötigen eine index.html, die als unser Frame fungiert, sowie einen js und partials Ordner.
  • Im js Ordner erstellen wir eine app.js. Diese ist das Herz unserer Applikation und versorgt unsere Views mit dynamischen Daten.
  • Im partials Ordner legen wir dann unsere Views in Unterordnern an sowie eine index.html, die den Inhalt der Hauptseite anzeigt.
  • Für die Tasks erstellen wir noch einen Unterordner in partials mit den Views für das Erstellen sowie Anzeigen der Tasks.

Ganzen Beitrag lesen