• Stars
    star
    310
  • Rank 134,926 (Top 3 %)
  • Language
    JavaScript
  • Created over 9 years ago
  • Updated almost 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

More Repositories

1

angularUtils

A place where I will collect useful re-usable Angular components that I make
JavaScript
1,999
star
2

ngx-pagination

Pagination for Angular
TypeScript
1,213
star
3

soundcloud-visualizer

Audio visualization with web audio API, canvas & the SoundCloud API
HTML
449
star
4

chromata

A generative art tool.
JavaScript
376
star
5

angular-es6

An experiment in using ES6 features with AngularJS 1.x
JavaScript
370
star
6

horizonal

Turn your static HTML document into a programmable slide show
JavaScript
205
star
7

css-space-shooter

An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
JavaScript
176
star
8

skqw

JavaScript Audio Visualizer
TypeScript
120
star
9

angular-social-demo

A demo of how to allow social media crawlers (Facebook, Twitter, Pinterest etc) to read your AngularJS app
HTML
110
star
10

angularUtils-pagination

Simple pagination for AngularJS
JavaScript
42
star
11

drawACatApp

A canvas line drawing experiment
JavaScript
29
star
12

heavenly-glory

A kung-fu movie starring you. Web RTC & Web Audio experiment.
JavaScript
23
star
13

css-experiments

Some experiments involving CSS
CSS
14
star
14

michaelbromley.co.uk

The source code for my personal website and blog
JavaScript
13
star
15

headlesscommerceplatforms

A feature comparison of various headless e-commerce solutions
TypeScript
10
star
16

shader-playground

Some snippets of code for fragment shaders
GLSL
9
star
17

cmpg

A super simple component generator for Angular 2
JavaScript
9
star
18

breezejs-odata4-adapter

An experimental adapter to allow BreezeJS to work with an OData v4 server.
JavaScript
7
star
19

skqw-library

Visualization library for SKQW
JavaScript
5
star
20

angularUtils-uiBreadcrumbs

Automatic breadcrumbs directive for use with angular-ui-router
JavaScript
3
star
21

vendure-plugin-example

Handlebars
3
star
22

canvas_experiments

Simple examples of HTML canvas
JavaScript
3
star
23

vendure-demo

TypeScript
2
star
24

angular-issue-18478

Reproduction of Angular issue 18478
TypeScript
1
star
25

pad

A new way to work with text.
TypeScript
1
star
26

angularUtils-disqus

A directive for including Disqus comments in an AngularJS app
JavaScript
1
star
27

gulp-es6-seed

A minimal seed to kick start an ES6 project
JavaScript
1
star