angular.js - Angular is used throughout the site, but what ideas should be used to implement highly interactive functions like the ones described below using Angular?

Question

This app is described as follows:
1. Area C is divided into multiple pages, and you can switch up and down between pages
2. Ax is a control that can be dragged to the C area to generate corresponding elements, such as pictures, buttons, and text
3. The generated images, buttons, and texts can be dragged within the C range to change their positions
4. Click the generated pictures, buttons, and texts on the right to generate a control panel unique to each element, which is area D. There are many small controllers in area D that can be operated to modify the size and transparency of the elements. Animation, padding, text editing, image uploading and so on.
5. B is used to add, switch, delete, modify the name of pages, etc.

What I want to ask is, how to complete this function under the premise that the entire website is built in Angular? Can Angular handle so many UI interactions? Or is there any solution? After understanding Angular's directive, if these interactions are encapsulated in the directive, it feels very inflexible. Hope to get some advice.

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.