Angularjs архитектура

Question

Я пытаюсь обернуть мою голову вокруг наследования и многоразовых виджетов в AngualarJS (к которым я совершенно новый), и действительно, как если бы кто-то может помочь с указателями для моей проблемы:

У меня есть приложение с двумя страницами (маршрут). Обе эти страницы должны быть настраиваемыми пользователем, причем, когда дело доходит до того, какие виджеты будут отображаться, а также более конкретно для таблиц, которые видят, какие столбцы данных, которые они хранят, должны отображаться.

Что я делаю, так это то, что при загрузке страницы я выбираю конфигурацию JSON для конкретного пользователя из REST API. Это JSON будет выглядеть примерно так:

{ 
    "widgets": [ 
    { "type":"TableWidget", "columns":["title", "from_year"], "dataSource":"/api/movies"}, 
    { "type":"TableWidget", "columns":["name", "country"], "dataSource":"/api/actors"}, 
    { "type":"TableWidget", "columns":["name", "age"], "dataSource":"/api/actors"} 
    ] 
} 

Это означает, что пользователь хочет отображается три таблицы, два из которых использует один и тот же источник данных, за исключением только показывая различные столбцы (в действительности это не будет иметь места, а скорее граф или что-то еще, используя одни и те же данные, но отображая его по-разному).

Теперь, что я хотел бы сделать здесь, это создать общий TableWidget с внешним видом, который я хочу использовать для таблиц. Он должен быть привязан к источнику данных, и некоторые вещи должны быть настраиваемыми. В иерархии объектов я хотел бы создать какой-то тип BaseWidget, у которого есть свойства, которыми будут обладать все мои виджеты. Затем я хочу, чтобы TableWidget наследовал общие свойства, а также добавил свойства, специфичные для таблицы.

Поток Я предвижу в приложении является то в основном:

1. конфигурации Get пользователя
2. Loop через конфигурацию и экземпляр каждого виджета пользователь хочет видеть
3. Разместите виджеты на странице розыгрыша их

Это явно не использует директивы, поскольку html не знает о пользовательской конфигурации. Я не знаю, как загружается время страницы, и я не знаю, откуда будут извлекаться данные. Одной из подобных реализаций является Kibana, но их база кода слишком массивна для меня, чтобы иметь время, чтобы обернуть мою голову вовремя, чтобы я мог решить мою проблему.

Понятно, что указатели на документацию и аналогичные проблемы и решения будут оценены. Я продолжаю находить очень простые учебники и примеры, а также для поиска в архитектуре. Я только нахожу сообщения о рекомендуемой структуре каталогов.

Answer 1

Вы можете использовать директиву угловых фрагментов из угловых ui: ui-utils. Он позволяет встраивать фрагменты HTML-кода в специальную директиву «u--fragment». Вы можете смоделировать свою общую таблицу, используя обычные шаблоны, а затем - на основе dataSource - отображать различные макеты внутри. Чтобы отобразить множество таблиц, можно использовать директиву «ng-repeat».

Что касается особого вида и свойств - см. Создание пользовательских директив: directives. Он позволяет создавать параметризованные директивы и может использоваться для создания пользовательских элементов html, которые выглядят по-разному на основе предоставленной модели.