AngularJs 1.5 - Компонентная архитектура, привязки и передовой опыт

Question

После моего вопроса Angularjs 1.5 - страницы и компоненты CRUD

У меня есть несколько дополнительных вопросов дизайна на основе компонентной архитектуры.

1. Согласно Руководству, если у меня есть дочерний компонент с привязками от родителя, я должен обрабатывать данные на родительском объекте. Итак, где я могу сохранить данные, например, в родительском или дочернем?

пример

 <my-child on-save="$ctrl.save"></my-child>

Компонент MyChild содержит форму для сохранения данных. В этом сценарии, где я должен сохранить данные, в родительском или дочернем? Предполагая, что я делаю это в child, я использую функцию родительского сохранения для обновления пользовательского интерфейса?

2- Если у меня есть дочерний компонент без привязок, правильно ли делать сохранение данных и манипуляцию в дочернем?

3- В идеале все приложения должны представлять собой дерево компонентов. Допустим, у меня есть форма, которая называется ng-view и router. В общем, я должен думать о базовом или родительском компоненте, представляющем весь пользовательский интерфейс приложения, для которого, например, моя форма является дочерней? Так я должен распространять привязки, как в пунктах 1 и 2?

Надеюсь, мой вопрос ясен

Answer 1

Чтобы объяснить это, я сначала должен сделать некоторые соображения о компонентах, которые могут изменить ваше представление о дизайне вашего приложения.

Компоненты

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

Например: набор компонентов, один состав за другим, но все компоненты;

<component>    
    <component></component>
    <component>        
        <component></component>
        <component></component>        
    </component>    
</component>

Умные и тупые компоненты

Я читал, что большинство компонентных сред и библиотек используют этот подход. Компоненты разделены на две категории: Smart и Dumb. Это лучше описано в статье Теро Парвиайнена, а также Дана Абрамова.

Например: все еще являются компонентом, но определены его категорией

<app>
    <nav></nav>
    <!-- projects-page is Dumb: I don't have to know nothing
    <!-- just organize and display things -->
    <projects-page>
        <!-- project-list is Smart: I must know how to retrieve projects -->
        <project-list>
            <!-- Dumb: just display -->
            <project-list-item></project-list-item>
            <!-- Dumb: just display -->     
            <project-list-item></project-list-item>
        </project-list>
    </projects-page>    
</app>

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

Ответ

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

В любом случае, самое главное, чтобы убедиться, что вы сохраняете свои данные от интеллектуального компонента, предпочтительно от владельца этих данных. Думайте о "умных" компонентах как о менеджерах, а о таких же "тупых", как производители Кроме того, ознакомьтесь с этой статьей о написании компонентных приложений: Написание компонентного приложения для козьего знакомства с angular 1.5, написанного Димой Гроссманом.

ПРИМЕЧАНИЕ. Думайте о интеллектуальных компонентах как о состоянии. В основном это означает, что в некоторых случаях интеллектуальные компоненты менее пригодны для повторного использования. Если вам нужно повторно использовать form-component на другом компоненте, где объект project является частью другого объекта (например, { client: { name: '', projects: [{ id:1, ...} ...]) и вы хотите использовать ту же форму для редактирования проекта в этом объекте, вы столкнетесь с проблемой. Вы не можете повторно использовать одну и ту же логику компонента, поэтому в этой ситуации тупой компонент может быть более полезным для повторного использования, потому что он более прост и объективен в процессе и не требует никакого решения, просто показывает вещи, получает и возвращает данные.