Angular JS & SObject Remote : Part 1 Bringing Data to Page #NoControllers

Friday, April 3, 2015

Finally back after long long time!

I have been working with AngularJs for a while now and I find Angular to be really helpful to create stateless interactive pages and best part is you hardly need any Apex Controller for the same. Pages are fast, fluid and Mobile friendly (Salesforce 1).

With time I have found the best ingredient to prepare your AngularJS page are

• AngularJS ( of course )
• SObject-Remote (thanks to Jason Venable)
• Bootstrap (not required)

Lets start with a simple example.

Bringing data to the page

This would be a pretty easy example where we will be using SObject-Remote to bring query data from Salesforce Accounts

The Catch

• The area ng-controller marks the area which can access the $scope variable of that particular controller.
• You can access variable inside $scope by using {{}}. If you have a variable $scope.accounts you can directly access that in page by doing {{accounts}}, just like regular merge field but a bit different syntax.
• We have used $scope.$apply() , which generally tells angular to redraw the UI  / View. Since remoting works async we need to notify the angular to redraw once we have the data by calling this method.

End Result

Finally a stateless fluid page without any controllers.

Demo : https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemote