How to Set Up AngularJS in A WordPress Environment?

Many of us prefer to make use of a JavaScript MVC framework rather than using a traditional PHP templating system when it comes to WordPress front-end. After working for all these years in an AngularJS development company named eTatvaSoft, I am pretty much aware of how the platform handles templating. Besides, I personally find WordPress full of great functions for making text translatable.

With angular-translate and other modules available for localization, it becomes pretty easy to set up AngularJS in a WordPress environment. In the following post, I would like to share few proven ways of using the platform to manage localization without making use of untranslatable strings in your Angular templates.

Setting Up

Initially, I made a simple plugin that adds a shortcode which can be effectively used by Angular and the REST API to show at least 10 posts. In the template file, I made use of a mix of content from the posts and string like “Title” and “Author” that can be translated by WordPress. The setup is quite simple, my plugin features a function to enqueue the JavaScript files for Angular and my Angular app. Here you will find wp_localize_script() used by the app itself to print a JavaScript variable to the screen with data required in the app, including translations, as well as the REST API URL and nonce.

For those who have no idea, the function wp_localize_script() was made keeping the purpose of passing translation strings into JavaScript.

define( ‘ANGTREX_URL’, plugin_dir_url( __FILE__ ) );
define( ‘ANGTREX_DIR’, dirname( __FILE__ ) );
add_action( ‘wp_enqueue_scripts’, function(){
wp_enqueue_script(‘angular’, ‘//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js’ );
wp_enqueue_script(‘angular-resource’, ‘//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js’, [ ‘angular’ ] );
wp_enqueue_script( ‘angular-trans-exp’, ANGTREX_URL . ‘app.js’, [ ‘angular’ ] );
wp_localize_script(‘angular-trans-exp’, ‘ANGTREX’, [
‘api_url’      => esc_url_raw( rest_url() ),
‘rest_nonce’   => wp_create_nonce( ‘rest_api’ ),
‘translations’ => [
‘title’  => esc_html__( ‘Title’, ‘angtrex’ ),
‘author’ => esc_html__( ‘Author’, ‘angtrex’ ),
‘view’   => esc_html__( ‘Read More’, ‘angtrex’ )
] ] );
});

Can you spot ANGTREX? It is the object which is being localized. Next, I have an index called translations, with strings. These strings are escaped and made translation ready using the function esc_html__().

Although there is nothing unique about it, but what I like the most is its standard. Down below you will find the HTML for a very simple Angular app inside of a standard shortcode function

From the above example, you will find that the template makes use of tags that call the post and data from “translations.” The only challenge was getting from the localized variable to the template and making it universally available.

add_shortcode( ‘angtrex’, ‘angtrex’ );
function angtrex(){
ob_start();
?>