Feasibility of Angularjs in visualforce pages?

Is it feasible to build visualforce pages with angularjs?

Visualforce is itself a MVC framework. It has its own data-binding, data-transfer mechanism through viewstate.
If angularjs is used, what significance does the apex controller has, and how should data-binding and data-transfer be handled?


Yes it is feasible. Just think of Salesforce as a (quirky) web server where you have to wrap your Angular index web page in:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false">
    <html lang="en" ng-app="myApp" ng-controller="MyAppController">

And you can use static resources (including the zip format ones) to hold other resources. Note that it is possible with Angular to put many templates in a single file so you don’t have to have a Visualforce page per template.

The natural way to connect your Angular app with data is through REST APIs. On the Angular (client) side you have $http and $resource for this. And on the Apex (server) side you have @RestResource annotated classes. So Visualforce’s data binding is not used. The model is held in the client (as JSON) and bound to the HTML templates at the client-side by Angular.

The reality though is that Salesforce gets in the way more than it helps. So it is probably best to learn about Angular first using a simple web server and then take on combining Angular and Salesforce.


This IssuesInGitHub sample application makes uses a single Visualforce page for the index page but keeps all its partial templates in individual static resources for ease of editing – looks like a good pattern to adopt.

Source : Link , Question Author : zuke , Answer Author : Keith C

Leave a Comment