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

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

7 Best Kik Friend Finder Apps

The number of messengers are increasing day by day, Kik Messenger holds its place as a superb instant messaging app, which allows...

How To Add Bots To Your Discord Server

If you want to add a bot to Discord, this article contains all the guidelines required on how to make a discord bot.

LATEST STORIES

6 Reasons Your Business Needs Voicemail Apps

Considering how digitalized the world is currently, it might be surprising to know that voicemail is still used in the business and...

iflix – Online Streaming Service for PC

Iflix is an online streaming service offering shows and movies for entertainment from many parts of the world. It’s based out of...

How to Change File Associations in Windows 7, 8, 10

File associations play an essential role in the smooth functioning of an Operating System, and Windows has no exception. This simply means...

Tips for Choosing an Affordable AV Receiver under $500

The receiver was invented about 100 years ago as a combination of radio receiver and amplifier. Since then, it has evolved a...

5 Community Benefits That Come From Small Businesses

If you think about what makes a community unique, your mind probably goes to the quaint shops and small businesses that often...