Code Monkey home page Code Monkey logo

angular-wordpress-theme's Introduction

WordPress Angular Theme

This is the royboy789's AngularJS WordPress theme. Now in version 6 of awesomeness.

NEW VERSION UPDATE - 6.0

Version 6 takes all the added features of 5, and revamps the whole build.
I have cleaned up a lot of the themes and php files, to keep this theme as minimal as possible.

WP-API 2

5/20/2015 - WP-API 2 code planned for next few commits
7/30/2015 - WP-API 2 plugin supported to get/view posts - delete / edit coming.
8/14/2015 - WP-API 2 now completely functional (delete, edit, and comments)

If you are looking for my theme that is v1 compatible see branch version 5, which I am no longer supporting.

npm & gulp

npm and gulp are now part of the build

  • npm install - installs all necessary packages and runs gulp init
  • gulp init - sets up all the vendor and theme scripts and styles

assets v. build directory

I am keeping all working files in the assets directory which build using gulp to the build directory for enqueue'ing by the theme.

What? Why?

I wanted to learn Angular, and I already have spent the last 10 years developing in WordPress. The best way to for me to learn was to make this.. but maybe someone else will find some awesome use for it.

The WordPress theme is built primarily using Front-Page.php to run as the main ng-view.

http://www.roysivan.com/angular-wordpress-theme

Technologies

AngularJS

Twitter Bootstrap - for easy customization and responsive design

LESS CSS - Personal preference over SASS

JSON API - Required plugin for RESTful API

Install Instructions

  • Download / Pull All Files
  • FTP to your themes directory
  • Download/Install the JSON API WordPress Plugin by Ryan McCue
  • Activate Theme under Appearances
  • Run npm install - this will also run gulp init
  • Come back and fork me

Documentation

EDIT/DELETE BUTTONS - in the list view you will find as the buttons to delete and edit the post. These are displayed on check of user login status, as a redundancy to help.

GLOBAL JS VARIABLES
set by localize_script in functions.php

  • ajaxInfo.api_url - JSON-REST-API url
  • ajaxInfo.template_directory - Current WordPress theme directory

To Do List

Continuation of development will include priority level items such as:

  • Edit Button
  • Delete Button

angular-wordpress-theme's People

Contributors

elvismdev avatar michaelapproved avatar royboy789 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-wordpress-theme's Issues

Wp rewrites angular routes when htmlMode(true) and refresh the page!

I'm using xampp in a virtualhost: http://virtualideas.local.
when I put the $locationProvider.html5Mode(true), works fine, but when I refresh the page, the wordpress rewrites the route, sending to a permalink version.
sample:
virtualideas.local/post/another-posts-to-test-angularjs/ - works fine when comes from index.php
but when I refresh the page wp rewrites to virtualideas.local/another-posts-to-test-angularjs/ - and doesn't load nothing.
There is a way to solve this?
thanks in advance.

How can enable comments??

I'm trying to allow users to comment, but do not get your theme,
I saw the demo and has also desabilitado comments. How do I enable them?

Creating a new view have to click twice to show view

When I create a new view/state (magazine) I'm having to click the menu item twice to show that state. First click shows a blank screen. Any idea why this is happening? Also, thank you for this theme!!

.config(function($stateProvider,$urlRouterProvider,$locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$urlRouterProvider.otherwise('/');
$stateProvider
.state('list',{
url:'/',
controller:'listView',
templateUrl:ajaxInfo.template_directory+'list.html'
})
.state('magazine',{
url:'/:magazine',
controller:'magazineView',
templateUrl:ajaxInfo.template_directory+'magazine.html'
})
.state('single',{
url:'/:slug',
controller:'singleView',
templateUrl:ajaxInfo.template_directory+'single.html'
})
})

Filters

Hi Roy!

Noticed you added post_by_slug custom endpoint...thank you.

Is there a way to use filters like ?filter[taxonomy]=eats-categories&filter[term]=eats-video
on that custom endpoint?

Also, when we visit /wp-json/wp/v2/post_by_slug only 1 post comes up...?
if we put /wp-json/wp/v2/post_by_slug/post_slug_here its 404

How to refactor this Angular code to fix the $resource:badcfg error

Hi Roy,

I have been following your SPA with Angular and WordPress and I hit a wall when I get to adding custom data to the API response and displaying it. When I add register_api_field() to function register_new_field() I get this error:

Error: [$resource:badcfg]

This error is saying that $resource expects an array, but its getting an object. I do have Posts.query() in the first wpApp.controller(), but when I change Posts.query() to Posts.get() that did not change anything and Posts.query() is what you have in the tutorial.

I have the code I am working with here in my repo:
https://github.com/ldco2016/angular-spa

How do I write this to eliminate this bug?

Non exisiting /build/ folder

Thank you so much Roy for this theme will allow us to test and learn angular + wp!

Activated it. Got a few errors and found that /build/ folder doesn't exist in the theme but its coded into angular-enqueue.php

screen shot 2015-09-17 at 9 28 19 pm
screen shot 2015-09-17 at 9 28 31 pm

Install issue white screen of death.

Got this issue on install.

Fatal error: Call to undefined function rest_get_url_prefix() in wp-content/themes/Angular-Wordpress-Theme-master/inc/angular-enqueue.php on line 23

slug routing

Hi Roy,

Very exited about this combination. Especially to upgrade some of my old wordpress sites with angular. A workflow I am loving more and more.

Currently the theme routes to the id of a post. Do you see any possibility to use the slug of wordpress posts as a routing. So that one can get some prettier URL's and also manually adjust them by adjusting slug.

WP Error/Warning for register_sidebar

Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Right Side" sidebar. Defaulting to "sidebar-1". Manually set the id to "sidebar-1" to silence this notice and keep existing sidebar content.

In functons.php add id to register_sidebar.

//REGISTER SIDEBAR
register_sidebar(array(
    'name' => 'Right Side',
    'id' => 'sidebar-1',
    'before_widget' => '<section>',
    'after_widget' => '</section>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));

Better UI

This theme needs to look better, even if it is pretty basic.

2185x ngRepeat

Hi Roy,

I activated the theme on my test WP-installation (Pods.io and WP-API/JSON-API).
The WP installation has 5 records ;) (they are shown properly)

But when I visit the site, I get 2185 times this node:

  •                 <div ng-switch="" on="nav.type">
                        <!-- ngSwitchWhen: Custom -->
                        <!-- ngSwitchWhen: Page -->
                        <!-- ngSwitchDefault:  --><a ng-switch-default="" href="#/view/" class="ng-scope ng-binding"></a>
                    </div>
                </li>
    

    I have not (yet) investigated the code, but will do asap.

    andy

  • ES6

    Add ES6 support

    Add DS_Store to gitignore

    hey roy! thanks for doing this. its really cool. i'm gonna start playing with it. was just thinking it might be good to add DS_Store to gitignore.

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      šŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. šŸ“ŠšŸ“ˆšŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google ā¤ļø Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.