当页面结构由用户生成时，应该如何使用AngularJS ?

How should AngularJS be used when the page structure is user-generated?

本文关键字：何使用 AngularJS 结构 用户      更新时间：2023-09-26

我正在构建一个web应用程序，它将有大约6个不同的"小部件"，小框执行各种功能，可以由用户在页面上添加，删除和定位。每个用户都有不同的小部件集和位置。

我的经验主要是使用jQuery，如果我用以前制作应用程序的方式来制作这个应用程序，我会使用jQuery ($("<div>", {class:"widget"})等)生成小部件并将它们添加到页面中。我想远离jQuery，因为我知道还有很多其他有趣的框架。

从我对AngularJS的了解来看，如果开发人员在创建应用程序时知道页面的结构，它看起来会更有用。它很好地分离了MVC，但我的视图的结构将完全取决于用户的偏好。我觉得AngularJS最大的优势在于它的指令，考虑到我的HTML文件基本上一开始就是空白的，我不知道如何利用它。

使用AngularJS来帮助我做我想做的事情，构造我的应用程序的好方法是什么?有比AngularJS更好的框架吗?

据我所知，您所需要的只是一个web组件方法。在Angular中，它是作为指令来实现的。您可以将小部件创建为指令，然后使用自定义元素或元素属性指定它们在页面上的位置。例如:

angular.module('widgets', [])
    .directive('my-widget1', function () {
        return {
            restrict: 'E',
            templateUrl: 'widget1.html'
        }
    })
    .directive('my-widget2', function () {
        return {
            restrict: 'A',
            template: '<div class="simple-widget-2">...</div>'
        }
    });

然后在html:

<widget1></widget1>
...
<div my-widget2></div>

希望能有所帮助

相关文章：