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();
?>

{{translations.title}} : {{post.title.rendered}}

{{translations.author}} : {{post.author}}

{{post.content.rendered}}

</div>

</div>

<?php
return ob_get_clean();
}

Conclusion

Go for JavaScript MVC, but stay accessible. Without a shadow of a doubt, I can say that Angular and other JavaScript MVC frameworks make a great user experience. So that’s all for now! Keep watching the space to know more regarding the same.

Avatar
Rakesh Patelhttps://www.etatvasoft.com/
Rakesh Patel is Marketing Manager at eTatvaSoft - web, ecommerce & mobile app development company in India. He writes about Technology Trends, Leadership and many more things about IT services and enabled people to learn about new technologies through his online contribution.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

NOW TRENDING

5 Best Games Like Mystic Messenger for 2020

If you haven't played Mystic Messenger yet, you probably the kind of person who isn't aware of the latest happenings in the...

How to Change your Game Status in Discord

Discord is something you should familiarize yourself with if you spend most of the time on the internet playing online games. This...

Tinder Super Like – How to Super Like and Undo Super Like on Tinder

Looking for the guide about what actually Tinder Super like is? Do you want to know how you can hit Tinder Super Like to...

How to Delete All Messages in Discord

Although Discord is more heavily focused upon its voice call features, the messaging options are also quite frequently used. Now if you are an...

How to Install ElvUI on Windows and Mac – An Easy Guide

ElvUI is user friendly interface dedicated to World of Warcraft game. This UI increases the  gaming experience of players by permitting to update and customizing...

LATEST STORIES

12 Ways on How To Better Manage Your Outgoing Calls

For most small businesses, the phone still serves as the primary tool for communication. That’s why telephone call handling is really important. 

5 Benefits of Toll-Free Conference Call Services

Toll-free conferencing has been in existence since the 1960s and has been a game-changer in most companies' communication processes. Through conferencing, multiple...

Raymond Animal Crossing – How to get Raymond?

Raymond is one of the most excited about villager of Animal Crossing. He is a smug cat, and since there are only...

4 Secrets to Developing a Successful Mobile Business App

Mobile phones have long since stopped being used solely as the devices for calling and speaking to other people. The majority of...

Beau in Animal Crossing – Is Beau a Boy or Girl in Animal Crossing?

Beau (pronounced as a bow) is a lazy deer who first made his appearance in the Animal Crossing: New Leaf. Since then,...