So I am working on a project that will allow a user to modify a template. The base template will be made up for ponents and the user will be able to add or remove ponents. I found a few things online - such as grapeJS but it is far to intense for this simple application.

Looking for some advice on a way to go about this, or any resources that will help.

Here is a basic example.

Basic template will consist of these ponents

• Header
• Text Post
• Single Image
• Footer

The list of ponents a user can choose from to add to template mught consist of..

• Image Slideshow
• Video
• 2 Column Text Post
• Automatic wav file player of Wrecking Ball by Miley Cyrus

The user will be able to select from that above list and append to the template list above.

Any thoughts or inputs to get me going in the right direction would be helpful!

So I am working on a project that will allow a user to modify a template. The base template will be made up for ponents and the user will be able to add or remove ponents. I found a few things online - such as grapeJS but it is far to intense for this simple application.

Looking for some advice on a way to go about this, or any resources that will help.

Here is a basic example.

Basic template will consist of these ponents

• Header
• Text Post
• Single Image
• Footer

The list of ponents a user can choose from to add to template mught consist of..

• Image Slideshow
• Video
• 2 Column Text Post
• Automatic wav file player of Wrecking Ball by Miley Cyrus

The user will be able to select from that above list and append to the template list above.

Any thoughts or inputs to get me going in the right direction would be helpful!

• javascript
• angularjs
• user-interface
• ponents

Share Improve this question Follow asked Nov 29, 2017 at 16:34 jobiinjobiin 47922 gold badges55 silver badges1515 bronze badges 2

• Can the user add these ponents to any section (Header, Text Post, Single Image, Footer), or just to the Text Post? – Christian Santos Commented Nov 29, 2017 at 16:41
• Questions asking us to remend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. – georgeawg Commented Nov 29, 2017 at 23:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

This should set you in the right direction:

• Create your Image Slideshow, Video, 2 Column Text Post, and Miley Cyrus Video as AngularJS ponents or directives that work on their own.
• In the directive/ponent where you want to dynamically load the ponents/directives you created above, use $pile to pile your ponents. Then, use $element to add your piled element to the DOM.

I've created a barebones implementation of this, where myTemplate represents the template that holds the main template of your application. The directive slideshow represents the Image Slideshow that is dynamically added to the page when the user clicks on Add Component.

HTML

<div>
  <my-template></my-template>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('myTemplate', function($rootScope, $pile) {
    return {
    controller: function($element, $scope) {
        var vm = this;
        vm.name = "name";

      vm.insert = function() {
        var elStr = "<slideshow></slideshow>";
        var newScope = $rootScope.$new();
        var insertedEl = $pile(elStr)(newScope);
        $element.append(insertedEl);
      };
    },
    controllerAs: "vm",
    template: "<h1>Header</h1><p>Body</p><footer>Footer</footer><button ng-click='vm.insert()'>Add Component</button>"
  }
});

myApp.directive("slideshow", function() {
    return {
    controller: function() {
        this.text = "THIS IS A SLIDESHOW";
    },
    controllerAs: "vm",
    template: "<h1>{{vm.text}}</h1>"
  }
});

Click here for a working JSFiddle.