Hi everybody,

We have the page I list below which I think will benefit from using a component. The question I have is - it it possible to have component referencing itself? We don't have any components written in our project yet - how hard it is?

Would you please help me to re-write this HTML page into using components?

<script type="text/ng-template" id="nodes_renderer.html">
    <div class="nestedSortable-handle" data-drop="!(node.itemId > 0)" 
         data-jqyoui-options="{'greedy': true}" 
         jqyoui-droppable="{multiple:false,onDrop:'onDropWebDciNode(node)', deepCopy:false}" 
         ng-model="node.nodes">
        <img src="Content/images/ajax-loader.gif" 
             style="height:24px;width:24px;" ng-show="node.isLoading" />
        <button type="button"
                ng-click="loadWebItemTree(node)" class="salespoint-thumb-controls" 
                ng-show="node.itemId > 0 || !node.isLoading">
            <i ng-class="getIconForWebNode(node)" class="icon-1x fa" 
               ng-style="node.nodes.length > 0 || node.initChildNodeCount > 0 ?  {'font-weight': 'bold'} : ''"></i>
        </button>
          {{node.descrip}} 
        <button type="button" ng-show="node"
                class="salespoint-thumb-controls pull-right" 
                modal-popup modal-title="@Labels.editNode" 
                modal-template="items/itemTrees/itDraftProperties" 
                obj="{ 'itDraft':node,'metadata': metadata, 'saveNode':saveNode}">
        <i uib-tooltip="@Labels.edit" class="fa fa-edit"></i>
        </button>
        <button type="button"
                ng-hide="!node || node.nodeId === currentItemTree[0].nodeId" 
                modal-popup cancel-label="@Labels.cancel" 
                ok-label="@Labels.delete" 
                modal-message="'@String.Format(Messages.confirmDelete, Labels.itemTreeNode)'" 
                modal-title="@Labels.delete @Labels.itemTreeNode" 
                class="salespoint-thumb-controls pull-right danger" 
                ok-action="nodes.splice($index,1);deleteNode(node);"><i class="fa fa-times" 
                                                                        uib-tooltip="@Labels.delete"></i></button>
        <button type="button"
                ng-hide="node.itemId && node.itemId > 0" 
                class="salespoint-thumb-controls pull-right" 
                modal-popup modal-title="@Labels.addNodeUnderNode" 
                modal-template="items/itemTrees/itDraftProperties" 
                obj="newItDraftModel" 
                on-open="initWebItDraft(node)">
        <i uib-tooltip="@Labels.add" class="fa fa-plus"></i>
        </button> 
    </div>

    <ul class="list-unstyled itemTreeContainer" 
        ng-show="node.expanded && (node.nodes && node.nodes.length > 0)" 
        style="margin-left: 20px;min-height:30px;" 
        ng-model="nodes" >
        <li ng-show="node.nodeId" 
            ng-repeat="node in node.nodes as nodes track by $index" 
            ng-model="node" ng-include="'nodes_renderer.html'" 
            jqyoui-draggable="{animate:true,insertInline:false,onStop:'webNodeDragStop',deepCopy:true}" 
            data-jqyoui-options="{revert:'invalid',snap:true}" 
            data-drag="true">
        </li>
    </ul>
</script>
<div class="col-xs-12" id="webItemTree">  
    <ul class="list-unstyled itemTreeContainer" 
        ng-model="currentItemTree" 
        style="min-height:30px;">
            <li ng-repeat="node in currentItemTree as nodes track by $index" 
                class="nestedSortable-item" ng-model="node" 
                ng-include="'nodes_renderer.html'" 
                jqyoui-draggable="{animate:true,insertInline:false,onStop:'webNodeDragStop',deepCopy:true}" 
                data-jqyoui-options="{revert:'invalid',snap:true}" 
                data-drag="true">
            </li>
        </ul>
</div>

Thanks in advance.