類似の名前の複数のビューが角でくっついている

Question

おはようございます！

私はポートフォリオSPAで働いており、現在悩んでいます。 1つのビューのみを使用し、そのビューとリンクを動的に変更する方法はありますか？ これは、ルートで見られるように各ビューに対してこのhtmlを繰り返す代わりに、HTMLを一度使用し、そのビューのデータをオンザフライで更新しますか？

HTML

<div class="container "ng-controller="mainCtrl"> 
<div class="row"> 
<div class="col-lg-12"> 
    <h1 class="page-header">{{photos[0].name}} 
    </h1> 
    </div> 
</div> 
    <!-- /.row --> 

<!-- Portfolio Item Row --> 
<div class="row"> 

    <div class="col-md-8"> 
    <img class="img-responsive" ng-src="{{photos[0].url}}" alt="daltonTower" > 
</div> 

<div class="col-md-4"> 
    <h3>Project Description</h3> 
    <p>{{photos[0].description}}</p> 
    <h3>Project Details</h3> 
    <ul ng-controller="PortfolioEntryCtrl"> 
     <li>{{points[0].height}}</li> 
     <li>{{points[0].floors}}</li> 
     <li>{{points[0].squarefeet}}</li> 

    </ul> 
</div> 

</div> 
<!-- /.row --> 

<!-- Related Projects Row --> 
<div class="row"> 

<div class="col-lg-12"> 
    <h3 class="page-header">Related Projects</h3> 
</div> 

<div class="col-sm-3 col-xs-6"> 
    <a href="#/portfolio2"> 
     <img class="img-responsive portfolio-item" ng-src="{{photos[1].url}}" alt="50Dalton"> 
    </a> 
</div> 

<div class="col-sm-3 col-xs-6"> 
    <a href="#/portfolio3"> 
     <img class="img-responsive portfolio-item" ng-src="{{photos[2].url}}" alt="ChristianScienceCenter"> 
    </a> 
</div> 
<div class="col-sm-3 col-xs-6"> 
    <a href="#"> 
     <img class="img-responsive portfolio-item" ng-src="{{photos[6].url}}" alt=""> 
    </a> 
</div> 
<div class="col-sm-3 col-xs-6"> 
    <a href="#"> 
     <img class="img-responsive portfolio-item" ng-src="{{photos[4].url}}" alt=""> 
    </a> 
</div> 
</div> 
<!-- /.row --> 

<hr> 
</div> 

アンギュラ

.when('/portfolio1',{ 
     templateUrl: "views/portfolioItem_1.html", 
     controller:"PortfolioEntryCtrl" 
    }).when('/portfolio2',{ 
     templateUrl: "views/portfolioItem_2.html", 
     controller:"PortfolioEntryCtrl" 
    }).when('/portfolio3',{ 
     templateUrl: "views/portfolioItem_3.html", 
     controller:"PortfolioEntryCtrl" 
    }).when('/portfolio4',{ 
     templateUrl: "views/portfolioItem_4.html", 
     controller:"PortfolioEntryCtrl" 

app.controller("mainCtrl",["$scope", "$http", function($scope,$http){ 
$http.get('./js/images.json').success(function(image){ 
    $scope.photos=image; 
    console.log(image); 
}); 

}]).controller("PortfolioEntryCtrl",["$scope", "$http", function($scope,$http){ 
$http.get('./js/portfoliopoints.json').success(function(data){ 
    $scope.points=data; 
}); 

Answer 1

私はui-routerで使用する正規表現パターンは、あなたの問題を解決することができると思う：

$stateProvider.state("portfolio", { 
    url: "/{page: portfolio[0-9]+}",// it will match 'portfolio1' or 'portfolio2' for example 
    templateUrl: function (stateParams){ 
     //get the id from the url path like value '2' from 'portfolio2' 
     var currentPageId = stateParams.page.substring(9,stateParams.page.length); 
     //dynamically return the view you want to load 
     return 'views/portfolioItem_' + currentPageId + '.html'; 
    }, 
    controller: "PortfolioEntryCtrl" 
}); 

代わりの繰り返しあなたがただ一つのパスにマッチさせるために必要なそれぞれの可能なパスは、 'portfolio'とそれに続く 'id'で始まります。正規表現のパターンでは、さらに多くのことを行うことができますあなたの要件に依存します。