在本系列的前一部分中，有关使用WP REST API和AngularJS构建由WordPress驱动的前端，我们分析了项目需求，评估了线框，下载并编译了HTML包，并为WordPress构建了随行插件，该插件可以修改对Posts和Users资源。
为我们的项目奠定了坚实的基础之后，我们现在就可以开始在前端工作并为AngularJS设置应用程序的基本配置了。
在本系列的当前部分中，我们将：
- 引导AngularJS应用
- 剖析HTML包中不同视图的模板
- 为我们的应用配置路由
- 在WP REST API中为不同资源配置服务
让我们从初始化AngularJS应用程序开始，然后剖析视图视图的模板，包括帖子列表，单个帖子和类别。
引导AngularJS应用
为了构建支持WP REST API的应用程序，我们要做的第一件事是使用ng-app AngularJS指令引导它。 ng-app指令用于自动引导应用程序，它将AngularJS模块的名称作为可选值。
但是，在开始修改任何文件之前，请确保已导航到quiescent-rest-api-html目录来运行gulp命令。 这将确保您通过gulp watch命令将/ src目录中所做的任何更改立即编译到/ dist目录中。 除此之外，我还鼓励您导航到另一个控制台窗口中的/ dist目录，并运行http-server命令，该命令将为该目录运行Node.js HTTP服务器，并且您可以通过以下方式在浏览器中预览站点：只需输入一个简单的网址即可，例如127.0.0.1:8080 。
ng-app指令通常放在根元素中，即标签。 因此，我们将src / index.html文件中的标记修改为以下内容：
在这里， quiescentApp是我们主要的AngularJS模块的名称，接下来我们将在src / js / app.js文件中对其进行初始化。
src / js / app.js文件当前仅包含一行代码，用于初始化Zurb Foundation提供JavaScript功能。 我们可以修改此文件以为AngularJS应用程序的主要模块包含以下代码：
(function() {
/**
* Module definition for Quiescent App
*/
var quiescentApp = angular.module( 'quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource'] );
})();上面的代码中的第一件事是由以下内容表示的自调用匿名函数：
(function() {
})(); 顾名思义，以上函数是匿名的，即它没有名称，它会立即调用自身以执行其体内的所有代码。 这是限制变量和函数范围的好方法，这样就无法通过任何操作全局访问它们。
在匿名函数内部，我们使用angular.module()方法初始化AngularJS模块。 angular.module()函数将模块名称作为第一个参数，并将依赖项数组作为第二个参数。
我们在第二个参数中作为数组传递的依赖项是ngRoute ， ngSanitize和ngResource 。 这是每个人的工作：
-
ngRoute：此模块为我们的应用程序提供路由和深层链接服务。 从官方网站下载的AngularJS包中的angular-route.js文件中可以找到它。 -
ngResource：此模块提供与RESTful服务进行交互的支持。 由于我们计划使用WP REST API，因此这将是我们应用程序中最重要的模块，因为我们将使用该模块与资源（包括帖子，类别和用户）进行交互。
-
ngSanitize：此模块提供用于ngSanitizeHTML的功能。 在页面上输出HTML时，我们将需要此模块。 示例包括帖子标题，帖子内容和摘录。
请注意，在将这些模块作为依赖项注入到我们的主模块中之前，它们各自的文件必须包含在HTML文档中。 但是您不必担心，因为我们已经在gulp.js文件中进行了配置。
将上面的代码放入您的app.js文件中后，转到Node.js HTTP服务器提供的地址。 还要在浏览器中打开开发人员工具，如果您没有看到JavaScript错误，我们很乐意！
现在我们已经成功初始化了AngularJS应用程序，我们可以处理模板部分并剖析不同视图的模板。
剖析不同视图的模板
由于我们正在构建单页应用程序（SPA），因此我们需要为不同的视图配置模板，当有人单击链接时，这些视图会动态加载到页面中。
当前，我们在HTML中有多个页面，包括帖子列表，单个帖子，作者和类别的页面。 HTML的结构使得所有这些页面的页眉，页脚和主容器都相同。 在我们的例子中，主容器是div.main.row标记内的div.main.row div.columns.medium-8 。 AngularJS允许我们为应用程序中的不同路由配置不同的模板。 但是在配置路由之前，我们需要从现有HTML文件中剖析这些模板。
因此，我们可以使用一个主HTML页面并根据当前路线为不同视图加载模板，而不是为索引页面，单个帖子，作者和类别使用四个不同的页面。
让我们首先剖析发布列表视图的模板。 在您选择的代码编辑器中打开/src/index.html文件，并剪切div.columns.medium-8容器内的所有代码。 在/ src / views目录中创建一个名为listing.html的新文件，并将代码粘贴到该文件中。
该模板将用作我们列表页面的视图。 我们可以对post-single.html ， author.html和category.html每个文件重复该过程。 在代码编辑器中打开每个文件，并剪切div.columns.medium-8容器的内容，并将其粘贴到在/ src / views目录中创建的新文件中。 模板文件的名称分别为single.html ， author.html和category.html 。
在/ src / views目录中为404页面创建一个新文件，并将其命名为404.html 。 它不必包含任何特殊内容，而仅包含以下代码行：
404 - Nothing Found
现在，我们可以安全地删除/src/post-single.html，/src/author.html和/src/category.html文件。 我们将保留/src/index.html文件，该文件将用作我们应用程序的主要入口点。
我们现在需要做的最后一件事是告诉AngularJS这些模板的加载位置。 我们可以通过在/src/index.html文件内的div.columns.medium div.columns.medium-8容器中添加ng-view指令来做到这一点：
ng-view指令告诉AngularJS在何处加载模板文件的内容。
我们还可以在div.columns.medium-8容器上添加auto-scroll="true"属性，以便在视图之间来回导航时，浏览器会将我们带到离开的位置。
回到浏览器并刷新它，您应该会看到一个仅包含页眉和页脚的页面。 这是因为我们尚未配置路由。 这就是我们接下来要做的。
为我们的应用配置路由
在我们的应用程序中为不同视图创建了模板之后，就该告诉AngularJS如何以及何时加载这些模板了。 为此，AngularJS提供了一个名为$routeProvider提供程序组件。 $routeProvider为我们提供了一种名为$routeProvider .when()的方法，可用于配置路由及其模板和其他一些属性。
考虑以下代码：
/**
* 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'
} );
}] ); 在这里，我们通过将$routeProvider注入应用程序来使用.config()方法配置应用程序。 该函数接受$routeProvider的参数$route ，然后将其用于配置不同的路由。
.when()方法配置一个新路由，并且它分别为$path和$route两个参数。 $path参数是一个字符串，表示我们要为其配置路由的路径。 $route参数是一个对象，包含诸如要使用的模板URL，控制器，控制器标识符等信息。
在上面的代码中，我们为帖子列表，单个帖子，作者和类别视图分别配置了四个路线。 我们刚刚为其分配了各自的模板URL，并且在构建它们时将在本系列的后面部分中配置它们的控制器。 因此，我们将从这一点开始逐步构建此代码。
在上面的代码中，请注意命名组，后跟冒号:表示单个帖子，作者和类别路线。 它们存储在$routeParams服务中，并且可用于任何想要使用它们的指令或控制器。 我们将对此进行更详细的介绍，但现在，仅将它们视为可以访问URL中用户提供的帖子，用户ID或类别ID的地方。
除了这四个路由，我们还使用.otherwise()方法配置了404模板。 如果没有配置的路由匹配，此方法告诉AngularJS将用户重定向到特定模板。
您可以在官方文档中找到有关AngularJS路由服务及其不同方法和参数的更多信息 。
现在，您可以在浏览器中打开以下四个URL中的任何一个，并且应该看到正在加载正确的模板：
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可能与您的情况不同。 此时，我们在此处提供的ID /标记（在本例中为10）无关紧要。
我们现在要做的最后一件事是为帖子，用户和类别等资源创建服务。
为资源创建RESTful服务
AngularJS为我们提供了ngResource模块，该模块使我们能够围绕资源的给定端点构建RESTful服务。 但是，在我们深入编写用于创建服务的任何代码之前，让我们创建一些存储一些基本信息的配置变量。
/**
* Configuration variables for the app
*/
var
serverPath = 'http://localhost/wordpress/',
apiPath = 'wp-json/wp/v2/',
apiUrl = serverPath + apiPath; 根据您的情况，服务器路径可能会有所不同，我建议您进行相应的更改。 声明这些变量可使我们仅在一个位置配置服务器路径，而不必为每个服务分别编写。 上面的代码应该放在匿名函数中，我已在quiescentApp模块声明之后立即将其放置。
在AngularJS中围绕端点创建服务就像以下代码一样简单：
quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
return $resource( 'http://localhost/wordpress/wp-json/wp/v2/posts' );
}] ); 上面的代码围绕WP REST API中的Posts资源创建了一个服务。 在这里， quiescentApp是我们在一开始定义的主要模块的名称。
.factory()方法将名称作为第一个参数，第二个参数是一个包含依赖项列表和函数的数组。 该函数接受作为依赖项传递的参数。 由于我们将$resource作为服务的依赖项提供，因此它作为参数传递给函数，然后我们使用它为Posts资源创建服务。
我们已经为API路径声明了一个变量，因此我们可以将路径替换为以下内容：
quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
return $resource( apiUrl + 'posts' );
}] ); 现在，我们已经为Posts资源创建了一个服务，我们可以将该服务作为依赖项注入到我们的指令和控制器中，并开始使用其方法，如Posts.query() ， Posts.get()等。我们将了解更多信息这些方法以及它们在本系列后续部分中的用途，但是如果您感到好奇，可以随时查阅官方文档 。
为了为Posts资源创建服务，我们提供了/wp/v2/posts路由。 此路线指向帖子的集合，也可以用于创建单个帖子。 但是，在我们的应用程序中，我们还需要根据其信息检索单个帖子。 为了说明此功能，我们可以将代码修改为以下内容：
quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
return $resource( apiUrl + 'posts?slug=:slug' );
}] ); 这称为参数化URL模板，并使用冒号:作为后缀。
通过此修改，我们可以使用/wp/v2/posts路由来检索帖子的集合，并可以使用/posts?slug=参数通过其子链接检索单个帖子。
除帖子外，我们还将通过类别ID检索类别和用户。 因此，以下代码为“ Users和Categories资源创建服务：
/**
* 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' );
}] );因此，这三个服务的代码如下：
/**
/**
* 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文件看起来类似于以下内容：
(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(); RESTful服务上的.get()方法使用GET HTTP方法返回单个对象。 .query()方法使用相同的GET HTTP方法，但它返回一个数组。 有由服务提供三个预定义的方法，即.save() .remove()和.delete()即使用POST和DELETE方法。 但是，由于我们仅处理检索数据，因此在本系列中仅处理.get()和.query()方法。
这总结了我们今天的教程。
接下来是什么？
在当前教程中，我们编写了很多JavaScript代码来引导应用程序，配置路由和创建RESTful服务。 我们还剖析了应用程序中不同视图的模板。
在本系列的下一部分中，我们将使用创建的Posts服务为发布列表功能构建自定义AngularJS指令。 这样一来，我们便可以在很多地方使用发布列表功能，而无需重复自己的操作。 所以请继续关注...
翻译自: https://code.tutsplus.com/tutorials/building-a-wordpress-powered-front-end-bootstrapping-routing-and-services--cms-26116