Wie man ein Angular-Frontend erstellt und mit einem Backend verbindet?

in diesem tutorial werden sie eine to do listen anwendung mit angular erstellen und sie mit einem verwalteten backend dienst von back4app verbinden dieser leitfaden ist für sie gedacht, wenn sie die grundlegenden crud (create, read, update, delete) operationen meistern und eine dynamische, responsive benutzeroberfläche mit angular erstellen möchten am ende dieses tutorials wird ihre anwendung nahtlos mit einem backend kommunizieren, das die datenspeicherung, authentifizierung und mehr verwaltet der aufbau einer full stack anwendung umfasst oft eine komplexe backend konfiguration und datenbankverwaltung um ihren arbeitsablauf zu vereinfachen, verwenden wir back4app— einen robusten backend as a service —damit sie sich auf die entwicklung eines funktionsreichen angular frontends konzentrieren können back4app bietet eine vollständig verwaltete nosql datenbank, benutzerauthentifizierung, cloud code für benutzerdefinierte logik und sdks für nahtlose integration dies ermöglicht es ihnen, skalierbare anwendungen zu erstellen und bereitzustellen, ohne die serverinfrastruktur verwalten zu müssen wichtige erkenntnisse indem sie dieses tutorial befolgen, werden sie ein modernes angular projekt mit angular cli initialisieren nahtlos einen backend dienst integrieren, um die daten ihrer app zu verwalten wesentliche crud operationen für eine dynamische to do liste implementieren ihre voll funktionsfähige anwendung mit containerisierten workflows auf back4app bereitstellen voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie node js und npm auf ihrem computer installiert haben überprüfen sie die installationen mit node v und npm v grundkenntnisse in angular , einschließlich komponenten, dienste und dependency injection ein back4app konto zur verwaltung ihrer backend dienste melden sie sich bei back4app https //www back4app com/ an, falls sie dies noch nicht getan haben mit diesen voraussetzungen sind sie bereit, ihr projekt zu starten projektsetup beginnen sie mit der einrichtung ihrer lokalen entwicklungsumgebung und der initialisierung eines neuen angular projekts mit angular cli stellen sie sicher, dass sie node js (lts version) installiert haben wenn nicht, laden sie es von nodejs org https //nodejs org/ herunter installieren sie die angular cli global, falls sie dies noch nicht getan haben npm install g @angular/cli erstellen sie ein neues angular projekt ng new todo app routing style=css navigieren sie zu ihrem projektverzeichnis cd todo app starten sie den entwicklungsserver, um die einrichtung zu überprüfen ng serve öffnen sie http //localhost 4200 in ihrem browser, um ihre angular app in aktion zu sehen mit dem bereitgestellten frontend fahren sie fort, um ihr backend auf back4app zu erstellen erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse , einschließlich einer nosql datenbank, authentifizierung, cloud code und automatisch generierten apis, unterstützt wird befolgen sie diese schritte, um ihr backend einzurichten melden sie sich an bei ihrem back4app dashboard https //www back4app com/ und klicken sie auf "erstellen sie eine neue app " benennen sie ihre app (zum beispiel, todoapp ) und wählen sie nodejs/parse als backend typ navigieren sie zu "datenbank" > "browser" , klicken sie auf "eine klasse erstellen" , und wählen sie "benutzerdefiniert" benennen sie die klasse aufgabe und setzen sie die berechtigungen so, dass öffentliches lesen und schreiben erlaubt ist (sie können diese später verfeinern) fügen sie in der aufgabe klasse die folgenden felder hinzu titel (string) – der titel der aufgabe beschreibung (string) – einzelheiten zur aufgabe abgeschlossen (boolean) – status der aufgabenerledigung fälligkeitsdatum (datum) – der abgabetermin für die aufgabe klicken sie auf "speichern" um das schema zu erstellen integration von back4app mit angular sie verwenden das parse javascript sdk um ihre angular app mit dem back4app backend zu verbinden installieren sie das parse sdk npm install parse konfigurieren sie das sdk in ihrem angular projekt öffnen sie src/app/app module ts (oder erstellen sie einen speziellen dienst) und initialisieren sie parse mit ihrer application id und javascript key aus dem back4app dashboard (zu finden unter app einstellungen > sicherheit & schlüssel ) zum beispiel erstellen sie einen dienst parse service ts im src verzeichnis import { injectable } from '@angular/core'; import parse from 'parse'; @injectable({ providedin 'root', }) export class parseservice { constructor() { const parse app id = "your application id"; const parse js key = "your javascript key"; parse initialize(parse app id, parse js key); (parse as any) serverurl = 'https //parseapi back4app com/'; } } dann injizieren sie einfach parseservice in den konstruktor ihrer komponenten der dienst wird seinen konstruktor einmal ausführen (beim start der anwendung) und parse für sie initialisieren mit ihrem verbundenen backend können sie jetzt die to do listen benutzeroberfläche erstellen und crud operationen implementieren entwicklung des frontends ihre angular anwendung wird aus komponenten und diensten bestehen, um aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen sie werden die komponentenarchitektur und die abhängigkeitsinjektion von angular für eine reibungslose datenverwaltung nutzen strukturierung ihrer komponenten generieren sie die folgenden komponenten mit angular cli ng generate component components/task form ng generate component components/task list ng generate component components/task item taskformcomponent diese komponente rendert ein formular zum hinzufügen neuer aufgaben es erfasst die benutzereingaben und übermittelt die aufgabendaten an back4app add task // src/app/components/task form/task form component ts import { component, eventemitter, output } from '@angular/core'; import { formsmodule } from '@angular/forms'; import as parse from 'parse'; @component({ selector 'app task form', templateurl ' /task form component html', styleurls \[' /task form component css'], imports \[formsmodule] }) export class taskformcomponent { title = ''; description = ''; @output() refreshtasks = new eventemitter\<void>(); async onsubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this refreshtasks emit(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } tasklistcomponent diese komponente zeigt eine liste von aufgaben an, indem sie über ein array iteriert und jede aufgabe mit der taskitemcomponent rendert no tasks available // src/app/components/task list/task list component ts import { component, input, oninit } from '@angular/core'; import { commonmodule } from '@angular/common'; import as parse from 'parse'; import { taskitemcomponent } from ' /task item/task item component'; @component({ selector 'app task list', templateurl ' /task list component html', styleurls \[' /task list component css'], imports \[commonmodule, taskitemcomponent] }) export class tasklistcomponent implements oninit { @input() tasks any\[] = \[]; @input() fetchtasks! () => void; ngoninit() void {} } taskitemcomponent diese komponente stellt eine einzelne aufgabe dar und bietet schaltflächen zum umschalten des abschlussstatus oder zum löschen der aufgabe {{ task title }} {{ task description }} {{ task completed ? 'undo' 'complete' }} delete // src/app/components/task item/task item component ts import { component, eventemitter, input, output } from '@angular/core'; import as parse from 'parse'; @component({ selector 'app task item', templateurl ' /task item component html', styleurls \[' /task item component css'] }) export class taskitemcomponent { @input() task any; @output() taskchanged = new eventemitter\<void>(); async togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this taskchanged emit(); } catch (error) { console error('error updating task ', error); } } async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this taskchanged emit(); } catch (error) { console error('error deleting task ', error); } } } appcomponent integration verwalten sie im hauptkomponenten den zustand der aufgaben und integrieren sie die aufgabenkomponenten to do list // src/app/app component ts import { component, oninit } from '@angular/core'; import { parseservice } from ' /parse service'; import as parse from 'parse'; import { taskformcomponent } from ' /components/task form/task form component'; import { tasklistcomponent } from ' /components/task list/task list component'; @component({ selector 'app root', imports \[taskformcomponent, tasklistcomponent], templateurl ' /app component html', styleurl ' /app component css' }) export class appcomponent implements oninit { constructor(private parseservice parseservice) {} tasks any\[] = \[]; async fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); this tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } ngoninit() void { this fetchtasks(); } } styling der anwendung erstellen oder aktualisieren sie die stile in ihren komponenten css dateien oder in src/styles css / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } bereitstellung des frontends auf back4app web deployment back4app web deployment bietet eine containerisierte umgebung, um ihre angular anwendung zu hosten konfiguration von angular für die produktion bauen sie ihre produktionsbereite angular app ng build dieser befehl generiert einen dist/ ordner, der ihre kompilierte angular app enthält erstellen einer dockerdatei erstellen sie eine dockerdatei im stammverzeichnis ihres projekts mit folgendem inhalt from node 18 alpine as build workdir /app copy package json package lock json / run npm install g @angular/cli run npm install copy run ng build cmd \["ng", "serve", " host", "0 0 0 0"] testen des docker containers lokal bauen sie ihr docker image docker build t todo frontend führen sie den container aus docker run p 4201 4200 todo frontend öffnen sie http //localhost 4201 in ihrem browser, um zu überprüfen, ob ihre angular app korrekt bereitgestellt wird bereitstellung auf back4app initialisieren sie ein git repository, fügen sie ihre projektdateien hinzu und committen sie git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main öffnen sie http //localhost 4201 in ihrem browser, um zu überprüfen, ob ihre angular app korrekt bereitgestellt wird melden sie sich bei back4app web deployment https //www back4app com/containers an klicken sie auf "neue app erstellen" , geben sie ihren projektnamen ein und wählen sie ihr github repository aus autorisieren sie back4app und wählen sie dockerfile deployment aus bestätigen sie die build einstellungen und klicken sie auf "bereitstellen" , um den bereitstellungsprozess zu starten überwachung ihrer bereitstellung nach der bereitstellung verwenden sie das back4app dashboard, um protokolle zur fehlersuche anzuzeigen die containerleistung und ressourcennutzung zu überwachen rebuilds bei neuen commits auszulösen benutzerdefinierte domains zu konfigurieren, falls erforderlich greifen sie auf ihre live anwendung zu unter https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ testen und debuggen nach der bereitstellung bestätigen sie, dass ihr angular frontend effektiv mit dem back4app backend kommuniziert api verifizierung verwenden sie die entwicklertools ihres browsers (f12 → netzwerk), um api anfragen zu überprüfen aufgabenoperationen fügen sie aufgaben über die benutzeroberfläche hinzu, schließen sie sie ab und löschen sie sie und überprüfen sie die aktualisierungen im back4app datenbankbrowser fehlerbehandlung überprüfen sie die konsolenprotokolle auf fehler und testen sie grenzfälle wie leere eingaben leistungstest simulieren sie langsame netzwerkbedingungen mit browser tools, um die reaktionsfähigkeit zu bewerten best practices für die verwendung von back4app mit angular um ihre anwendung zu optimieren effiziente anfragen verwenden sie batch operationen zur verarbeitung mehrerer aufgaben const tasks = \[task1, task2, task3]; parse object saveall(tasks); optimierte abfragen nur die notwendigen felder abrufen query select('title', 'completed'); umgebungsmanagement sensible schlüssel in umgebungsvariablen speichern ng app parse app id=your app id ng app parse js key=your js key sicherheit verwenden sie acls, um den datenzugriff einzuschränken task setacl(new parse acl(parse user current())); backend entlastung nutzen sie cloud code für komplexe logik, um die last auf der frontend seite zu reduzieren fazit sie haben nun eine vollständige to do listen anwendung erstellt, indem sie ein angular frontend entwickelt, es mit dem backend von back4app integriert und es mit containerisierten workflows bereitgestellt haben dieses tutorial hat sie durch jeden schritt geführt – von der lokalen entwicklung bis zur cloud bereitstellung – und dabei eine robuste interaktion zwischen ihrer angular benutzeroberfläche und den backend diensten sichergestellt blicken sie in die zukunft und denken sie an verbesserungen wie echtzeit updates, verbesserte authentifizierung und integrationen von drittanbietern für weiteres lernen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie die ressourcen der community