Пишу курсовую с использованием angular cli, тема курсовой "сайт для проведения краудфандинговых кампаний". У пользователя есть личная страница на которой он управляет списком своих кампаний (таблица с возможностью создать/удалить/редактировать кампанию/открыть в режиме чтения), поля с информацией о пользователе. Каждая кампания состоит из: название, краткое описание, галерея изображений и дата окончания. На главной странице отображаются: последние обновленные кампании, кампании с самыми большими рейтингами.
Вот как выглядит код:
1. Поля с информацией о пользователе:
<div id="page" class="container-fluid">
<div formGroupName="address">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
<h3>Address</h3>
<label>
Street:
<input type="text" formControlName="street">
</label>
<label>
City:
<input type="text" formControlName="city">
</label>
<label>
State:
<input type="text" formControlName="state">
</label>
<label>
Zip Code:
<input type="text" formControlName="zip">
</label>
<button type="save" [disabled]="!profileForm.valid">Save</button>
</div>
</div>
2. Кампания:
<div id="page" class="container-fluid">
<div *ngFor="let product of products">
<div formGroupName="company">
<h3>Company creation</h3>
<form [formGroup]="profileForm">
<label>
Company Name:
<input type="text" formControlName="companyName">
</label>
<!--Описание-->
<div *ngFor="let product of products">
<p *ngIf="product.description">
{{ product.description }}
</p>
</div>
<!--img-->
<!--a draggable element-->
<div [dndDraggable]="draggable.data"
[dndEffectAllowed]="draggable.effectAllowed"
[dndDisableIf]="draggable.disable"
(dndStart)="onDragStart($event)"
(dndCopied)="onDraggableCopied($event)"
(dndLinked)="onDraggableLinked($event)"
(dndMoved)="onDraggableMoved($event)"
(dndCanceled)="onDragCanceled($event)"
(dndEnd)="onDragEnd($event)">
<div *ngIf="draggable.handle"dndHandle>
HANDLE
</div>
draggable ({{draggable.effectAllowed}}) <span [hidden]="!draggable.disable">DISABLED</span>
<div dndDragImageRef>DRAG_IMAGE</div>
</div>
<section dndDropzone
(dndDragover)="onDragover($event)"
(dndDrop)="onDrop($event)">
dropzone
<div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;"dndPlaceholderRef>
placeholder
</div>
</section>
</form>
</div>
<button type="save" [disabled]="!profileForm.valid">Save</button>
</div>
</div>
Как мне это сохранять в Базу Данных?
И как выводить сюда:
3. Главная:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" sortable="name" (sort)="onSort($event)">Company</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let сompany of companies">
<td>
<img>
{{ сompany.name }}
</td>
</tr>
</tbody>
</table>
<br/>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" sortable="name" (sort)="onSort($event)">Company</th>
<th scope="col" sortable="area" (sort)="onSort($event)">Rating</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let сompany of companies">
<td>
<img>
{{ сompany.name }}
</td>
<td>{{ сompany.rating }}</td>
</tr>
</tbody>
</table>
4. При открытие кампании в режиме чтения:
<div id="page" class="container-fluid">
<ng-template #longContent let-modal>
<ngb-carousel *ngIf="images">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[0]" alt="Random first slide">
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[1]" alt="Random second slide">
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="images[2]" alt="Random third slide">
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</ng-template>
</ngb-carousel>
</ng-template>
<!--name company-->
<p>NgModel and reactive forms can be used without the 'rate' binding</p>
<div class="form-group">
<ngb-rating [formControl]="ctrl"></ngb-rating>
<div class="form-text small">
<div *ngIf="ctrl.valid" class="text-success">Thanks!</div>
<div *ngIf="ctrl.invalid" class="text-danger">Please rate us</div>
</div>
</div>
<hr>
<pre>Model: <b>{{ ctrl.value }}</b></pre>
<button class="btn btn-sm btn-outline-{{ ctrl.disabled ? 'danger' : 'success'}} mr-2" (click)="toggle()">
{{ ctrl.disabled ? "control disabled" : " control enabled" }}
</button>
<button class="btn btn-sm btn-outline-primary mr-2" (click)="ctrl.setValue(null)">Clear</button>
<!--opisanie-->
</div>
5. Личная страница пользователя:
<div id="page" class="container-fluid">
<div>
<!--Ссылка на настройки профиля-->
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Name Company</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="btn btn-primary" i18n>Переход куда-нибудь</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Latest updater companies
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Companies</th>
<th scope="col">Creare</th>
<th scope="col">Remove</th>
<th scope="col">Edit</th>
<th scope="col">Reading</th>
</tr>
</thead>
<tbody *ngFor="let x of data">
<tr *ngFor="let company of companies">
<th scope="row">1</th>
<th>
<a [title]="company.name + ' details'" [routerLink]="['/companies', companyId]">
{{ company.name }}
</a>
</th>
</tr>
<tr>
<td>
<td>
<button type="creare" [disabled]="!profileForm.valid">Creare</button>
</td>
</td>
<td>
<button type="remove" [disabled]="!profileForm.valid">Remove</button>
</td>
<td>
<button type="edit" [disabled]="!profileForm.valid">Edit</button>
</td>
<td>
<button type="reading" [disabled]="!profileForm.valid">Reading</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Заранее спасибо, и если вы нашли ошибку в коде прошу указать.
Средний
Простой