не буду голословным.

в демки три компонента, все слабо связанны между собой. Для хардкора не испозованы даже хелперы.
Собственно это просто доказательство возможности, на angular это проблема конечно изящнее решается.
в демках UI я вообще не ивдел никогда декомпозиции, походу её там тупо нет.

всё описание использования и взаимодействия компонентов занимает 4 строчки.

<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>

Роль контрола прежде всего в обепечение данными. Слайдер и меню независимы, и могут распространятся как jQuery
плагины, независимо друг от друга.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){    	

	    //================== плагин слайдера ===================//
	    $('slide').each(function(){
		  var me= $(this),
		      ds=me.attr('data-source'),
		      selItem=me.attr('select'),
			  scope=me.parent('.controller');
	
		  //применим шаблон
	      me.append('<ul class="Slideshow"></ul>');            	  
	
		  //слушаем изменения в data-source
		  scope.on('change-'+ds, function(){		  
			  $('li',me).remove();

		      scope.data(ds).forEach(function(img){
			  	$('ul',me).append('<img src="'+img+'" class="Slideshow_slide">');
			  })
		  })		

		  //слушаем изменения в selectItem
		  scope.on('change-'+selItem,function(){
			  me.find('img').removeClass('Slideshow_slide').addClass('Slideshow_slide_hide');	
			  me.find('img:eq('+scope.data(selItem) +')').removeClass('Slideshow_slide_hide').addClass('Slideshow_slide');		
		  })
  		
	    });   

	    //================== плагин меню ===================//

	    $('menu').each(function(){
		  var me= $(this),
		      ds=me.attr('data-source'),
		      selItem=me.attr('select'),
			  scope=me.parent('.controller');
	
		  //применим шаблон
	      me.append('<ul></ul>');            	  

		  //слушаем изменения в data-source 	
		  scope.on('change-'+ds,function(e){		  
		      scope.data(ds).forEach(function(img){
			  	$('ul',me).append('<li>'+img+'</li>');
			  })

			  me.find('li').click(function(e){
				scope.data(selItem, $(this).index() );
				scope.trigger('change-'+selItem);
			  })			  		
		  })
		  
	    });  
    

	    //================== контроллер ===================//

		$('#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>

<style>
    .Slideshow {
      position    : relative;
      width       : 600px;
      height      : 400px;
      list-style  : none;
      padding     : 0;
      overflow    : hidden;
    }

    .Slideshow_slide_hide{
      position   : absolute;
      width      : 0%;
      left       : 50%;
      height     : 100%;
      transition : all 0.2s;
	}

    .Slideshow_slide {
      position   : absolute;
      width      : 100%;
      height     : 100%;
      transition : all 0.2s 0.2s;
    }

    li:hover {
      background-color : red;
      cursor           : pointer;
    }
</style>

<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>

Ну окей, теперь сделай так чтобы при клике колесиком мышки по активному слайду он и его пункт меню удалялся) ^__^

это то что у меня делается вот так

$('slide').on('click(m-middle)', function(event, index){
  $('slide').splice(index, 1);
});

кстати надо обертку на удалялку написать) точно)


п.с. и теперь посмотри на мои 15 строчек кода и на свои, а так же я не понял что ты хочешь доказать, ты хочешь показать свое незнание зачем нужны шаблонизаторы или что)? Если ты не знаешь зачем они нужны я могу быстренько по задавать тебе квесты от которых у тебя руки дыбом встанут) которые на шаблонизаторах решаются за 5 секунд) если уж тебе лень смотреть пособия по ангуляру)

ок ок небольшое соревнование, давай напишем простое TODO приложение))

щас я опишу цель задания

Причём тут шаблонизаторы, или размер кода.
Я не это пытаюсь донести. Я не полный псих чтобы 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 уже пинал тебя за это :)

Ты видимо просто не до конца понимаешь ЧТО такое UI.js и как им пользоваться)

а у меня вот так:

<ul ui-template="Slideshow">
<img ui="Slideshow-slide" src="{{src}}" class="slide_{{position}}">
</ul>


Эм, ты будешь писать эту парашу только когда будешь создавать слайдер, когда же ты захочешь его нарисовать ты будешь писать просто название этой параши)

DjDiablo, то о чем ты говоришь называется шаблоны) ты пытался применить редактор модулей в шаблонизации по этому и предположил что это придется писать каждый раз) вот и все)

видимо мне действительно надо сделать демки нормальные на сайте чтобы показать что да как) а то вы не понимаете) ну это и логично вы же не знаете что в коде, вы видите только то что я показал)

Может и не понимаем, я прошу эту демку от тебя с первой версии :)

Ну вот смотри короче, ты оцениваешь то что есть, но дело в том что я пилю все с нижних уровней так чтобы удобно было не только юзать модули, но и описывать их и.т.п. то есть на самом верхнем уровне у тебя стена и взаимодействие между кирпичиками строится так:



у меня же верхние кирпичики это модули и используются они так:



да да, на это место автоматически подставятся разметка из шаблонов этих модулей ))

2 (зарание описаных с зарание опсиаными шаблонами) модуля, и связаны они по всем сокетам (хотя что у менюшки что у слайдшоу по сути юзается только один сокет toggle перкключалка, если не написать название сокетов после айдишника модуля на который подписываемся то подписывание происходит на все сокеты которые у него вообще есть)

Ну как-то так, просто это версия 0.7 и тут я просто придумываю как красиво описывать логику модулей и их шаблоны. все ж по порядку ну)


и разумеется я добавлю параметры тут) чтобы легко описывать настройки каждого модуля

пока мы просто видим что модуль Слайд шоу подписан на все сокета модуля с айдишником myMenu =) и реагирует на них, меню о слайдшоу ничего не знает потому что сокеты могут только "слушать" но не передавать)

а инфа c путями к картинкам где ?

у настройках, ну по уму тут несколько вариантов у чела, сделать внутри логики модулей сразу чтобы аяксом все подгружалось откуда надо, тогда во всех модулях одного типа будет рисоваться все по одной и той же инфе)

но можно добавить чо то типа контролов как у тебя и передавать их имена в настройки, ну тип того



<ui src="urlLust">Shideshow{ #myMenu }</ui>
<ui src="urlLust">Menu#myMenu</ui>

но блин мне кажется данные надо как то на сервере хранить и аяксом получать, не?

у меня щас это делается так

описывается api для работы с сервером:

ui.api = function(){ 

  this.getComments = function (){};
  this.getImgURLs = function (){};

}

а внутри модуля просто юзается этот метод

ui.module["Slideshow"] = function($){

   $.api.getImgURLs(function(urls){
      $('slide').repeat(urls)
   })

};

ну типа того

Если сайт, то нужно помнить что аякс враг поисковика.

Если приложение то вероятнее всего ajax с сервера.
Но нужно биндить данные очень аккуратно, возможно данные не только слайдером используются.
К тому же данные могут редактировать на клиенте, удалятся, добавляться, и возможно сохранятся обратно на сервер.

с подключением ага, https://support.google.com/webmaster...r/174992?hl=ru

немного не понял в чем тут проблема?, а хотя понял, спасибо за наводку)



п.с. а знаешь сделаю ка я уровень стены уже сейчас) чтобы показать как это удобно

это потому что я кишки и показываю) чтобы показать какие они охуенные и аккуратные и легко описываются.
так то ^__^