I've been tasked with working on an Angular 1 frontend that communicates with a fairly standard REST API. The setup involves basic HTML views paired with controllers that interact with a consistent base URL for each controller, such as /customer in this simplified scenario:
Controller
app.controller('customerCtrl', function($scope, $http) {
$scope.loadCustomer = function() {
$http.get('/customer/'+$scope.id)
.then(function(response) {
$scope.customer = response.customer;
});
};
$scope.loadCustomerData = function() {
$http.get('/customer/'+$scope.id+'/data')
.then(function(response) {
$scope.customerData = response.data;
});
};
});
View
<div ng-controller="customerCtrl">
<input type="text" ng-model="id"></input>
<button ng-click="loadCustomer()">Load Customer</button>
<div>{{ customer.name }}</div>
...
...
</div>
Presently, everything is working smoothly. However, a new group of users now needs access to the application. Although the frontend view and controller logic remain unchanged, they need to communicate with a different backend base URL, say /externalCustomer. This means the load function call would have to use a different URL structure like
$http.get('/externalCustomer/'+$scope.id)Furthermore, these new users require distinct URLs for their views. For instance, if the current view is accessed at http://app.com/#/customerView, the new view would be located at
http://app.com/#/externalCustomerViewGiven the extensive length of the existing files, I'm seeking a solution where I can avoid duplicating code or causing divergence in logic. Ideally, I'd like to find a way to reuse both the views and controllers by potentially passing a base URL parameter and/or view URL. Any guidance on how to approach this challenge would be greatly appreciated.