frontpressorg/frontpress

frontpress-logo-horizontal

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

Bower version

Install FrontPress using NPM:

npm install frontpress --save

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

<script type="text/javascript" src="https://github.com/frontpressorg/frontpress/raw/master/path/to/angular.min.js"></script>
<script type="text/javascript" src="https://github.com/frontpressorg/frontpress/raw/master/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="https://github.com/frontpressorg/frontpress/raw/master/path/to/angular.min.js"></script>
       <script type="text/javascript" src="https://github.com/frontpressorg/frontpress/raw/master/path/to/frontpress/release/frontpress.min.js"></script>   
       <script type="text/javascript" src="https://github.com/frontpressorg/frontpress/raw/master/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"
        }
    });

});

CONTRIBUTING

If you want to contribute to FrontPress main code, start by running a build version of the code:

$ npm run dev

More info on CONTRIBUTING.md.

It's done!

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

frontpressorg / frontpress

readme