Use s-controls to add your own functionality to your Salesforce organization. Whether you are integrating a hosted application of your own or are extending your current Salesforce user interface, use s-controls to store your code or refer to code elsewhere. Custom s-controls can contain any type of content that you can display in a browser, for example a Java applet, an Active-X control, an Excel file, or a custom HTML Web form.
It began by simply providing support for jQuery in Visualforce pages. It was a start but on many occasions I opted to chew glass than to try and reference the DOM ID that was generated for a Visualforce component using jQuery. I even wondered aloud many times, why is this so DOM hard?
The advantage to this methodology is that it breaks the dependence on the platform lifecycle. Your designers and front-end developers can work on functionality disconnected from the backend using something like json-server or node-static to mock up service calls from Salesforce while your Salesforce platform team implements the object model, FLS, sharing rules, workflow and Apex code. We do this daily for our Salesforce challenges on Topcoder and we can churn out mind-blowing applications in no time.
So to conclude, if you havent started building SPA in Visualforce and are curious, heres some code to get you started. Its probably the simplest code I could come up with. There are best practices for structuring your Angular code and different ways to access data from Apex, but this is the quickest way to see some results fast. The Visualforce page simply uses AngularJS and Bootstrap to display an Account and its associated Contacts.
Heres the Apex controller. It simply returns (as JSON) information for an account along with its contacts.
The Visualforce page, once again, is the container for our AngularJS application. The account and contacts scope variables are populated with data from the controller when the page loads. Besides that the page does nothing really special. Feel free to customize and make it awesome!
Cross-posted from the topocoder blog.