AngularJS best practices for component and cms applications

Question

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

I plan to create several shortcut templates, and I want this project to be component, very reusable and managed by CMS content.

I plan to use JSON as a component tree and just compile the tree step by step using $ compile service as follows:

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

• I would like to know someone has already tried this before and can share their reviews.
• Does this sound like a good solution? Is this the best practice?
• Could this method to use the $compile service be bad for performance?

Answer 1

I prefer to use angular components. I use $ compilation only for the dynamic use of my components. Use directives only to modify the DOM. If your control uses a template usage component.

Verify that the sample angular components with typescript

Tks!