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).
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 