Как создать фронтенд на Angular и подключить его к бэкенду?

в этом учебном пособии вы создадите приложение «список дел» с использованием angular и подключите его к управляемой службе бэкенда, работающей на back4app этот гид предназначен для вас, если вы хотите освоить основные операции crud (создание, чтение, обновление, удаление) и создать динамичный, отзывчивый интерфейс с помощью angular к концу этого учебного пособия ваше приложение будет бесшовно взаимодействовать с бэкендом, который обрабатывает хранение данных, аутентификацию и многое другое создание полнофункционального приложения часто включает в себя сложную конфигурацию бэкенда и управление базами данных чтобы упростить ваш рабочий процесс, мы используем back4app— надежный бэкенд как услуга —чтобы вы могли сосредоточиться на разработке функционального фронтенда на angular back4app предоставляет полностью управляемую nosql базу данных, аутентификацию пользователей, cloud code для пользовательской логики и sdk для бесшовной интеграции это позволяет вам создавать и развертывать масштабируемые приложения без управления серверной инфраструктурой основные выводы следуя этому учебному пособию, вы инициализируйте современный проект angular с помощью angular cli бесшовно интегрируйте службу бэкенда для управления данными вашего приложения реализуйте основные операции crud для динамичного списка дел разверните ваше полностью функциональное приложение, используя контейнеризованные рабочие процессы на back4app предварительные требования перед тем как начать, убедитесь, что у вас есть node js и npm установлены на вашем компьютере проверьте установки с помощью node v и npm v базовые знания angular , включая компоненты, сервисы и внедрение зависимостей аккаунт back4app для управления вашими бэкенд сервисами зарегистрируйтесь на back4app https //www back4app com/ если вы еще этого не сделали с этими предварительными требованиями вы готовы начать создание вашего проекта настройка проекта начните с настройки вашей локальной среды разработки и инициализации нового проекта angular с помощью angular cli убедитесь, что у вас установлен node js (версия lts) если нет, скачайте его с nodejs org https //nodejs org/ установите angular cli глобально, если вы еще этого не сделали npm install g @angular/cli создайте новый проект angular ng new todo app routing style=css перейдите в каталог вашего проекта cd todo app запустите сервер разработки, чтобы проверить настройку ng serve откройте http //localhost 4200 в вашем браузере, чтобы увидеть ваше angular приложение в действии с готовым фронтендом переходите к созданию вашего бэкенда на back4app создание бэкенда todo back4app предлагает полностью управляемый бэкенд сервис на базе parse , включая nosql базу данных, аутентификацию, cloud code и автоматически сгенерированные api следуйте этим шагам, чтобы настроить ваш бэкенд войдите в вашу панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " назовите ваше приложение (например, todoapp ) и выберите nodejs/parse в качестве типа бэкенда перейдите в "база данных" > "браузер" , нажмите "создать класс" , и выберите "пользовательский" назовите класс task и установите разрешения для публичного чтения и записи (вы можете уточнить их позже) в классе task добавьте следующие поля title (строка) – заголовок задачи description (строка) – подробности о задаче completed (булевый) – статус выполнения задачи duedate (дата) – срок выполнения задачи нажмите "сохранить" для создания схемы интеграция back4app с angular вы будете использовать parse javascript sdk для подключения вашего angular приложения к бэкенду back4app установите parse sdk npm install parse настройте sdk в вашем angular проекте откройте src/app/app module ts (или создайте отдельный сервис) и инициализируйте parse с вашим application id и javascript key из панели управления back4app (находится в разделе app settings > security & keys ) например, создайте сервис parse service ts в директории src 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/'; } } затем, в ваших компонентах просто внедрите parseservice в конструктор сервис выполнит свой конструктор один раз (при запуске приложения), инициализируя parse для вас теперь, когда ваш бэкенд подключен, вы можете создать интерфейс to do list и реализовать операции crud разработка фронтенда ваше angular приложение будет состоять из компонентов и сервисов для добавления, отображения, обновления и удаления задач вы будете использовать архитектуру компонентов angular и внедрение зависимостей для удобного управления данными структурирование ваших компонентов сгенерируйте следующие компоненты с помощью angular cli ng generate component components/task form ng generate component components/task list ng generate component components/task item компонентформызадачи этот компонент отображает форму для добавления новых задач он захватывает ввод пользователя и отправляет данные задачи в 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); } } } компонентсписказадач этот компонент отображает список задач, перебирая массив и отображая каждую задачу с помощью компонентаэлементазадачи 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 этот компонент представляет собой отдельную задачу и предоставляет кнопки для переключения статуса выполнения или удаления задачи {{ 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 в вашем основном компоненте управляйте состоянием задач и интегрируйте компоненты задач 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(); } } стилизация приложения создайте или обновите стили в ваших css файлах компонентов или в 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; } } развертывание фронтенда на back4app web deployment back4app web deployment предоставляет контейнеризированную среду для размещения вашего angular приложения настройка angular для продакшена соберите ваше готовое к продакшену angular приложение ng build эта команда генерирует dist/ папку, содержащую ваше скомпилированное angular приложение создание dockerfile создайте dockerfile в корне вашего проекта со следующим содержимым 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"] тестирование контейнера docker локально соберите ваш docker образ docker build t todo frontend запустите контейнер docker run p 4201 4200 todo frontend откройте http //localhost 4201 в вашем браузере, чтобы убедиться, что ваше angular приложение работает корректно развертывание на back4app инициализируйте репозиторий git, добавьте файлы вашего проекта и сделайте коммит 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 maingit 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 maingit 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 maingit 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 maingit 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 maingit 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 войдите в back4app web deployment https //www back4app com/containers нажмите "создать новое приложение" , укажите имя вашего проекта и выберите ваш репозиторий github авторизуйте back4app и выберите dockerfile deployment подтвердите настройки сборки и нажмите "развернуть" для начала процесса развертывания мониторинг вашего развертывания после развертывания используйте панель управления back4app для просмотр журналов для отладки мониторинг производительности контейнера и использования ресурсов запуск повторных сборок при новых коммитах настройка пользовательских доменов при необходимости получите доступ к вашему живому приложению по адресу https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ тестирование и отладка после развертывания подтвердите, что ваш angular фронтенд эффективно взаимодействует с бэкендом back4app проверка api используйте инструменты разработчика вашего браузера (f12 → сеть), чтобы проверить запросы к api операции с задачами добавляйте, завершайте и удаляйте задачи через интерфейс и проверяйте обновления в браузере базы данных back4app обработка ошибок проверьте журналы консоли на наличие ошибок и протестируйте крайние случаи, такие как пустые отправки тестирование производительности симулируйте медленные сетевые условия с помощью инструментов браузера, чтобы оценить отзывчивость лучшие практики использования back4app с angular чтобы оптимизировать ваше приложение эффективные запросы используйте пакетные операции для обработки нескольких задач const tasks = \[task1, task2, task3]; parse object saveall(tasks); оптимизированные запросы извлекайте только необходимые поля query select('title', 'completed'); управление окружением храните чувствительные ключи в переменных окружения ng app parse app id=your app id ng app parse js key=your js key безопасность используйте acl для ограничения доступа к данным task setacl(new parse acl(parse user current())); снятие нагрузки с бэкенда используйте cloud code для сложной логики, чтобы уменьшить нагрузку на фронтенд заключение теперь вы создали полнофункциональное приложение to do list, создав фронтенд на angular, интегрировав его с бэкендом back4app и развернув его с помощью контейнеризованных рабочих процессов этот учебник провел вас через каждый шаг — от локальной разработки до облачного развертывания — обеспечивая надежное взаимодействие между вашим интерфейсом angular и бэкенд сервисами смотрим в будущее, рассмотрите улучшения, такие как обновления в реальном времени, улучшенная аутентификация и интеграция с третьими сторонами для дальнейшего обучения посетите документацию back4app https //www back4app com/docs и изучите ресурсы сообщества