[DjDiablo]

Причём тут шаблонизаторы, или размер кода.
Я не это пытаюсь донести. Я не полный псих чтобы angular серьёзно заменять jQuery. То что я написал это хардкор, по принципу могу жопой пропердеть концерт рахманинова.

Я сделал важную вещь, я создал два независимых компонента и отправил их в чёрный ящик.
с точки зрения пользователя компонентов приложение выглядит так.

<script>
$('#contr1').each(function(){
			var me=$(this);

			me.data('imglist',[
			   'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg',
			   'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg',
			   'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg',
			   'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg',
			   'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg',
			   'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg',
			   'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg'
		    ])   
		
			me.data('selectitem',0);

			//оповестим плагины об изменении данных
			me.trigger('change-imglist');	
			me.trigger('change-selectitem');	
		})			
</script>
<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>

У тебя все кишки на виду.

<script>
ui.module['Slideshow'] = function($, scope) {

  scope.active = 0;

  $.on('keydown(left)', function() { scope.active-- });
  $.on('keydown(right)', function() { scope.active++ });

  var srcs = [
    'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg',
    'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg',
    'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg',
    'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg',
    'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg',
    'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg',
    'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg'
  ];

  $('slide').model({position: 'middle', src: ''});
  $('slide').repeat('src', srcs);
  $('slide').watch('active', function(i, scope) {
    var active = scope.active;
    scope.position = (i < active) ? 'left' : (i > active) ? 'right' : 'center';
  });


  $('menu-item').model({index: 0}).repeat(srcs).each(function(i, scope) {
    scope.index = i;
  }).on('click', function(e, i) {
      scope.active = i;
  });

};

</script>

<div ui="Slideshow{ #myMenu toggle }">
  <ul class="Slideshow">
    <img ui="Slideshow-slide" src="{{src}}" class="Slideshow_slide slide_{{position}}">
  </ul>

  <ul>
    <li ui="Slideshow-menu-item">слайд {{index}}</li>
  </ul>
</div>

Кода на функционал конечно меньше чем у jQuery, но то что ты с его помощью разрабатываешь слишком сложно использовать. И я немогу добится от тебя примера где бы ты показал что я могу разработать деталь которую удобно встроить.

Я не хочу писать вот такую парашу каждый раз когда мне нужен слайдер.

<div ui="Slideshow{ #myMenu toggle }">
  <ul class="Slideshow">
    <img ui="Slideshow-slide" src="{{src}}" class="Slideshow_slide slide_{{position}}">
  </ul>

  <ul>
    <li ui="Slideshow-menu-item">слайд {{index}}</li>
  </ul>
</div>

неужели так сложно понять

ДАЙ МНЕ НОРМАЛЬНЫЙ ИНТЕРФЕЙС ДЛЯ ИСПОЛЬЗОВАНИЯ КОМПОНЕНТОВ И Я ОТ ТЕБЯ ОТСТАНУ
Я раз 10 уже пинал тебя за это