Архитектура приложения Angular

Всем привет! Сейчас занимаюсь разработкой дипломного проекта на стеке MEAN. Поднял сервер, написал rest api, паттерн MVC. Представления в виде pug файлов. можно редактировать, добавлять и просматривать данные базы. Но это серверное приложение и как бы нужно писать клиент а у меня в Angular опыта совсем нету я на скрине покажу какой внешний вид странички “Справочник препаратов”:

Это должно быть SPA. Подскажите архитектуру такого приложения Angular. так же должна быть авторизация и регистрация пользователей.

По целой архитектуре не подскажу, но посоветую сходить посмотреть как реализовано todomvc приложение на ангуляре. Там есть и изменение статусов элементов списка и сортировка.

http://todomvc.com/examples/angularjs/#/

мне друг немного подсказал уже, спасибо!

Есть еще вопрос. Есть компонент “Справочник” в который я подгружаю данные с базы. В этом компоненте есть дочерние компоненты в виде отдельных страниц: “Главная”, “Посмотр элемента” и тд. Написал навигацию по этим страницам справочника, теперь стоит вопрос как определенной дочерней странице справочника передать определенные данные объекта полученного с базы который находится в родительском компоненте “Справочник”, когда навигации не было передавал вот так:

<app-directory-main 
    [editDate]="directoryData?.editDate" 
    [editUser]="directoryData?.editUser"
    [drugs]="directoryData?.drugs">
</app-directory-main>

а теперь тут router-outlet

Привіт.
Стосовно роботи з даними, в ангуляр, якщо не використовуєш підхід з використанням “стора”, я б порадив мати окремий сервіс для роботи з http (якщо то http/ можна також з вебсокетами).

Абстрактний класс де будуть зберігатись основні конфіги доменів та опис гет/пут/деліт ріквестів, та сервіси , які наслідують його та вже кличуть конкретну апі з конкретними параметрами.

Є концепція Dumm/Smart components, перші тільки отримуть дані та малюють, другі можуть кликати сервіс роботи з даними.

Можна почати з того що головний компонент, що рендериться по роуту - він буде Смарт компонентом та буде кликати метод сервіса для отримання даних.

Та потім він вже буде передавати дочернім компонентам дані (якщо вони їм потрібні), які в копонентах будуть як @input дані, та якщо щось треба змінити, будуть колати @output функцію.

Якось так, коротко намагався описати.

1 лайк