Posted on

Angular.js in WordPress?

As web designers / programmers want to create sites loaded with user friendly access, the (still) favorized way is to utilize ajax functionality to some degree. But let’s say I want to use Ajax with Php,WordPress. This way is rather straightforward in WP – just copy code from Codex, that means create callback function, and ajax call using jQuery. It’ easy, we love it….but…

 

What if I have large / more complicated application to code? Perhaps I don’t like jQuery for this usage and I want to use something more convenient for current situation – for example Angular.js. I don’t want to create outstanding tutorial for creating Angular.js applications, here are just few ideas and options.

 

And one thing – many people could tell you, that using angular in WordPress is overkill. I agree.

Second thing – many people could tell you, that mixing angular and jQuery is bad idea(which you can’t avoid in WordPress completely). I agree.

The thing is – if you use it correctly and won’t mix it without thinking, then it is ok.

 

 

First of all, let’s assume that we have controllers, directives… set. Now we should create some Http provider service. Nothing much, just so it can be of use.

I have inline-injected core http service, which is now wrapped in my service named httpService. Http service is based on – or rather is dependent – $q service, which in return causes, that I can expect promise object returned. I utilize this in controller( .then(…)). Call from controller or something:

Okay, run it. You should get the page you have requested. This was easy…nothing too much hard. Now what about post method? Again call from controller or something:

Well, if i were to evaluate data received, i would receive ‘0’, or false.  The data which were sent could be in JSON format, that means in my case {action:get_group_product, product_id:xxx}. Why is that?

 

Answer lies in method, how wordpress accepts ajax calls and how jQuery packs data for transfer. In this case, angular isn’t doing anything bad, it just envelopes data in JSON container. So we need to do two things:

  • tell WordPress, that these datas are really in its favorized form, that means as form(html element) data
  • give angular, or better – http service, data encoded exactly how jQuery does

In practical example, it means changing and adding lines of code like this:

If you wonder why I used jQuery like this and tells you not to mix it without thinking – it’s just an example for you to see, that this line could be replaced by angular thing – you could use also

instead of that line.

With this, your sending request will be in correct form for WordPress ajax functionality.

 

Next we need backend ajax callback, that is if I use post method. In my case I want to call get_group_product action with one parameter and I want to get data in JSON format – why not. This step is covered on WordPress codex, but for completion:

With this, our Ajax call will be send right into get_group_product() function. You can see that I am using json_encode, which will cause, that http service will return data as Object. This object contains config data, and also my awaited data, so for access be prepared to use data.data.some_var

That’s it, you now have the basics, but there is always place for experimenting with angular.js in wordpress .