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

Hay Day Derby Tips – Play Guide And Derby Winning Strategy

Derby is the awesome feature being introduced by Super Cell in Hay Day. This made Hay Day players more professional in the game rather...

How to Use Tinder Without Facebook – 3 Ways to Sign in Tinder

Are you a married man or woman or teenager who wants to use Tinder without Facebook either to hide your Tinder activity from your...

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

LATEST STORIES

4 Blogging Tips to Help Your Business Withstand Competitive Pressure

With the advancement of SEO techniques, even the smallest businesses can have some advantage among the competitors and remain successful in the...

Preparing For The Risks That Come With Growing Your Start-Up Business

Each year we see thousands of new businesses being launched. Sadly, only 10 percent of startups make it past the starting gate....

Should You Use Salesforce Commerce Cloud or Shopify for Your Online Store?

Along the commercial roads that we walk, there’s constant chatter about which new eCommerce platform ought to be king. The two princes...

7 Creative Ways to Secure More Business Deals

When virtually every business in the world has the ability to reach virtually every customer in the world, you have to get...

How to Find the Best POS Software for Your Small Retail Store

A POS system can take your business to the next level. With their advanced automation capabilities and reporting tools, you can use...