How to reuse angular-js common mark up (e.g. widget) without requesting external page?

Question

I have a common logic to render collection of complex items:

<div class="left-sidebar"
    <div ng-repeat="item in items1">
      //Complex rendering mark up here
    </div>
</div>
<div class="right-sidebar"
    <div ng-repeat="item in items2">
      //Complex rendering mark up here
    </div>
</div>

That common complex rendering mark up is only used in that particular page but is used in a few different parts of the page (eg left-sidebar, right-sidebar) with different data to render. Of course I can simply duplicate the mark up, but I want to DRY (Don't Repeat Yourself) it.

ng-include seems can solve this, but I don't want to put the logic in another page to minimize server HTTP GET request. Is there a way to do this without additional server request?

Answer 1

You can define a directive like:

  angular.module('myApp').directive('commonMarkup', function() {
  return {
    restrict: 'EAC',
    scope:{ item: '@' },
    link: function($scope, $element, $attrs) {

    },
    template:'<span>{{item.text}}</span>',
    replace: true
   };
 });

Just replace the template with your rendering markup. Then you can use it like:

 <div class="left-sidebar"
   <div ng-repeat="item in items1">
     <common-markup item="item"/>
   </div>
 </div>
 <div class="right-sidebar"
   <div ng-repeat="item in items2">
     <common-markup item="item"/>
   </div>
 </div>

Answer 2

You can use these two in same html page, so it will not load from external page

Use this to create template

<script type="text/ng-template" id="your.html">some html</script>

and where you want to render it, use this

<div ng-include="'your.html'"></div>

Answer 3

You can use angular service: $templateCache to cache all your templates. You can find more information here .