Обмен данных Angular с бек-энд на PHP

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали — frontend, который как то должен взаимодействовать со второй половинкой — backend?

Рассмотрим рабочий пример по стыковке Angular с PHP и передаче данных туда-сюда.

Постановка задачи

Сделаем простейшую форму с текстовым полем, значения из которого будем сохранять в базу по нажатию специальной кнопочки. В ответ сервер нам будет присылать в Angular стандартное сообщение. Что то вроде цитатника великого Мао. :)

Ещё мы будем выводить список уже существующих цитат в базе.

Инструментарий

Понадобится любой LAMP или WAMP веб-вервер, где мы запустим данную тестовую задачу. У меня это WAMP OpenServer.

AngularJS v 1.5.8 мы подключим с серверов google.

Реализация

Проект состоит из 4х файлов + 1 файл скрипта базы данных. Я не стал в этом учебном примере использовать каскадные стили и какое либо оформление вообще, чтобы не загромождать шаблон и не отвлекаться от главного.

files-struct

Скачать ZIP архив проекта

Два php файла реализуют функционал backend части (папка — api), и два файла — «морду» с помощью фреймворка AngularJS (project.js и index.html).

Начнем с единственного шаблона — index.html.

Шаблон ссылается на единственный контроллер, используя его свойства .text и .history, а также метод .save() для сохранения новой цитаты.

mao-text-angular

Каких либо подводных камней на этом этапе не ожидается, так что двинемся дальше.

Реализация контроллера.

Проблемы с передачей POST данных из AngularJS в PHP

На этапе передачи данных может возникнуть проблема с получением их на стороне сервера. AngularJS по умолчанию использует в заголовках Content-Type: application/json.

angular-request-header

Некоторые фреймворки знают об этой особенности, и транслируют переменные в $_POST массив, в то время как PHP из коробки это не делает. Т.к., во-первых, ожидается Content-Type вроде такого:

и, во-вторых, переменные, как указывает тип содержимого, должны быть сформированы в строку, с использованием url-encode алгоритма.

Решений здесь много. 

Можно даже заставить Angular передавать данные как надо, но я предпочитаю решать проблему со стороны сервера.

Итак, посмотрим как реализовано api на PHP.

Данные удалось извлечь из стандартного потока php://input. Они также могут содержаться в $HTTP_RAW_POST_DATA (зависит от настроек в php.ini). Но первоисточник советует получать raw данные именно из потока (смотрите пункт php://input).

Остались за кадром вспомогательный файл подключения работы с БД и скрипт SQL, но они есть в архиве.

Написать комментарий

Мало букафф? Читайте есчо !

PHP код для калькулятора боёв Dragons of Atlantis

Июль 3, 2012 г.

Выкладываю php код, по просьбе Blagtoof. Забавно, что это кому то может быть нужно. :) А мне не жалко. Забросил по понятным причинам саму игру. Скачать как файл (download php code as text file). [crayon-5924681a22996356378124/]

Читать

Обращение к свойству объекта/класса в PHP, если имя св-ва хранится в переменной

Декабрь 12, 2013 г.

Из разряда "на заметку программисту". Есть такие вещи, о которых знаешь что они есть, но забываешь конкретную реализацию, когда доходит до использования. Именно так обстоит дело с тем, что описано в заголовке. Т.е. у нас есть переменная, где хранится ...

Читать

 

Комментарии к «Обмен данных Angular с бек-энд на PHP»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Один комментарий в “Обмен данных Angular с бек-энд на PHP”

  1. Максим:

    СПАСИБО ! Очень помогло !