My task involves loading a web service and I found the angular method of displaying, sorting, and filtering tables to be very effective. Now, I am looking to enhance this functionality. Depending on the selected link, I want to show different data from the same web service in a similar format. I aim to avoid duplicating code by reusing the controller but I'm facing some confusion. This includes:
- Displaying a different partial/template URL
- Loading different URL parameters
- Mapping certain elements after receiving JSON data
What would be the best approach for handling these changes in configuration? Initially, I tried routing to a variable (
when('/change-requests/:businessUnit'Here are key segments of my original code. While there is more to it, those sections remain unaffected. I have indicated specific sections with inline comments where modifications may be needed based on the selected links.
HTML:
<div ng-view></div>
Router:
$routeProvider.when('/change-requests/business-solutions', {
//this template will be different
templateUrl: 'js/modules/changeRequests/partials/business-solutions.html',
controller: ChangeRequestCtrl
})
(parts of the) Controller:
function ChangeRequestCtrl($scope, $location) {
$scope.loaded = false;
$.ajax({
//this url will be different
url: url,
success: function(json) {
$scope.$apply(function() {
$scope.changes = json.map(function(row) {
//this array map will be different
return row;
});
$scope.loaded = true;
});
},
error: function() {
$scope.error = true;
}
});
}
If my explanation is unclear, please let me know so I can provide further clarification.