0

Good Day Everyone!

I am working on a portfolio SPA, and I am currently stuck. Is there a way to only use one view and have that view and link change dynamically? That is instead of having this html repeated for each view as seen in the routes, just use the HTML once and have data in that view updated on the fly?

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>

ANGULAR

.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;
});
1
  • Take a look at Angular's ngView.
    – PeteGO
    Commented Apr 23, 2016 at 12:36

1 Answer 1

0

I think use regex pattern in ui-router could solve your problem:

$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"
});

Instead of repeating each possible path you just need this one to match any path starts with 'portfolio' followed by the 'id'. With the regex pattern you can do even more depends on your requirement.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.