Using Angular with Visualforce Remoting

Monday, April 7, 2014

With the rise of the Web and the HTML5, libraries like Angular , Knockout, Backbone started becoming popular. Among them somehow Angular stood out of the queue and looked more promising than others. It was also because of the fact that it is maintained by Google!

With VF pages I somehow couldn't find a good way to implement Angular, I have been tinkering with the library to make it work with Visualforce. I somehow wanted to marry Angular Factories with Visualforce Remoting and ended up doing the same using promise.


Here is small example how to use Visualforce Remoting with Angular.

Visualforce Page

<apex:page controller="AngularRemoting_Con">  
   <vs:importvisualstrap />  
   <vs:visualstrapblock >  
   <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"/>  
   <!--Remoting Stuff-->  
   <script>  
     function getSobjects(callback){              
       Visualforce.remoting.Manager.invokeAction(  
         '{!$RemoteAction.AngularRemoting_Con.getData}',  
         callback,  
         {escape: false}  
       );        
     }  
   </script>  
   <script>  
     var vfremote = angular.module('VFRemoting',[]);  
     vfremote.factory('VFRemotingFactory',function($q,$rootScope){  
       var factory = {};  
       factory.getData = function(){  
         var deferred = $q.defer();  
         getSobjects(function(result){  
           $rootScope.$apply(function(){  
             deferred.resolve(result);  
           });  
         });  
         return deferred.promise;  
       }  
       return factory;  
     });  
     vfremote.controller('VFRemoteController',function($scope,VFRemotingFactory){  
       VFRemotingFactory.getData().then(function(result){  
         $scope.data = result;  
       });  
     });  
   </script>  
   <div ng-app="VFRemoting">  
     <div ng-controller="VFRemoteController">  
       <ul class="list-group">  
         <li ng-repeat="acc in data" class="list-group-item">{{acc.Name}}</li>  
       </ul>  
     </div>  
   </div>  
   </vs:visualstrapblock>  
 </apex:page>

Controller Class

 public class AngularRemoting_Con {  
   @RemoteAction  
   public static List<SObject> getData(){  
     return [SELECT Id,Name FROM Account];  
   }  
 }  

How it looks like ?

A bit more about the pages

• The pages uses VisualStrap for styling, that can be removed along with all the components starting with namespace "vs".
• The Angularjs brings data from controller using Visualforce Remoting, it depends on "getSobjects" method to call controller method.
• AngularJs uses Factories to communicate with remoting method "getSobject"

This page can be extended to do a lot more things, bringing data dynamically to the VF pages, with the two way binding that angular provides, you can use this to make superfast single page apps.

I am looking forward to Visualforce Remote objects and probably will be posting a blog about how to use them with AngularJS, but at the end I don't think there would be much of differences rather than some basic changes in the code structure. And obviously with Remote objects you won't need a controller!