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

в этом учебном пособии вы создадите приложение «список дел» с использованием angular и подключите его к управляемой службе бэкенда, работающей на back4app этот гид предназначен для вас, если вы хотите освоить основные операции crud (создание, чтение, обновление, удаление) и создать динамичный, отзывчивый интерфейс с помощью angular к концу этого учебного пособия ваше приложение будет бесшовно взаимодействовать с бэкендом, который обрабатывает хранение данных, аутентификацию и многое другое создание полнофункционального приложения часто включает в себя сложную конфигурацию бэкенда и управление базами данных чтобы упростить ваш рабочий процесс, мы используем back4app— https //blog back4app com/backend as a service baas/ —чтобы вы могли сосредоточиться на разработке функционального фронтенда на angular back4app предоставляет полностью управляемую nosql базу данных, аутентификацию пользователей, cloud code для пользовательской логики и sdk для бесшовной интеграции это позволяет вам создавать и развертывать масштабируемые приложения без управления серверной инфраструктурой основные выводы следуя этому учебному пособию, вы инициализируйте современный проект angular с помощью angular cli бесшовно интегрируйте службу бэкенда для управления данными вашего приложения реализуйте основные операции crud для динамичного https //todoapp ku5ofg8s b4a run/ разверните ваше полностью функциональное приложение, используя контейнеризованные рабочие процессы на back4app предварительные требования перед тем как начать, убедитесь, что у вас есть node js и npm установлены на вашем компьютере проверьте установки с помощью node v и npm v базовые знания angular , включая компоненты, сервисы и внедрение зависимостей аккаунт back4app для управления вашими бэкенд сервисами зарегистрируйтесь на https //www back4app com/ если вы еще этого не сделали с этими предварительными требованиями вы готовы начать создание вашего проекта настройка проекта начните с настройки вашей локальной среды разработки и инициализации нового проекта angular с помощью angular cli убедитесь, что у вас установлен node js (версия lts) если нет, скачайте его с 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 следуйте этим шагам, чтобы настроить ваш бэкенд войдите в вашу 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 войдите в https //www back4app com/containers нажмите "создать новое приложение" , укажите имя вашего проекта и выберите ваш репозиторий github авторизуйте back4app и выберите dockerfile deployment подтвердите настройки сборки и нажмите "развернуть" для начала процесса развертывания мониторинг вашего развертывания после развертывания используйте панель управления back4app для просмотр журналов для отладки мониторинг производительности контейнера и использования ресурсов запуск повторных сборок при новых коммитах настройка пользовательских доменов при необходимости получите доступ к вашему живому приложению по адресу 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 и бэкенд сервисами смотрим в будущее, рассмотрите улучшения, такие как обновления в реальном времени, улучшенная аутентификация и интеграция с третьими сторонами для дальнейшего обучения посетите https //www back4app com/docs и изучите ресурсы сообщества