Minification Errors in My AngularJS WordPress Theme

This is the 4th post of a series about building WordPress themes with AngularJS and WP REST API (WP API).

In previous posts (1st, 2nd, 3rd) I’ve covered several topics in AngularJS with a very simple WordPress theme, include:

Module

We registered our application as a module called app to AngularJS. By adding a new attribute ng-app="app" to <html> in header.php, we can run the WordPress site as an AngularJS app. If our app requires other modules to run, we can add them to an array in the second parameter:

Route

With ngRoute when we change the path in our application, other than refreshing the whole page, only part of it (content in ng-view) will get updated. That makes our app a Single Page Application (SPA).

Controller

In the controller functions we set the initial state of a $scope object. For instance, we get a bunch of posts or a single post from WordPress (database) and attach them to the $scope object. We use them in our view with syntax like {{post.title}}. The other usage of controllers is to add behavior (functions) to the $scope object.

ngSanitize and ngBindHtml

When binding raw HTML or special characters (like HTML entities) to the page content, we should pass them via ngBindHtml directive, so ngSanitize module will return the sanitized and properly escaped string on the page.

Custom Directive

We can create custom directives as template tags like get_search_form() in WordPress. We built the searchForm directive and added a function to make it search for posts when the search keyword changed. In the beginning of 2015 I would like to do a code cleanup for the series of tutorials and share a very important concept in AngularJS with you, that is Dependency Injection (DI). Read More…

Use AngularJS Custom Directives In A WordPress Theme

This is the 3rd post of a series about building WordPress themes with AngularJS and WP REST API (WP API).

In previous posts, you’ve learned some new HTML tags and attributes like <ng-view> and ng-repeat, which we call “built-in directives” in AngularJS. In fact, anything you’ll learn starts with "ng" means it comes from AngularJs, and in general we shouldn’t prefix our custom directives (or functions) with the same “ng” pattern.

Long story short, “directives” are a way AngularJS manipulates parts of the DOM. They look like HTML tags or attributes and are used like HTML tags or attributes. The hard part is to define their “behaviors” so we can get the expected results.

As a developer comes from WordPress world, the first impression to me on AngularJS “directives”, is that they work like “template tags” in themes. Read More…

AngularJS WordPress Theme: Display Post Content with ngBindHtml

This is the second post of a series about building WordPress themes with AngularJS and WP REST API (WP API).

In the last screenshot of my previous post Using AngularJS And JSON API In Your WordPress Theme, you might be wondering why the post content displayed with the HTML tag, which looks like this:

Screenshot 5 from Using AngularJS and JSON API in your WordPress theme

This is not a bug, I left it intentionally to extend the series to another topic: ngBindHTML directive.

The name of ngBindHTML directive indicates that it is for binding HTML to the view. I bet you must be eager to try it by update the content.html to:

If so, you’ll be disappointed that not only the post content disappears, but also there comes an error to you console: The console error when using ngBindHtml From the error log the almighty AngularJS told us that the HTML we bound to the div might be “unsafe”. It’s very lucky to have AngularJS to get our back. It even provides an module called ngSanitize to sanitize the data in our code. Read More…

Using AngularJS and JSON API in Your WordPress Theme

This post is based on a tutorial video from WordPress.tv – Eric Wolfe: Building a WordPress Theme Using AngularJS.

This is the first post of a series about building WordPress themes with AngularJS and WP REST API (WP API).

AngularJS Logo

I tried AngularJs a while ago on Code School (free online course) and found it very impressive. Since my work is mostly based on WordPress in these days, learning how to make AngularJS and JSON API play nicely together, become my new hobby in the weekend.

When starting learn something new, I always start from Google. By just googling some keywords or phrases, I’ll get the most comprehensive resources on the topic I’m ready to dive in. To dig out really high quality stuff, I’ll use long tail keywords to narrow down the results. Luckily in this case, when googling “WordPress JSON API+AngularJS” there are no overwhelming results for me to sort out. I could learn on my own pace and share some tricks here to help newcomers.

Before we get started, if you’d like to know why AngularJS are popular these days, and why WordPress is good to serve as backend for websites, you could check this slide shared by Eric W. Greene, for the time of this writing, it takes the second spot when I google for “WordPress JSON API+AngularJS”.

Even if you have no experience in AngularJS, as long as you’re comfortable with coding, now you can open your favorite code editor and work with me. Read More…