AngularJS如何从需要查询字符串参数和使用角度资源发布数据的URL中获取数据？

Question

Requirement : Send data to an endpoint using a post of data and put the startdate and endate into the querystring of the url, like this:

https://server/byLocation?startDate=2019-01-01&EndDate=2020-01-01

The data payload only has the locationIDs and Criteria shown below.

The Resource Definition

I've tried moving the startDate and endate out of the query object as well.

ByLocationResource: $resource(
    ByLocationEndpoint,
    null,
    {
        query: {
            startDate: '@startDate',
            endDate: '@endDate',
            locationIds: ['@locationIds'],
            Criteria: '@Criteria',
            method: 'POST'
        }
    }
),

The EndPoint Definition

var ByLocationEndpoint = https:/servername/byLocation/?startDate=:startDate&endDate=:endDate');

How do I combine querystring in the URL endpoint along with the post data?

The Service:

    function ByLocation(startDate, endDate, Criteria, locationIds) {
        _ByLocationResource.query(
            {

                startDate:startDate,
                endDate:endDate,
                locationIds: [locationIds],
                Criteria: Criteria


            });


    }

I've tried mixing things up a bit lilke this:

function ByLocation(startDate, endDate, Criteria, locationIds) {
        _ByLocationResource(startDate,EndDate).query(
            {

                locationIds: [locationIds],
                Criteria: Criteria


            });


    }

Am I forced to use $http instead of an endpoint and resource?

The browser receives a 400 bad request which looks like this:

Request URL: https://servername/bylocation/?startDate=&endDate=

Clearly the startDate and endDate parms are not being filled in.

Answer 1

The proper way to use AngularJS Endpoints with QueryString and Post data

This is the proper templating resource pattern:

ByLocationResource: $resource(

    ByLocationEndpoint,
    {
        startDate: '@startDate',
        endDate: '@endDate'
    },
    {
        query: {

            Criteria: '@Criteria',
            locationIds: '@locationIds',
            method: 'POST',
            isArray: true
        }
    }
),

And this is the call pattern, the first two parms fill in the query string parameters for the endpoint, while the 2nd set of parameters fill in the Post data. We named the method query, because we are querying data based on the post parameters, whereby the results are constrained by the Query String by start and end date.

MyService.ByLocation(
    {
        startDate: startDateTime,
        endDate: endDateTime
    },
    {
        Criteria: {

            Id: Id,
            Minutes: Minutes,
            Id2: Id2
        },
        locationIds: [5, 6, 7, 8]
    }
);

The code in the MyService service calling the query method.

function ByLocation(dates, payload) {

    return ByLocationResource.query(dates, payload).$promise;
}