In an old sample app without angularJS, a rest service is called in the following way: This app does not use angularJS.

var listName = "Events";

        // the url to use for the REST call.
        var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target)" +

            // this is the location of the item in the parent web. This is the line
            // you would need to change to add filters, query the site etc
          //  "/web/lists/getbytitle('" + listName + "')/items?" +
            "/web/lists/getbytitle('" + listName + "')/items?$select=Title,Category,EventDate,Description,EncodedAbsUrl,ID" +
            "&@target='" + SPHostUrl + "'";

        // create  new executor passing it the url created previously
        var executor = new SP.RequestExecutor(SPAppWebUrl);

        // execute the request, this is similar although not the same as a standard AJAX request
        executor.executeAsync(
            {
                url: url,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {

                    // parse the results into an object that you can use within javascript
                    var results = JSON.parse(data.body);
                    var events = [];

In my new app, I have developed an angular-based app that retrieves data from a SharePoint list using rest API. However, I am facing challenges with the $resource.query command and its options.

The error message displayed is BADCFG, indicating incorrect options usage. I couldn't find relevant information in the documentation on how to set the Headers and Accept option in my code.

The Angular JS code snippet is provided below:

App.JS

var SPHostUrl;
var SPAppWebUrl;
var ready = false;

$(document).ready(function () {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var param = params[i].split("=");
        switch (param[0]) {
            case "SPAppWebUrl":
                SPAppWebUrl = decodeURIComponent(param[1]);
                break;
            case "SPHostUrl":
                SPHostUrl = decodeURIComponent(param[1]);
                break;
        }
    }
});

(function () {
    "use strict";
    var app = angular.module("productManagement",
                            ["common.services",
                             "ui.router",
                             "ui.mask",
                             "ui.bootstrap"]);

    app.config(["$stateProvider",
                "$urlRouterProvider",
        function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/products");

            $stateProvider
                .state("home", {
                    url: "/",
                    templateUrl: "../Scripts/app/welcomeView.html"
                })
                // Products
                .state("productList", {
                    url: "/products",
                    templateUrl: "../Scripts/app/products/productListView.html",
                    controller: "ProductListCtrl as vm"
                })
                .state("productEdit", {
                    abstract: true,
                    url: "/products/edit/:productId",
                    templateUrl: "../Scripts/app/products/productEditView.html",
                    controller: "ProductEditCtrl as vm",
                    resolve: {
                        productResource: "productResource",

                        product: function (productResource, $stateParams) {
                            var productId = $stateParams.productId;
                            return productResource.get({ productId: productId }).$promise;
                        }
                    }
                })
                .state("productEdit.info", {
                    url: "/info",
                    templateUrl: "../Scripts/app/products/productEditInfoView.html"
                })
                .state("productEdit.price", {
                    url: "/price",
                    templateUrl: "../Scripts/app/products/productEditPriceView.html"
                })
                .state("productEdit.tags", {
                    url: "/tags",
                    templateUrl: "../Scripts/app/products/productEditTagsView.html"
                })

                .state("productDetail", {
                    url: "/products/:productId",
                    templateUrl: "../Scripts/app/products/productDetailView.html",
                    controller: "ProductDetailCtrl as vm",
                    resolve: {
                        productResource: "productResource",

                        product: function (productResource, $stateParams) {
                            var productId = $stateParams.productId;
                            return productResource.get({ productId: productId }).$promise;
                        }
                    }
                })

        }]
    );
}());

ProductListrCtrl.js

(function () {
    "use strict";
    angular
        .module("productManagement")
        .controller("ProductListCtrl",
                    ["productResource",
                    ProductListCtrl]);

    function ProductListCtrl(productResource) {
        var vm = this;

        productResource.query(function (data) {
            vm.products = data;
        });

        vm.showImage = false;

        vm.toggleImage = function () {
            vm.showImage = !vm.showImage;
        }
    }
}());

ProductResource.js

(function () {
    "use strict";

    angular
        .module("common.services")
        .factory("productResource",
                ["$resource",
                 productResource]);

    function productResource($resource) {
        var listName = "Products";

        // the url to use for the REST call.
        var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target)" +

        // this is the location of the item in the parent web. This is the line
        // you would need to change to add filters, query the site etc
        //  "/web/lists/getbytitle('" + listName + "')/items?" +
            "/web/lists/getbytitle('" + listName + "')/items?$select=Id,productName,productCode,releaseDate,description,cost,price,category,tags,imageUrl" +
            "&@target='" + SPHostUrl + "'";

        //return $resource(url);
        //return $resource("/api/products/:productId")

        return $resource(url, {}, {
            query: { method: 'GET', isArray: true },
            create: { method: 'POST' }
        })
    }

}());