19

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?

1
  • 3
    Yes, it definitely gets done! (But i know too little to post an answer with enough detail) Feb 9 '14 at 23:08
22

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.

2
  • Thanks Keith. Now I got the data binding part. So, it's all done by exposing salesforce data through REST.
    – zuke
    Feb 11 '14 at 10:05
  • You need to get the model to the client-side and JSON-based REST is the simplest way. I recommend you spend a few dollars and look at these videos egghead.io and this one in particular egghead.io/lessons/angularjs-using-resource-for-data-models. (I am not affiliated to them, just found their videos a great way to learn quickly.)
    – Keith C
    Feb 11 '14 at 10:36
10

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.

2
  • 1
    Error in installation. "The AppExchange package has been deprecated and can no longer be installed. Please try installing a newer version, or contact the package owner directly to resolve. Can you share the latest version? Thanks :)
    – MnZ
    Apr 18 '14 at 7:48
  • 3
    @MnZ maybe a bit of a late reply but just had the same issue. Then I saw you can also find the package on github: github.com/developerforce/MobilePack-AngularJS/tree/master/…
    – KoenVM
    Apr 29 '14 at 7:26
10

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:

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)
4
  • I realize this is a relatively old reply but what even bother with Visualforce? What does it gain you in the case of an Angular based application (because it looks to me like it gain you nothing more than providing a clunky sort of web server)?
    – rg88
    Jan 5 '16 at 4:46
  • 1
    @rg88 What is the alternative for an angular solution that runs in an SF org?
    – NSjonas
    Jan 8 '16 at 6:00
  • An application that runs on a server somewhere (say, Rackspace) and uses OAUTH (for authentication) and the REST API to perform CRUD actions on the data stored in Salesforce. If I want a custom app with a custom look, why should I not do it this way (I'm just curious as I don't see why not... perhaps I am missing something)?
    – rg88
    Jan 8 '16 at 21:36
  • 1
    @rg88 That would work fine and might be the best design for some projects (Heroku would be a good choice for something like this). However, sometimes adding another platform that someone has to manage is not a realistic option for large companies that move slowly. Also it's very common for people to create angular apps that run inside of SF (header = true). You could maybe still achieve this with the a "canvas" app, but I'm not sure it would be any less "hackish" at that point.
    – NSjonas
    Jan 8 '16 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.