frontpress

:zap: A full front-end AngularJS template for WordPress Rest API.

frontpress-logo-horizontal

A full front-end AngularJS template for WordPress Rest API.

-

Build Status Gitter chat CDNJS Bower version npm version Codacy Badge Codacy coverage dependencies Status devDependencies Status

Install FrontPress using NPM:

npm install frontpress --save

AngularJS is the only FrontPress dependency you will need to import.

<script type="text/javascript" src="/path/to/angular.min.js"></script>
<script type="text/javascript" src="/path/to/frontpress/release/frontpress.min.js"></script>

You may install FrontPress using bower or import it directly from cdn using cdnjs.

Usage

  • Add frontpress to your required modules list:
angular.module('myBlog', ['frontpress']);

Make your index.html

Your minimal index.html can be just like that.

<!DOCTYPE html>
<html ng-app="myBlog">
   <!-- include FrontPress page-head attribute directive if you want-->
   <head page-head>
       <script type="text/javascript" src="/path/to/angular.min.js"></script>
       <script type="text/javascript" src="/path/to/frontpress/release/frontpress.min.js"></script>   
       <script type="text/javascript" src="/path/to/my/blog/javascript.js"></script>
   </head>
   <body>
       <!-- ui-view directive is required -->
       <ui-view></ui-view>
   </body>
</html>

Configure your javascript

  • Configure your module using $FrontPressProvider !
angular.module('myBlog').config(function($FrontPressProvider){

	$FrontPressProvider.configure.load({
		"restApiUrl": "https://demo.wp-api.org/wp-json",
		"apiVersion": "v2",
		"pageSize": 5,
		"infiniteScroll": true,
		"routes": {
			"post": "/:postYear/:postMonth/:postDay/:postSlug",
			"home.pagination": "/page/:pageNumber"
		},
		"titles": {
			"post": ":postTitle - :siteName",
			"home": "Home - :siteName"
		},
		"overrides": {
			"siteName": "My Awesome SPA Blog"
		}
	});
	
});

It’s done!

Disclaimer: By default as any SPA FrontPress homepage will run on a /#!/ route!

Further relevant informations

License

MIT © Teles

Related Repositories

frontpress

frontpress

:zap: A full front-end AngularJS template for WordPress Rest API. ...

frontpress

frontpress

:zap: Full front-end AngularJS template for WordPress API. ...

frontpress-cli

frontpress-cli

CLI tool for FrontPress ...

docs

docs

:memo: FrontPress official documentation. ...