npm install frontpress --saveAngularJS 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.
- Add
frontpressto your required modules list:
angular.module('myBlog', ['frontpress']);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 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" } }); });If you want to contribute to FrontPress main code, start by running a build version of the code:
$ npm run devMore info on CONTRIBUTING.md.
It's done!
Disclaimer: By default as any SPA FrontPress homepage will run on a /#!/ route!
- How can I discover my restApiUrl?
- How to use FrontPress for Wordpress api version 1?
- What configuration is required?
- All configuration options
- What is a SPA and why you should care about it?
- Readme for FrontPress core developers
MIT © Teles