angular.js - 全站用的angular,但是像下面描述的这样强交互的功能用angular该用什么思路去做呢?
習慣沉默
習慣沉默 2017-05-15 16:53:09
0
4
603

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

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

習慣沉默
習慣沉默

répondre à tous(4)
習慣沉默

J'ai aussi lu un peu récemment. Angularjs n'est-il pas adapté aux opérations DOM fréquentes ?

淡淡烟草味

C'est presque la même chose que de façon frappante

de manière frappante est angulaire mélangé avec réagir

仅有的幸福

C'est ce que fait le routeur d'interface utilisateur angulaire.
Il s'agit d'un module plug-in d'angular. Les principaux scénarios applicables sont 多层级页面 ou 单页面-多视图.

给我你的怀抱

Ce problème semble compliqué, mais en fait, tant qu'il existe une meilleure abstraction du modèle de données front-end, de nombreux problèmes peuvent être simplifiés :

Tout d'abord, vous pouvez extraire un service pour stocker les composants que l'utilisateur a fait glisser dans la zone C, où se trouvent les positions de ces composants et comment sont-ils configurés. Cela pourrait ressembler à ceci :

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

La zone D charge différentes directives selon le type sélectionné dans la zone C, et restitue selon la configuration sélectionnée.

Comme je ne sais pas quel type de changements de rendu seront provoqués par la modification de la page dans la zone B, je ne peux pas donner de suggestions sur le modèle, mais l'idée générale est la même.

En fait, il est recommandé d'utiliser React pour faire ce genre de chose. Ce type d'interaction utilisateur entraînera de nombreuses modifications de données et de rendu. Je suis plus dubitatif sur les performances et la maintenabilité d'Angular. . . React est en fait conçu pour gérer ce genre de scénario.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!