Web API resource usages in frontend

Question

I've run into this problem a few times. I change the result or parameters of a resource and I search for where it's used and change that too. But every so often I missed some obscure part of the app.

What is a good technique to find all places a API resource (endpoint) is used in for example an angular app?

It's not always as simple as just searching for "api/foo/bar/baz". The URI can be concatenated of multiple variables.

Answer 1

My approach is to use custom Angular service and store all the endpoint information there along with other app-specific settings:

angular.module("appModule").value("appSettings", {
    title: "My application",
    version: "0.0.0.1",
    webApiHost: "http://localhost:33000/",
    customersEndpoint: "api/customers",
});

That way you can find all the references by looking for appSettings.customersEndpoint string in your code. Here is the client example:

(function (angular) {
    var customersFactory = function ($http, appSettings) {
        var factory = {};

        factory.getAll = function () {
            return $http.get(appSettings.webApiHost + appSettings.customersEndpoint);
        }        

        return factory;
    };

    customersFactory.$inject = ["$http", "appSettings"];
    angular.module("appModule").factory("customersFactory", customersFactory);
}(angular));

However, nothing can prevent you (or others) from ignoring that technique and obfuscating the endpoints by using string concatenation, for example. So, there is no silver bullet for such thing — just be careful!