As Angular developers, using HTTP POST/GET requests are part of a utilitarian toolset that we use almost on a daily basis. This is one of the things that makes Angular so great when interacting with API's and other server-side code. We can easily build JSON objects/arrays and quickly assign them to object keys and pass them through our HTTP request.
Where the zen of this ecosystem really takes a turn for the worse is when you are trying to post to a PHP endpoint; usually ending in .php. More than likely, you were receiving an error in within your PHP logs that the post content was undefined. You might be saying to yourself, "Well I used to be able to get/post to PHP using jQuery all the time without any issues. What gives?" If that is indeed the case, then you and I were of the same thought.
The reason it doesn't work
When the error first came up, I didn't really care as to why it was showing up. I just wanted it to go away. Now that the application is finished and shipped I went back and did a little bit of research so I could purge those demons from my skill set and move on. As I began my search, I quickly realized that my issue is a pretty common one and I was not the first to fall into this dark abyss of questioning.
The cause of the error is due to the fact that Angular posts content with a content-type header of application/json. PHP doesn't know how to parse JSON unless you grab the contents of the input and then manually decode the resulting JSON and finally assigning the object keys to variables. While this sounds simple, if you are not aware as to the processes going behind the scene it can be infuriating when your code doesn't run as desired.
The fix
After some exploration followed by some trial and error, I think I may have found the easiest to implement solution.
Let Angular be Angular
I've found that it is easier to leave Angular be and "let it do it's thing." Think of it like this: if you have Lionel Messi on your squad, put him as your striker since that is where he is at his best. The same with Angular; Angular works the best when you are sending/receiving JSON.
Your PHP code
While the majority of the PHP code that you will be using will look pretty familiar and utilitarian, the first couple lines might look a little weird.
First we need get the posted content, which in this is a JSON file created by the Angular POST request. For this, we use the file_get_contents() method. So it will look like this:
$postRequest = file_get_contents("php://input");
Next, as I stated above, we need to tell PHP that this file content is is JSON and we need to parse or "decode" it as such; like so:
$jsonData = json_decode($postRequest);
This method/variable assignment creates a traditional PHP object from the JSON object passed in from the Angular POST request. From here we can parse the data even further by breaking down each key into a separate variable like so:
$firstName = $jsonData->firstName;
$lastName = $jsonData->lastName;
So your finished code looks like this:
$postRequest = file_get_contents("php://input");
$jsonData = json_decode($postRequest);
$firstName = $jsonData->firstName;
$lastName = $jsonData->lastName;
That's it
That's all I have for this one. Hope this demystifies this common issue for some. Have a good one.