Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Создание внешнего интерфейса с поддержкой WordPress: самонастройка, маршрутизация и сервисы

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Introduction and Setup
Building a WordPress-Powered Front End: A Custom Directive for Post Listing

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

В предыдущей части этой серии о построении интерфейса с WP-API и AngularJS мы проанализировали требования к проекту, оценили каркасы, загрузили и скомпилировали пакет HTML, а также создали плагин для WordPress, который изменяет ответы для Posts и Users.

Заложив прочный фундамент для нашего проекта, мы теперь готовы приступить к работе над интерфейсом и настроить базовые конфигурации для нашего приложения с AngularJS.

В текущей части серии мы будем:

  • загружать приложение AngularJs
  • Анализировать шаблоны для разных представлений в пакете HTML
  • Настроим маршрутизацию для нашего приложения
  • Настром службы для различных ресурсов в WP REST API

Давайте начнем с инициализации приложения AngularJS и разделения шаблонов для просмотров, включая просмотр списка постов, отдельный пост и категории.

Запуск приложения AngularJS

Первое, что нам нужно сделать, чтобы создать приложение WP REST API, - это загрузить его с помощью директивы AngularJS ng-app. Директива ng-app используется для автоматической загрузки приложения, и она принимает имя модуля AngularJS в качестве необязательного значения.

Но прежде чем начинать изменять какие-либо файлы, убедитесь, что вы запустили команду gulp, перейдя в каталог quiescent-rest-api-html. Это гарантирует, что любые изменения, внесенные вами в каталоге /src, немедленно компилируются в каталог /dist командой gulp watch. Кроме того, я бы посоветовал вам перейти в каталог /dist в другом окне консоли и запустить команду http-server, которая будет запускать HTTP-сервер Node.js для этого каталога, и вы можете предварительно просмотреть свой сайт в браузере. Просто введите веб-адрес 127.0.0.1:8080.

Директива ng-app обычно помещается в корневой элемент, т.н. тег <html>. Следовательно, мы изменим тэг <html> в файле src/index.html на следующее:

Здесь quiescentApp - это имя нашего основного модуля AngularJS, который мы инициализируем затем в нашем файле src/js/app.js.

Файл src/js/app.js в настоящее время содержит только одну строку кода для инициализации функций JavaScript, предоставляемых Zurb Foundation. Мы можем изменить этот файл, включив следующий код для основного модуля нашего приложения AngularJS:

Первым делом в приведенном выше коде появляется анонимная функция с самовывозом, которая представлена следующим:

Как следует из названия, вышеупомянутая функция является анонимной, то есть у нее нет имени, и она вызывает сама себя, немедленно выполняя весь код, который находится внутри ее тела. Это хороший способ ограничить объем наших переменных и функций, чтобы они не были доступны во всем мире для любых манипуляций.

Внутри анонимной функции мы инициализируем наш модуль AngularJS, используя метод angular.module(). Функция angular.module() принимает имя модуля в качестве первого аргумента и массив зависимостей в качестве второго аргумента.

Зависимости, которые мы передали во втором аргументе в виде массива, - ngRoute, ngSanitize и ngResource. Вот что делает каждый из них:

  • ngRoute: Этот модуль предоставляет услуги маршрутизации и глубокой привязки для нашего приложения. Он находится в файле angular-route.js в пакете AngularJS, загруженном с официального сайта.
  • ngResource: этот модуль предоставляет поддержку для взаимодействия с сервисами RESTful. Поскольку мы планируем использовать WP REST API, то это будет самый важный модуль в нашем приложении, поскольку мы будем использовать его для взаимодействия с ресурсами, такими как посты, категории и пользователей.
  • ngSanitize: Этот модуль обеспечивает функциональность для очищения HTML. Нам понадобится этот модуль при выводе HTML на странице. Примеры включают заголовок сообщения, содержание сообщения и выдержку.

Обратите внимание, что перед вводом этих модулей в качестве зависимостей в нашем основном модуле их соответствующие файлы должны быть включены в HTML-документ. Но вам не нужно беспокоиться об этом, так как мы уже настроили в нашем файле gulp.js.

После помещения вышеуказанного кода в ваш файл app.js, перейдите на адрес, предоставленный HTTP-сервером Node.js. Также откройте инструменты разработчика в своем браузере, и если вы не увидите ошибок JavaScript, мы будем рады!

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

Разделение шаблонов для разных представлений

Поскольку мы создаем одностраничное приложение (SPA), нам нужно настроить шаблоны для разных представлений, которые динамически загружаются на страницу, когда кто-то нажимает на ссылку.

В настоящее время у нас есть несколько страниц в нашем HTML: листинг постов, отдельный пост, автор и категория. HTML был структурирован таким образом, что заголовок, нижний колонтитул и основной контейнер одинаковы для всех этих страниц. Основной контейнер в нашем случае - div.columns.medium-8 внутри тега div.main.row. AngularJS позволяет нам конфигурировать различные шаблоны для разных маршрутов в приложении. Но прежде чем мы настроим маршрутизацию, нам нужно проанализировать эти шаблоны из существующих HTML-файлов.

Поэтому вместо использования четырех разных страниц для индексной страницы, отдельной публикации, автора и категории мы можем использовать одну основную HTML-страницу и загружать шаблоны для разных представлений в зависимости от текущего маршрута.

Начнем с разбора шаблона для просмотра списка публикаций. Откройте файл /src/index.html в редакторе кода по вашему выбору и вырежьте весь код, который находится внутри контейнера div.columns.medium-8. Создайте новый файл с названием listing.html внутри каталога /src/views и вставьте код в этот файл.

Этот шаблон будет служить представлением для нашей страницы листинга. Мы можем повторить процедуру для каждого из файлов post-single.html, author.html и category.html. Откройте каждый из этих файлов в редакторе кода и вырежьте содержимое контейнера div.columns.medium-8 и вставьте их в новые файлы, созданные в каталоге /src/views. Имена файлов шаблонов должны быть single.html, author.html и category.html соответственно.

Создайте новый файл в каталоге /src/views для страницы 404 и назовите его 404.html. Он не должен содержать ничего особенного, кроме следующей строки кода:

Теперь мы можем безопасно удалить файлы /src/post-single.html, /src/author.html и /src/category.html. Мы сохраним файл /src/index.html, который будет служить основной точкой входа для нашего приложения.

Последнее, что нам нужно сделать, - это указать AngularJS, где загрузить эти шаблоны. И мы можем это сделать, добавив директиву ng-view в контейнер div.columns.medium-8 внутри файла /src/index.html:

Директива ng-view сообщает AngularJS, куда загружать содержимое файлов шаблонов.

Мы также можем добавить атрибут auto-scroll = "true" в контейнере div.columns.medium-8, чтобы при переходе между представлениями браузер отображал точку, из которой мы вышли.

Вернитесь в свой браузер и обновите его, и вы увидите страницу, содержащую только заголовок и нижний колонтитул. Это связано с тем, что мы еще не настроили маршрутизацию. И это то, что мы делаем дальше.

Настройка маршрутизации для нашего приложения

Создав шаблоны для разных представлений в нашем приложении, пришло время рассказать AngularJS, как и когда загружать эти шаблоны. С этой целью AngularJS предоставляет компонент provider, называемый $routeProvider. $routeProvider предоставляет нам метод с названием .when(), который можно использовать для настройки маршрутов вместе с их шаблонами и некоторыми другими свойствами.

Рассмотрим следующий код:

Здесь мы настраиваем наше приложение, используя метод .config(), вставив в него $routeProvider. Функция принимает аргумент $route для $routeProvider, а затем мы используем его для настройки различных маршрутов.

Метод .when() настраивает новый маршрут и принимает два параметра для $path и $route соответственно. Аргумент $path представляет собой строку, представляющую путь, по которому мы настраиваем маршрут. Аргумент $route - это объект, содержащий информацию, такую как URL-адрес шаблона, который будет использоваться, контроллер, идентификатор контроллера и т.д.

В приведенном выше коде мы настроили четыре маршрута для просмотра списка сообщений, отдельного сообщения, авторов и категорий соответственно. Мы только что назначили им соответствующие URL-адреса шаблонов, и мы сконфигурируем их контроллеры позже в этой серии, когда мы их построим. Таким образом, с этого момента мы будем постепенно развивать этот код.

В приведенном выше коде обратите внимание на именованные группы, за которыми следует двоеточие: для одиночной поста, автора и категории. Они хранятся в службе $routeParams и будут доступны для любой директивы или контроллера, который хочет их использовать. Мы рассмотрим это более подробно, но на данный момент просто думаем о них как о местах, где можно найти столбец сообщения, идентификатор пользователя или идентификатор категории, предоставленный пользователем в URL-адресе.

Помимо четырех маршрутов, мы настроили шаблон 404 с помощью метода .otherwise(). Этот метод сообщает AngularJS перенаправить пользователя к определенному шаблону, если ни один из настроенных маршрутов не был сопоставлен.

Подробнее об сервисе маршрутизации AngularJS, а также о ее различных методах и аргументах можно узнать в официальной документации.

Теперь вы можете открыть любой из следующих четырех URL-адресов в вашем браузере и увидеть соответствующий загружаемый шаблон:

Адрес http://127.0.0.1:8080 может отличаться в вашем случае. id/slug, который мы здесь предоставляем (в данном случае 10), в данном случае не имеет значения.

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

Создание служб RESTful для ресурсов

AngularJS предоставляет нам модуль ngResource, который позволяет нам строить RESTful-сервис вокруг определенной конечной точки для ресурса. Но прежде чем мы начнем писать любой код для создания сервисов, давайте создадим некоторые конфигурационные переменные, которые хранят некоторую базовую информацию.

В вашем случае путь к серверу может отличаться, и я рекомендую вам изменить его соответствующим образом. Объявление этих переменных позволяет нам сконфигурировать путь к серверу только в одном месте, а не отдельно для каждой службы. Вышеприведённый код должен быть помещен внутри анонимной функции, и я разместил его сразу после объявления модуля quiescentApp.

Создание службы вокруг конечной точки в AngularJS так же просто, как и следующий код:

Вышеприведенный код создает службу для ресурса Posts в WP REST API. Здесь quiescentApp - это имя нашего основного модуля, который мы определили в самом начале.

Метод .factory() принимает имя в качестве первого аргумента, а второй - массив, содержащий список зависимостей и функцию. Функция принимает аргументы, переданные как зависимости. Поскольку мы предоставили $resource как зависимость для нашего сервиса, он передается функции как аргумент, а затем мы используем ее для создания службы для ресурса Posts.

Мы уже объявили переменную для пути API, поэтому мы можем заменить путь следующим:

Теперь, когда мы создали службу для ресурса Posts, мы можем внедрить эту службу как зависимость в наши директивы и контроллеры и начать использовать ее методы, такие как Posts.query(), Posts.get() и т. Д. Мы узнаем больше об этих методах и то, что они делают в следующих частях серии, но если вам интересно, вы всегда можете проверить официальную документацию.

Для создания сервиса для ресурса Posts мы предоставили маршрут /wp/v2/posts. Этот маршрут указывает на коллекцию сообщений, а также может использоваться для создания одного сообщения. Но в нашем приложении нам также нужно получить одну запись, основанную на ее slug. Чтобы учесть эту возможность, мы можем изменить код следующим образом:

Это называется параметризованным шаблоном URL, а параметры суффикс с двоеточием:.

Эта модификация позволяет нам извлекать коллекцию сообщений, используя маршрут /wp/v2/posts, а также извлекать отдельную запись посредством ее slug с помощью аргумента /posts?slug=<slug>.

Помимо сообщений, мы будем получать категории и пользователей по их идентификаторам. Поэтому следующий код создает службы для ресурсов Users и Categories:

Следовательно, код для всех трех служб следующий:

И наш файл /src/js/app.js выглядит примерно так:

Метод .get() для службы RESTful возвращает один объект с помощью метода GET HTTP. Метод .query() использует тот же метод GET HTTP, но возвращает массив. Существует три предопределенных метода, предоставляемых службой, а именно .save(), .remove() и .delete(), которые используют методы POST и DELETE. Но мы будем иметь дело только с методами .get() и .query() в этой серии, поскольку мы имеем дело только с извлечением данных.

И это завершает наш учебник на сегодня.

Что дальше?

В текущем учебнике мы написали много кода JavaScript для начальной загрузки нашего приложения, настройки маршрутов и создания служб RESTful. Мы также проанализировали шаблоны для разных представлений в нашем приложении.

В следующей части этой серии мы создадим специальную директиву AngularJS для функции публикации сообщений, используя созданную нами службу Posts. Это позволит нам включить функцию публикации сообщений во многих местах, не повторяясь. Так что следите за обновлениями ...

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.