组件和 cms 驱动应用程序的 AngularJS 最佳实践

Posted

技术标签:

【中文标题】组件和 cms 驱动应用程序的 AngularJS 最佳实践【英文标题】:AngularJS best practice for component and cms driven app 【发布时间】:2016-07-14 17:31:08 【问题描述】:

我正在寻找角度 1 组件和 CMS 驱动方法的最佳实践。

我正计划构建多个标签模板,我希望这个项目是组件驱动的、高度可重用的并由 CMS 内容驱动。

我打算使用 JSON 作为组件树,然后使用 $compile 服务逐步编译树,如下所示:

angular.module('app.compile', [], function($compileProvider) 
$compileProvider.directive('compile', function($compile) 
    return function(scope, element, attrs) 
        scope.$watch(
            function(scope) 
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            ,
            function(value) 
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            
        );
    ;
  );
);

http://plnkr.co/edit/MwUjE9l6U5wMkE89kwqY?p=preview

    我想知道是否有人已经尝试过这个并且可以分享他的反馈? 这听起来像是好的解决方案吗?这是最佳做法吗? 这种使用$compile服务的方法会不会影响性能?

【问题讨论】:

【参考方案1】:

我更喜欢使用角度组件。我使用 $compile 只是为了动态使用我的组件。仅使用指令来更改 DOM。如果您的控件有模板,请改用组件。

检查样本angular components with typescript

谢谢!

【讨论】:

以上是关于组件和 cms 驱动应用程序的 AngularJS 最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

如何在骨干和angularjs中使用reactJS组件

CMS牙科诊所管理系统[关闭]

AngularJS - 嵌套组件回调没有使其通过组件工厂

angularjs2 学习笔记 组件

angularjs学习笔记--组件$http$qmodule

如何在 AngularJS 组件中定义一个新变量