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

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

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

Вывод анонсов статей с картинкой, в Wordpress

Август 5, 2013 г.

Сформулируем задачу. Нужно вывести 3 (а в общем случае N) анонсов новостей, с картинкой, в шаблоне на главной странице сайта. Этот кусочек должен выглядеть ...

Читать

Разбить строку на буквы в PHP

Январь 13, 2017 г.

Это задача - классика алгоритмов. В каждом языке программирования есть свои особенности. Для паскаля, к примеру, строка - это массив символов, потому ...

Читать

 

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

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



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

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

  1. Максим:

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