В предыдущей части этой серии статей о создании внешнего интерфейса на основе WordPress с помощью API-интерфейса WP REST и AngularJS мы проанализировали требования проекта, оценили каркасные схемы, загрузили и скомпилировали пакет HTML и создали сопутствующий плагин для WordPress, который изменяет ответы для Posts и ресурсы Users .
Заложив прочную основу для нашего проекта, мы теперь готовы начать работу над внешним интерфейсом и настроить базовые конфигурации для нашего приложения с AngularJS.
В текущей части серии мы будем:
- загрузите приложение AngularJS
- анализировать шаблоны для разных представлений в пакете HTML
- настроить маршрутизацию для нашего приложения
- настроить службы для различных ресурсов в API REST WP
Начнем с инициализации приложения AngularJS и разбора шаблонов для представлений, в том числе списка публикаций, отдельной публикации и категорий.
Начальная загрузка приложения AngularJS
Первое, что нам нужно сделать, чтобы создать приложение на основе WP REST API, — это запустить его с помощью директивы AngularJS ng-app . Директива ng-app используется для автоматической начальной загрузки приложения и принимает имя модуля AngularJS в качестве необязательного значения.
Но прежде чем вы начнете изменять какие-либо файлы, убедитесь, что вы gulp команду gulp, перейдя в каталог quiescent-rest-api-html . Это обеспечит немедленную компиляцию любых изменений, внесенных вами в каталог / src, в каталог / dist с помощью команды gulp watch . Кроме того, я бы посоветовал вам перейти в каталог / dist в другом окне консоли и запустить команду http-server , которая запустит HTTP-сервер Node.js для этого каталога, и вы можете просмотреть свой сайт в браузере, выполнив просто введите веб-адрес так просто, как 127.0.0.1:8080 .
Директива ng-app обычно помещается в корневой элемент, т. <html> Тег <html> . Следовательно, мы <html> тег <html> в файле src / index.html следующим образом:
|
1
|
<html class=»no-js» lang=»en» ng-app=»quiescentApp»>
|
Здесь quiescentApp — это имя нашего основного модуля AngularJS, который мы будем инициализировать следующим в нашем файле src / js / app.js.
Файл src / js / app.js в настоящее время содержит только одну строку кода для инициализации функциональности JavaScript, предоставляемой Zurb Foundation. Мы можем изменить этот файл, добавив следующий код для основного модуля нашего приложения AngularJS:
|
1
2
3
4
5
6
7
8
|
(function() {
/**
* Module definition for Quiescent App
*/
var quiescentApp = angular.module( ‘quiescentApp’, [‘ngSanitize’, ‘ngRoute’, ‘ngResource’] );
})();
|
Первым делом в приведенном выше коде является самовывозная анонимная функция, представленная следующим образом:
|
1
2
3
|
(function() {
})();
|
Как следует из названия, вышеприведенная функция является анонимной, то есть не имеет имени и вызывает себя, немедленно выполняя весь код, который находится внутри ее тела. Это хороший способ ограничить область действия наших переменных и функций, чтобы они не были доступны глобально для каких-либо манипуляций.
Внутри анонимной функции мы инициализируем наш модуль AngularJS с помощью angular.module() . Функция angular.module() принимает имя модуля в качестве первого аргумента и массив зависимостей в качестве второго аргумента.
Зависимости, которые мы передали во втором аргументе в виде массива, это ngRoute , ngSanitize и ngResource . Вот что делает каждый из них:
-
ngRoute: Этот модуль предоставляет услуги маршрутизации и глубокой связи для нашего приложения. Он находится в файле angular-route.js в пакете AngularJS, загруженном с официального сайта. -
ngResource: этот модуль предоставляет поддержку для взаимодействия со службами RESTful. Поскольку мы планируем использовать API-интерфейс WP REST, это будет самый важный модуль в нашем приложении, поскольку мы будем использовать этот модуль для взаимодействия с ресурсами, включая сообщения, категории и пользователей. -
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 . Создайте новый файл list.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 . Он не должен содержать ничего особенного, а только следующую строку кода:
|
1
|
<h2>404 — Nothing Found</h2>
|
Теперь мы можем безопасно удалить файлы /src/post-single.html , /src/author.html и /src/category.html . Мы сохраним файл /src/index.html , который будет служить основной точкой входа для нашего приложения.
Последнее, что нам нужно сделать сейчас, это сообщить AngularJS место, где загрузить эти шаблоны. И мы можем сделать это, добавив директиву ng-view в контейнер div.columns.medium-8 внутри файла /src/index.html :
|
1
2
3
|
<div class=»columns medium-8″ ng-view>
</div>
|
Директива ng-view сообщает AngularJS, куда загружать содержимое файлов шаблонов.
Мы также можем добавить атрибут auto-scroll="true" в div.columns.medium-8 чтобы при div.columns.medium-8 назад и вперед между представлениями браузер div.columns.medium-8 нас в точку, из которой мы вышли.
Вернитесь в браузер и обновите его, и вы должны увидеть страницу, содержащую только верхний и нижний колонтитулы. Это потому, что мы еще не настроили маршрутизацию. И это то, что мы делаем дальше.
Настройка маршрутизации для нашего приложения
Создав шаблоны для различных представлений в нашем приложении, пришло время рассказать AngularJS, как и когда загружать эти шаблоны. Для этой цели AngularJS предоставляет компонент провайдера с именем $routeProvider . $routeProvider предоставляет нам метод с именем .when() который можно использовать для настройки маршрутов вместе с их шаблонами и некоторыми другими свойствами.
Рассмотрим следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/**
* Configuring routes for our app
*/
quiescentApp.config( [‘$routeProvider’, function( $route ) {
// post listing route
$route.when( ‘/posts’, {
templateUrl: ‘views/listing.html’,
} )
// single post route
.when( ‘/posts/:slug’, {
templateUrl: ‘views/single.html’,
} )
// author profile route
.when( ‘/users/:id’, {
templateUrl: ‘views/author.html’,
} )
// category profile route
.when( ‘/categories/:id’, {
templateUrl: ‘views/category.html’,
} )
// 404 route
.otherwise( {
templateUrl: ‘views/404.html’
} );
}] );
|
Здесь мы настраиваем наше приложение, используя метод .config() , $routeProvider в него $routeProvider . Функция принимает аргумент — $route — для $routeProvider , а затем мы используем его для настройки различных маршрутов.
Метод .when() настраивает новый маршрут, и он принимает два параметра для $path и $route соответственно. Аргумент $path — это строка, представляющая путь, для которого мы настраиваем маршрут. Аргумент $route — это объект, содержащий информацию, такую как URL-адрес шаблона, контроллер, идентификатор контроллера и т. Д.
В приведенном выше коде мы настроили четыре маршрута для публикации записей, просмотра одной публикации, автора и категории соответственно. Мы только что присвоили им соответствующие URL-адреса шаблонов, и мы настроим их контроллеры позже в этой серии, когда будем их создавать. Таким образом, мы будем постепенно наращивать этот код с этого момента.
В приведенном выше коде обратите внимание на именованные группы, за которыми следует двоеточие : для одного сообщения, автора и маршрутов категории. Они хранятся в службе $routeParams и будут доступны для любой директивы или контроллера, которые захотят их использовать. Мы рассмотрим это более подробно, но пока, просто представьте, что это места, где можно получить доступ к почтовому слагу, идентификатору пользователя или идентификатору категории, как указано пользователем в URL.
Помимо четырех маршрутов, мы настроили шаблон 404 с помощью .otherwise() . Этот метод говорит AngularJS перенаправить пользователя к определенному шаблону, если ни один из настроенных маршрутов не был найден.
Вы можете узнать больше о службе маршрутизации AngularJS и ее различных методах и аргументах в официальной документации .
Теперь вы можете открыть любой из следующих четырех URL-адресов в вашем браузере и увидеть соответствующий загружаемый шаблон:
|
1
2
3
4
|
https://127.0.0.1:8080/#/posts
http://127.0.0.1:8080/#/posts/10
http://127.0.0.1:8080/#/categories/10
http://127.0.0.1:8080/#/users/10
|
Адрес http://127.0.0.1:8080 может отличаться в вашем случае. Идентификатор / слаг, который мы здесь предоставляем (в данном случае 10), не имеет значения на данном этапе.
Последнее, что нам нужно сделать сейчас, — это создать службы для ресурсов, таких как сообщения, пользователи и категории.
Создание сервисов RESTful для ресурсов
AngularJS предоставляет нам модуль ngResource , который позволяет нам создавать сервис RESTful вокруг заданной конечной точки для ресурса. Но прежде чем мы углубимся в написание кода для создания сервисов, давайте создадим некоторые переменные конфигурации, которые хранят некоторую базовую информацию.
|
1
2
3
4
5
6
7
|
/**
* Configuration variables for the app
*/
var
serverPath = ‘http://localhost/wordpress/’,
apiPath = ‘wp-json/wp/v2/’,
apiUrl = serverPath + apiPath;
|
Путь к серверу в вашем случае может быть другим, и я рекомендую вам изменить его соответствующим образом. Объявление этих переменных позволяет нам настраивать путь к серверу только в одном месте, а не записывать его отдельно для каждой службы. Приведенный выше код должен быть помещен в анонимную функцию, и я разместил его сразу после объявления моего модуля quiescentApp .
Создание службы вокруг конечной точки в AngularJS так же просто, как следующий код:
|
1
2
3
|
quiescentApp.factory( ‘Posts’, [‘$resource’, function( $resource ) {
return $resource( ‘http://localhost/wordpress/wp-json/wp/v2/posts’ );
}] );
|
Приведенный выше код создает службу вокруг ресурса Posts в WP REST API. Здесь quiescentApp — это название нашего основного модуля, который мы определили в самом начале.
Метод .factory() принимает имя в качестве первого аргумента, а второй аргумент представляет собой массив, содержащий список зависимостей и функцию. Функция принимает аргументы, передаваемые как зависимости. Поскольку мы предоставили $resource в качестве зависимости для нашего сервиса, он передается функции в качестве аргумента, а затем мы используем его для создания сервиса для ресурса Posts .
Мы уже объявили переменную для пути API, поэтому мы можем заменить путь следующим:
|
1
2
3
|
quiescentApp.factory( ‘Posts’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘posts’ );
}] );
|
Теперь, когда мы создали сервис для ресурса Posts , мы можем внедрить этот сервис как зависимость в наших директивах и контроллерах и начать использовать его методы, такие как Posts.query() , Posts.get() и т. Д. Мы узнаем больше о эти методы и то, что они делают в следующих частях серии, но если вам интересно, вы всегда можете проверить официальную документацию .
Для создания сервиса для ресурса Posts мы предусмотрели маршрут /wp/v2/posts . Этот маршрут указывает на коллекцию сообщений и может также использоваться для создания одного сообщения. Но в нашем приложении нам также нужно извлечь один пост, основываясь на его слаге. Чтобы учесть эту функцию, мы можем изменить код следующим образом:
|
1
2
3
|
quiescentApp.factory( ‘Posts’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘posts?slug=:slug’ );
}] );
|
Это называется параметризованным шаблоном URL, а к параметрам добавляется суффикс двоеточия :
Эта модификация позволяет нам получать коллекцию постов с использованием маршрута /wp/v2/posts , а также извлекать один пост по его слагу с помощью аргумента /posts?slug=<slug> .
Помимо сообщений мы будем получать категории и пользователей по их идентификаторам. Поэтому следующий код создает службы для ресурсов Users и Categories :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
/**
* Creating a service for Users
*/
quiescentApp.factory( ‘Users’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘users/:id’ );
}] );
/**
* Creating a service for Categories
*/
quiescentApp.factory( ‘Categories’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘categories/:id’ );
}] );
|
Следовательно, код для всех трех сервисов следующий:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
/**
/**
* Creating a service for Posts
*/
quiescentApp.factory( ‘Posts’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘posts?slug=:slug’ );
}] );
/**
* Creating a service for Users
*/
quiescentApp.factory( ‘Users’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘users/:id’ );
}] );
/**
* Creating a service for Categories
*/
quiescentApp.factory( ‘Categories’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘categories/:id’ );
}] );
|
И наш файл /src/js/app.js пока выглядит примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
(function() {
/**
* Module definition for Quiescent App
*/
var quiescentApp = angular.module( ‘quiescentApp’, [‘ngSanitize’, ‘ngRoute’, ‘ngResource’] );
/**
* Configuration variables for the app
*/
var
serverPath = ‘http://localhost/wordpress/’,
apiPath = ‘wp-json/wp/v2/’,
apiUrl = serverPath + apiPath;
/**
* Configuring routes for our app
*/
quiescentApp.config( [‘$routeProvider’, function( $route ) {
// post listing route
$route.when( ‘/posts’, {
templateUrl: ‘views/listing.html’,
} )
// single post route
.when( ‘/posts/:slug’, {
templateUrl: ‘views/single.html’,
} )
// author profile route
.when( ‘/users/:id’, {
templateUrl: ‘views/author.html’,
} )
// category profile route
.when( ‘/categories/:id’, {
templateUrl: ‘views/category.html’,
} )
// 404 route
.otherwise( {
templateUrl: ‘views/404.html’
} );
}] );
/**
* Creating a service for Posts
*/
quiescentApp.factory( ‘Posts’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘posts?slug=:slug’ );
}] );
/**
* Creating a service for Users
*/
quiescentApp.factory( ‘Users’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘users/:id’ );
}] );
/**
* Creating a service for Categories
*/
quiescentApp.factory( ‘Categories’, [‘$resource’, function( $resource ) {
return $resource( apiUrl + ‘categories/:id’ );
}] );
})();
$(document).foundation();
|
Метод .get() службы RESTful возвращает один объект с помощью метода GET HTTP. Метод .query() использует тот же метод GET HTTP, но возвращает массив. Есть еще три предопределенных метода, предоставляемых службой, а именно .save() , .remove() и .delete() , которые используют методы POST и DELETE . Но мы будем иметь дело только с .get() и .query() в этой серии, так как мы имеем дело только с получением данных.
И это завершает наш учебник на сегодня.
Что дальше?
В этом руководстве мы написали много кода JavaScript для начальной загрузки нашего приложения, настройки маршрутов и создания служб RESTful. Мы также рассекали шаблоны для разных видов в нашем приложении.
В следующей части серии мы создадим пользовательскую директиву AngularJS для функции публикации сообщений, используя созданный нами сервис Posts . Это позволит нам включить функцию публикации сообщений во многих местах без повторения. Так что следите за обновлениями …