Feasibility of Angularjs in visualforce pages?

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">
        ....
    </html>
</apex:page>

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.

PS

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.


Evidently Salesforce thinks it is perfectly feasible. They have a mobile starter pack for angular.js which you can install as a package in your org:

Install the Mobile Pack for AngularJS into your DE Org Log into your DE

Paste this install URL into the address bar (or click the link) to start installing the package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000Vc60

The package includes Visualforce pages:

MobileSample_ngIndex.page: This Visualforce page is the starting point for the sample app.

The sample app has a total of 6 Visualforce pages with functionality pertaining to viewing the list of contacts, adding a contact, and viewing/editing/deleting an individual contact.


I recently completed an angular app for a client with great success. I think one of the most challenging parts is deciding how you want to structure your app.

The standard angular structure typically follows:

app
-css
-js
--controllers
--directives
--...
-templates
-lib
-index.html

If your app is going to be big and complicated you will want to follow this structure as close as possible by compressing everything in a static resource. The MavensMate plugin for sublime text makes it easy to uncompress and redeploy your app (see working with resource bundles).

Views:

One caveat is that instead of having an index.html you will probably want to put your root html in a visualforce page. This is where you will bootstrap your app, including your custom js files, css and other resources.

It seems that a lot of developers tend to get rid of the templates folder completely and instead create all their partials html views as separate VF pages. The main reason for this is that it makes routing easier as your top level app will likely be executing at "/apex/youVFpage" and your static resources will be elsewhere. However it is possible to put all partial views in the static resource by leveraging the base header tag.

<base href="{!URLFOR($Resource.MyAngularApp, 'app/')}" />

You can the route your partial views like so:

$routeProvider.when('/', {
    templateUrl: 'templates/homeView.html',
    controller: 'HomeController'
});

App Data:

  • ng-force
  • Rest/Soap Api (via javascript toolkit)
  • Javascript Remoting

Which method you should choose depends on what you're needs are. If you're needs are simple you can get by with Javascript remoting. Otherwise ng-force provides a alot of power and flexibilty that might save you some time. If you want complete control javascript toolkit will allow you to architect your app however you choose.

Other things to consider:

  • Browser support (IE!)
  • Unit Testing (??? Haven't figured this one out yet)

Tags:

Javascript

Libraries

Visualforce

Recent Posts