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;
});
ngView
.