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.


5 comments:

  1. Welcome back! This is a great example of getting started with Angular and Visualforce. Thanks for all your great posts!

    ReplyDelete
  2. Gr8 work Avi...People with Development/technical background will understand ur efforts..Keep it up and would like to see more articles from you..

    ReplyDelete
  3. Gr8 work Avi...People with Development/technical background will understand ur efforts..Keep it up and would like to see more articles from you..

    ReplyDelete
  4. Thank You for sharing your article. I like it. We provide TIBCO Online Training in Hyderabad.

    ReplyDelete