簡易ギャラリーAngularJS

Question

私は単純なギャラリーを作った。ギャラリーは仕事ですが、コードは非常に悪いです。 私はコードを普遍的にしたいです。サイクルでコードを実行しようとしましたが、できません。助けてください。

HTML：

<ul class="catalog"> 
    <li><img src="1.png"></li> 
    <li><img src="2.png"></li> 
    <li><img src="3.png"></li> 
</ul> 
<div class="main"> 
    <img src="1.png"> 
</div> 

JS：私の悪い英語のため申し訳ありません

var main = angular.element(document.querySelector(".main")) 
var catalog = angular.element(document.querySelector(".catalog")); 
var catlalogItems = catalog.find("img"); 

var firstItem = catlalogItems.eq(0) 
firstItem.on('click',function(){ 
    main.attr('src',(firstItem.attr('src'))); 
}); 

var secondItem = catlalogItems.eq(1) 
secondItem.on('click',function(){ 
    main.attr('src',(secondItem.attr('src'))); 
}) 

var thirdItem = catlalogItems.eq(2) 
thirdItem.on('click',function(){ 
    main.attr('src',(thirdItem.attr('src'))); 
}) 

感謝。

Answer 1

app.js

(function() { 
    angular.module('app', []); 
}()); 

app.html

<image-gallery></image-gallery> 

画像gallery.js

(function() { 
    var imageGallery = { 
    constroller: function() { 
     this.urls = ['1.png', '2.png', '3.png']; 
    }, 
    templateUrl: './images-template.html' 
    }; 

    angular.module('app') 
    .component('imageGallery', imageGallery) 
}()); 

image-gallery.html

<ul class="catalog"> 
    <li ng-repeat="url in $ctrl.urls"> 
     <img ng-src="url" ng-click="$ctrl.selectedUrl = image"> 
    </li> 
</ul> 
<div class="main"> 
    <img ng-src="$ctrl.selectedUrl"> 
</div>