My app utilizes UI Route for view routing.
When accessing /berlinerliste/, a function is triggered to display an array of objects.
If one of these objects is clicked, the view changes to /berlinerliste/{id}/ and shows the details of that specific object.
The issue arises when the individual object with the URL /berlinerliste/{id}/ is reloaded, resulting in a page without data.
This is how the service is structured:
.factory('SearchService', ['$http', function($http) {
var service = {
flatexhibitors : [],
datafairs : [],
flatexhibitorsuni : [],
datafairsuni : [],
getAllExhibitors : function () { //initial call to fetch all items on page load
var searchindex = 'XX';
var url = '../getexhibitors.php';
var config = {
params: {
search: searchindex
},
cache:true
};
$http.get(url, config).then(function (data) {
service.datafairs = data.data.rows;
for (var i in service.datafairs) {
service.flatexhibitors.push(service.datafairs[i].doc);
};
return service.flatexhibitors;
});
},
getAllPeople: function() { //call to reload data and filter it
var searchindex = 'XX';
var url = '../getexhibitors.php';
var config = {
params: {
search: searchindex
},
cache:true
};
return $http.get(url, config).then(function (resp) {
service.datafairsuni = resp.data.rows;
for (var i in service.datafairs) {
service.flatexhibitorsuni.push(service.datafairs[i].doc);
};
return service.flatexhibitorsuni;
console.log(service.flatexhibitorsuni);
});
},
findExh : function(id){
function personMatchesParam(exhibitor) {
return exhibitor.slug === id;
console.log(exhibitor.slug);
}
return service.getAllPeople().then(function (data) {
return data.find(personMatchesParam)
});
}
}
service.getAllExhibitors();
return service;
}])
This is the configuration of my views:
.config(function($stateProvider) {
var berlinerState = {
name: 'berliner',
url: '/berlinerliste/',
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'bl2017.htm'
}
}
}
var exhibitorState = {
name: 'exhibitor',
url: '/berlinerliste/{id}',
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'exhibitor.htm'
}
},
resolve: {
exhibitor: function(SearchService, $stateParams) {
return SearchService.findExh($stateParams.id);
}
}
}
$stateProvider.state(berlinerState);
$stateProvider.state(exhibitorState);
})
Despite the issue with the reload not functioning properly at /berlinerliste/{id}/, it also impacts the speed by making redundant HTTP calls and filtering processes. Any tips on resolving this?
- Making duplicate HTTP calls (unnecessary if not reloading the page)
- Filtering items based on ID
- Correctly displaying the results from
/berlinerliste/but showing nothing upon reload
I believe ideally, the redundant HTTP call and the resolve process should only occur during a page reload, not when navigating from the parent URL. What am I missing?
You can view the live version here
UPDATE
Check out the Plunkr example from the UI Router developers where they successfully implement what I'm attempting. It works for them but not for me.