Выполнение операций CRUD с помощью Angular 9 шаг за шагом

"Веб-разработка"

Веб-разработка, операции Angular Crud (редактирование/удаление/обновление/просмотр/создание)

ЧитатьПодробнее :- Пошаговое выполнение операций CRUD с помощью Angular 9 — Часть 1 (Настройка)

1 — Создайте API в Spring Boot

Обычно я делаю это с помощью Spring Boot. Вы уже должны знать, как это сделать. Тем не менее, это примерно шаги:

Создайте новый проект Spring, добавьте зависимости jpa, Web и H2.

Добавьте FriendController. Файлы java, Friend.java, FriendService.java и FriendRepository.java. Затем также файл data.sql, содержащий некоторый начальный запрос sql для добавления исходных данных. Я рекомендую использовать базу данных H2. См. настройку ниже, которую вы можете поместить в свой файл application.properties.

spring.h2.console.enabled = правда

spring.jpa.hibernate.ddl-auto=обновление

весна.источник данных.платформа=h2

spring.datasource.url=jdbc:h2:mem:frienddb

2 — Настройте приложение Angular

Создайте папку, в которой вы хотите разместить свое приложение. Откройте терминал, перейдите в эту папку и запустите команду, чтобы создать приложение Angular в этой папке.

ng новый AngularDemo

После создания приложения перейдите в папку. Затем выполните команду ниже

нг служить

Приложение будет запущено, так что вы можете протестировать его.

3 — Добавьте несколько библиотек пользовательского интерфейса

Обычно я добавляю Bootstrap, JQuery, ngx-bootstrap, AngularMaterial и Font-Awesome. Приведенные ниже команды сделают именно это. Обратите внимание, что вы запускаете их один за другим.

npm установить загрузчик -сохранить

npm установить удивительный шрифт -сохранить

npm установить угловой материал -сохранить

нг добавить @ng-bootstrap/ng-bootstrap

Примечание. Если у вас возникла ошибка при установке ng-bootstrap, возможно, вам придется выполнить приведенную ниже команду, чтобы разрешить устаревшие зависимости.

Конфигурация npm устанавливает legacy-peer-deps true

Чтобы иметь возможность загружать и улучшать шрифты на своей странице, откройте файл styles.css и добавьте в него следующее:

@import «~bootstrap/dist/css/bootstrap.css»;

@import «~font-awesome/css/font-awesome.css»;

4 — Создайте компоненты

Компоненты — это просто разные части пользовательского интерфейса. Они также могут быть разными страницами. В этом примере понадобятся два компонента:

один для главной страницы
другой для отображения списка друзей

Чтобы создать компоненты, выполните приведенную ниже команду. Вам нужно бежать один за другим.

ng сгенерировать компонент дома

нг создать друга компонента

5 — Добавьте немного маршрутизации

Angular Routing — это просто способ добавить навигацию в ваше приложение. Вот как это будет выглядеть:

если пользователь посещает /home, домашний компонент будет отображаться
если пользователь посещает /friends, компонент друзей будет отображать
однако, если пользователь не вводит какой-либо путь, он должен перейти к домашнему компоненту.

Эти настройки задаются в файле app-routing.module.ts. Вы можете найти его в папке src/app. Итак, откройте этот файл и добавьте следующие маршруты:

{путь: «дом», компонент: HomeComponent},

{путь: «друзья», компонент: FriendComponent},

{путь: ", компонент: HomeComponent}

];

6 — Настройка шаблона