Thursday, August 27, 2015

How I got started with Angular and Visualforce

If you're reading this then you may be early-on in exploring AngularJS and wondering how you can get the W3Schools Angular Tutorial working inside Salesforce's Visualforce.

The tutorial's first page looks relatively straightforward, and with a simple closing tag for the <input> it will even pass Visualforce's compiler.

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <div ng-app="">
  <p>Name : <input type="text" ng-model="name" /></p>
  <h1>Hello {{name}}</h1>
    </div>

</body>
</html>

If you tried this inside Visualforce you likely got the same output I did.   Instead of behaving like it does in the tutorial, Visualforce stubbornly displays "{{name}}."

Without delay, here's a Visualforce-ized version of the W3Schools tutorial.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" />

<div ng-app="noop">
    <p>Input something in the input box:</p>
 
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here" /></p>
 
    <h1>Hello {{name}}</h1>
</div>

<script>
    var myAppModule = angular.module('noop', []);
</script>

</apex:page>

Visualforce requires ng-app to have a value to pass its own syntax checker.  If a value is passed to ng-app to get past Visualforce then that value is interpreted by Angular as a module used to bootstrap your page and must be defined.

In the example above I created a module called "noop" that literally does nothing but take-up space to make something else work.

Now my page behaved just like W3Schools said it should.

Having Googled around some more, I found multiple tutorials and videos introducing the neat things people have done with Visualforce and Angular, but all of them are too complicated for the absolute novice.  But the search pages did alert me that Salesforce is so geeked about the combination of Angular and Visualforce that they've created an app for the appexchange that installs angular, underbar, bootstrap, and several other JS libraries.  The app is called Angilar MP [sic].  The page gives instructions for how to install it into your org and includes some demo pages showing how to put more complicated examples together.

Since the app loads all those Javascript libraries into a staticresource we can re-write our application to look just a tad more Visualforce-like.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<apex:includeScript value="{!URLFOR($Resource.AngularMP, 'js/vendor/angular.1.0.6.min.js')}" />
<div ng-app="noop">
    <p>Input something in the input box:</p>
 
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here" /></p>
 
    <h1>Hello {{name}}</h1>
</div>

<script>
    var myAppModule = angular.module('noop', []);
</script>

</apex:page>

All it really does is replace the <script src="..." /> with <apex:includeScript value="..." /> and use the staticresource's Angular JS source.

PS If you're not already familiar with it, another of the cool resources include in the package is UnderscoreJS.  Lots of cool Javascript utility functions in there I wish I'd known were around years ago.  Regardless, they'll make my current pages easier to write.


Follow @TomGagne