Tuesday, October 14, 2014

The AngularJS angle to Visualforce

If someone had mentioned that I would be working on AngularJS a couple of months back, I would have laughed of with that idea. I am a force.com platofrm purist and can work wonders on the platform. Perhaps use jquery for the little magic tricks here and there but thats there. However, as it happened a few weeks back I was introduced to the AngularJS and I cannot be more excited about the technology. A couple of nights in the past I have been deep diving into EggHead to learn AngularJS and have seen in wonder the possibility of Angular $Scope powered with visualforce platform.

After dabbing myself into a bit of Angular, here is first thought on the technology.

The easiest way to implement angular is to include the ng-app on the Apex:page


<apex:page applyhtmltag="false" showheader="false" sidebar="false" standardstylesheets="false">
<html lang="en" ng-app="myApp" ng-controller="AngularController">
....
</html>
</apex:page>

There are two major things you need to handle while using Angular:

  1. The template/ CSS/ JS
    • Most Angular template are not single page document and hence you will have to put in a bit of a effort in converting them into Visualforce by using static resources
    • You could also use Apex:composition to create a composition template.
  2. The Apex code/Database handling
    • The best way to work with Angular data is visualforce remoting. You can call Apex methods using Visualforce Remoting and store the values in JSON objects. 
    • Another way to call Apex method is using rest based Api. You can return values and store them in JSON objects for processing.

Where does it go from here? Why use Angular?

There are various scenarios when you will use Angular. If you are keen on building a webpage with mimimum effort. The future expansion of angular code is easy. If you wish to use bootstrap-angular elements like the ever elite DataTables or you are a nerdy person (like me) who does not want simple things out of life.

Future?

There some planned updates by Salesforce on Angular front but for now all is safe harbor. Angular is easy to use as visualforce component and you can leard a lot of egghead.io

Code Samples?

I am still dabbing into the thing for a project and have no time to prepare separate code samples but ill do other post to create samples on Angular. You can however have a look at other community authored pages for code Samples

Update1:
There are some dreamforce updates related to Angular, if I come across the post will be updated.