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"
}
});
});It's done!
Disclaimer: By default as any SPA FrontPress homepage will run o 5F9A n 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