Обмен данных 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, но они есть в архиве.

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

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

Ajax в WP

Июль 12, 2017 г.

Посмотрим в данном гайде как сделать обработку ajax запроса на Wordpress. WP предоставляет два hook-а для подключения PHP обработчика к ajax запросу. ...

Читать

Ajax в Drupal 7

Август 31, 2015 г.

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...

Читать

 

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

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



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

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

  1. Максим:

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

  2. YuriiDumych:

    как скачать все файлы?