AngularJS best practice for component and cms driven app

Question

I am looking for the best practice for angular 1 component and CMS driven approach.

I am planning to build multiple label templates and I want this project to be component driven, highly reusable and driven by a CMS content.

I am planning to use JSON as a tree of components and just compile the tree step by step using $compile service like this:

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

1. I would like to know if someone have already tried this before and can share his feedback?
2. Does it sounds like good solution? Is this the best practice available?
3. Will this method for using $compile service might be bad for performance?

Answer 1

I prefer to use angular components. I use $compile just for dynamic usage of my components. Use directives just only to change the DOM. If your control has a template use component instead.

Check that sample angular components with typescript

Tks!