michaelbromley / angular-wordpress-seed

A bare-bones AngularJS blog app designed to work with the Wordpress JSON REST API.

angular-wordpress-seed

A bare-bones AngularJS blog app designed to work with the Wordpress JSON REST API.

Demo

http://www.michaelbromley.co.uk/experiments/angular-wordpress-seed/

Setting Up Wordpress

1. Download and install Wordpress (Download link)
2. Enable pretty permalinks (Settings -> Permalinks), select "custom structure" and use the string /%post_id%/%postname%.
3. Install the JSON REST API (WP-API) plugin. Easiest way is to use the Plugins -> Add New feature of the Wordpress admin interface. Manual install instructions can be found on the WP-API repo.
4. By default, the AngularJS service that communicates with Wordpress will look for posts with a category of "post". Additionally, posts which are also in the category "featured" will appear on the home page. These categories will therefore need to be set up.

Setting Up The Client

1. Clone this repo.
2. Run npm install and bower install to download the dependencies.
3. Configure your paths and meta data in the config.json file of the root directory.
4. Run gulp watch to build and start the watch task.
5. Navigate to the /build directory in your browser to test.
6. Upload the contents of /dist to your production server.

Developing

Here is an outline of the folder structure:

./src
   |- app               // The Angular app itself.
   |   |- about         // The various sections are in their
   |   |- blog          // own folders, and the `common` folder
   |   |- common        // houses any shared components & services
   |   |- home
   |
   |- assets            // Any static assets such as images and icon fonts.
   |- less              // All styling for the app. Each section has its own
                        // .less file, which are imported into the main.less file.

./build                 // dev build created when Gulp is run
./dist                  // minified, concatenated distribution build created by Gulp.

Extras

• Simple, responsive CSS based on the Pure CSS framework.
• A couple of custom directives are included for simple pagination of blog posts and a revealing search input.
• Built-in support for handling search-engine and social-media crawlers based on this technique

License

MIT

angular-wordpress-seed's Issues

WP API V2

Any plans to support WP API V2 ?

Incorporating ACF support

Hello Michael - First off - this is an amazing project!
I'm enjoying digging into it - lot's to learn for sure!

Using Advanced Custom Fields with this project would be amazing, but I have run into issues getting it to fully work. I have used acf in a wordpress theme built with angular - but it was not using ui-router (and it was a theme).

also other things such as featured image seem to not work as one would think. Very curious.

{{ vm.post.featured_image.attachment_meta.sizes.thumbnail.url }} comes up blank.
as does {{ vm.post.acf.title }} (for example)

here's an example of what {{ vm.post.acf }} returns:
http://test.flatfiles.info/blog/23/bcn-bw

the source data source:
http://data.flatfiles.info/data-test/wp-json/posts/23/

Any thoughts would be extremely appreciated!

Add dist folder

Can you add dist folder to github?
I am not able to use and install node.

How to Install angular-wordpress-seed

I don't how to install angular-wordpress-seed.
clone angular-wordpress-seed to wordpress folder or another folder?

Static pages for custom posts not working

How does the RewriteRule work for static-page.php and how does it detect the user agent?

I've tried adding in another RewriteRule for a custom post type i have named 'events':

RewriteRule events/(\d*)/.*$ %%SITE_URL%%/static-page.php?id=$1 [P]

When directly visiting a link e.g: domain.com/events/92/post-title I just get the static page in the browser, instead of the app page. Any idea what's going on?

Thanks

Wordpress install in specific directory?

I always install wordpress in the root of the site. I suppose your demo wants me to put wordpress in a . ./wordpress/ map?

not able to display post

hi
i am getting bellow error
any idea how to solve.

Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html http://errors.angularjs.org/1.3.20/$sce/itype?p0=html at http://localhost/angular/build/scripts/bower_components/angular/angular.js:63:12 at trustAs (http://localhost/angular/build/scripts/bower_components/angular/angular.js:15342:15) at Object.sce.(anonymous function) [as trustAsHtml] (http://localhost/angular/build/scripts/bower_components/angular/angular.js:16093:16) at decorateResult (http://localhost/angular/build/scripts/app/common/services/BlogService.js:55:31) at http://localhost/angular/build/scripts/app/common/services/BlogService.js:40:32 at Array.map (native) at http://localhost/angular/build/scripts/app/common/services/BlogService.js:39:47 at processQueue (http://localhost/angular/build/scripts/bower_components/angular/angular.js:13318:27) at http://localhost/angular/build/scripts/bower_components/angular/angular.js:13334:27 at Scope.$eval (http://localhost/angular/build/scripts/bower_components/angular/angular.js:14570:28)

working locally but not on server

The app is not getting posts when I put it on my hosted server, but works fine locally.
Any idea why this would be?

These are the errors I'm getting in the console..

TypeError: Cannot read property 'length' of null
TypeError: e.ga is not a function
TypeError: Cannot assign to read only property 'excerpt' of <!doctype html>

and Batarang shows an empty array for featuredPosts.

Models for (4)
 { 
    vm:  { 
           featuredPosts: 
                     [  ]
     } 
 } 

Looking forward to getting this running... :)

Uncaught ReferenceError: angular is not defined

This happened after I follow the instruction. Upon examination, I saw that angular is not included anywhere in the file. Do we need to include it manually?

MAMP and .htaccess

You might want to leave a comment on the install when using MAMP.

https://github.com/michaelbromley/angular-wordpress-seed/blob/master/src/app/.htaccess#L4

Forcing WWW locally with MAMP will cause an error.

You'll need to comment out the rules underneath if developing with MAMP.

builds fine, can't reach build/index.html

Michael-

Thanks for making this code available.

AFAIK everything is right in my setup.

I've got the app running in my sites.local/angular-wordpress-seed
I've got an instance of WP-API-enabled wordpress running at sites.local/wordpress/wp-json/

My config reflects that:

"build": { "siteUrl": "http://sites.local/angular-wordpress-seed/build/", "basePath": "/angular-wordpress-seed/build/", "apiUrl": "http://sites.local/wordpress/wp-json/" },

Apache is running, serves the wordpress json fine.

Every time I run gulp watch then go to

http://sites.local/angular-wordpress-seed/

I see the directory files, no problem. Then I try

http://sites.local/angular-wordpress-seed/build

It can't find it and then tries www.sites.local/angular... etc.

I tried against ports 8000 and 8080 in case that was it. No luck. Changed all permissions to 775, no luck.

Is that config correct? Should I hit a different port?

Angular 4/REST API v2

Hey,

Would you consider updating this code to be compatible with Angular 4 and REST API v2 that is now included with Wordpress?