Just starting out and trying to figure things out, so bear with me if this is a basic issue.
I have two routes set up. localhost:3000 displays a list of objects, while localhost:3000/:slug shows detailed information about a specific product.
The initial listing works fine. You visit localhost:3000 and see the list of items.
listPhoneController.js:
angular.module('cmscApp').controller('listPhoneController', ['$scope', '$http', '$location', 'searchBoxFactory',
function($scope, $http, $location, searchBoxFactory) {
$scope.listInfo = searchBoxFactory;
$scope.phoneList = [];
$http.get('/api/getallphones').then(function(res) {
$scope.phoneList = res.data;
}, function() {
$scope.errorMsg = 'Error in reaching data';
});
}]);
list.html:
<!-- ... --->
<div class="result" ng-repeat="phone in phoneList | hasImageFilter:listInfo.imageRequired
| nameFilter:listInfo.phoneName
| priceFilter:listInfo.price.from:listInfo.price.to">
<a ng-href="/phone.slug">More info...</a>
<!-- ... -->
</div>
Clicking on the a tag takes you to the individual product's page (e.g. localhost:3000/samsung-galaxy-s4) and loads the information correctly. There's also a back button with a simple
<a ng-href='/'>Back</a>However, upon returning back to localhost:3000, the list doesn't display. No errors are shown, but the `div`s are missing upon inspecting.
Could this be due to the asynchronous nature of $http, causing the page to load before retrieving the data? If so, why isn't the data binding as expected?
Here's my configuration:
angular.module('cmscApp').config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/pages/list.html',
controller: 'listPhoneController',
controllerAs: 'lpc'
})
.when('/:phoneSlug', {
templateUrl: '/pages/detail.html',
controller: 'detailPhoneController',
controllerAs: 'dpc'
})
.otherwise({
templateUrl: '/error/404.html'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Any suggestions or assistance would be greatly appreciated! I'm considering storing the data from $http in a factory to ensure it's loaded and updated every time the controller runs. Is that a good solution, or is there a better approach?