angular.js - 全站用的angular，但是像下面描述的这样强交互的功能用angular该用什么思路去做呢？

Question

这个应用描述如下：
1、C区域分为多个页面，页面间上下切换
2、Ax是控件，可以拖拽到C区域，生成对应的元素，比如图片、按钮、文本
3、生成的图片、按钮、文本可以在C范围内拖拽，以改变位置
4、单击生成的图片、按钮、文本在右侧生成每个元素特有的控制面板，也就是区域D，区域D里面有很多小的控制器，可以进行操作，以修改元素的尺寸、透明度，动画，padding，文本编辑，图片上传等等等的功能。
5、B用来进行页面添加、切换、删除、修改名称等

想问的是，在整站都是angular做的前提下，怎么去完成这个功能呢？这么多的ui交互，angular可以做么？或者说有什么解决方案么？了解过angular的directive，如果把这些交互都封装在directive中感觉灵活性很差。希望得到指点。

Answer 1

I have also read a little bit recently. Isn’t angularjs not suitable for frequent DOM operations?

Answer 2

The needs are almost the same as strikingly

strikingly is angular mixed with react

Answer 3

angular ui router is what it does.
This is a plug-in module of angular. The main applicable scenarios are 多层级页面或单页面-多视图.

Answer 4

This problem seems complicated, but in fact, as long as there is a better front-end data model abstraction, many problems can be simplified:

First, you can abstract a Service to store which components the user dragged into the C area, where are the positions of these components, and how are they configured. It might look like this:

js[{
    type: 'Image',
    position: {
        top: 12,
        right: 12
    },
    config: {
        height: 100,
        width: 200
    }
}, ...]

The D area loads different directives according to the type selected in the C area, and renders according to the selected config.

Since I don’t know what kind of render changes will be caused by the page modification in area B, I can’t give any suggestions on the model, but the general idea is the same.

In fact, it is recommended that you use react to do this kind of thing. This kind of user interaction will lead to a lot of data modification and render changes. I am more doubtful about the performance and maintainability of angular. . . React is actually designed to handle this kind of scenario.