-
How can I use AngularJS on Visualforce page if I want to invoke a method of controller?
How can I use AngularJS on Visualforce page if I want to invoke a method of apex controller and to simultaneously get the updated data on page. Want to use this to create a search functionality?
-
This discussion was modified 10 years, 4 months ago by
Forcetalks.
-
This discussion was modified 10 years, 3 months ago by Forcetalks.
-
This discussion was modified 8 years, 10 months ago by Forcetalks.
-
This discussion was modified 10 years, 4 months ago by
-
3 Replies
-
You can check http://www.algoworks.com/blog/develop-salesforce-visualforce-apps-using-angularjs/
It should work.
- [adinserter block='9']
-
Hi,
Here is the sample code:-
Visualforce page
<apex:page standardStylesheets="false" sidebar="false"
showHeader="false" applyBodyTag="false" applyHtmlTag="false"
docType="html-5.0" controller="AngularDemoController">
<html lang="en" ng-app="demoApp">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Angular Demo</title>
<link rel="stylesheet" href="<a class="vglnk" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/" rel="nofollow"><span>https</span><span>://</span><span>maxcdn</span><span>.</span><span>bootstrapcdn</span><span>.</span><span>com</span><span>/</span><span>bootstrap</span><span>/</span><span>3</span><span>.</span><span>3</span><span>.</span><span>2</span><span>/</span><span>css</span><span>/</span><span>bootstrap</span><span>.</span><span>min</span><span>.</span><span>css</span><span>"/</span></a>>
<script src="<a class="vglnk" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" rel="nofollow"><span>https</span><span>://</span><span>ajax</span><span>.</span><span>googleapis</span><span>.</span><span>com</span><span>/</span><span>ajax</span><span>/</span><span>libs</span><span>/</span><span>angularjs</span><span>/</span><span>1</span><span>.</span><span>3</span><span>.</span><span>11</span><span>/</span><span>angular</span><span>.</span><span>min</span><span>.</span><span>js</span></a>"></script>
<script>
// define the app
var demoApp = angular.module('demoApp', []);
// add the controller
demoApp.controller('DemoCtrl', function ($scope) {
$scope.account = {!account}
$scope.contacts = {!contacts}
});
</script>
</head>
<body class="container" ng-controller="DemoCtrl">
<h1 style="color:Green">{{account.Name}}</h1>
<p class="lead" style="color:Gray">
{{account.BillingStreet}}<br/>
{{account.BillingCity}}, {{account.BillingState}}
{{account.BillingPostalCode}}
</p>
<b>Search</b> <input ng-model="query" /><br/><br/><table class="table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>Id</th>
</tr>
<tr ng-repeat="contact in contacts | filter:query">
<td>{{contact.Name}}</td>
<td>{{contact.Email}}</td>
<td>{{contact.Id}}</td>
</tr>
</table>
</body>
</html>
</apex:page>Apex Class:
global with sharing class AngularDemoController {
// hardcode an account id for demo purposes
static String accountId = '00128000003u3uK';global static String getAccount() {
return JSON.serialize([select name, billingstreet,
billingcity, billingstate, billingpostalcode
from account where id = :accountId][0]);
}global static String getContacts() {
return JSON.serialize([select id, name, email
from contact where accountId = :accountId]);
}
} -
Hi,
If you need to display Salesforce data to people other than those that have Salesforce accounts, Visualforce pages is the best way to go. It allows users to view, edit, or even add data without exposing the data to third party systems. For developers creating Visualforce apps is way easier than creating ad-hoc third party web apps that call upon Salesforce data.
Seeing the popularity of Visualforce, Salesforce started expanding upon the product and within few years of its launch we saw support for jQuery, brand new REST API, and ForceTK; a JS proxy calling library. However, the game changer for Salesforce and JavaScript development was when Salesforce allowed JavaScript remoting for Apex Controllers. JS remoting allowed you to access server side apex controller methods through JS directly. Along with Remote Objects, this allowed more flexibility and dynamic usage of Visualforce pages resulting in an even greater adoption of the tool. More and more organizations were depending upon Visualforce pages to display data to clients, partners, and other users now. This called for a more appealing UI for the Visualforce pages and frontend JS framework and libraries were naturally called into the fray. AngularJS being the most popular one was naturally the favorite for the task of creating eye candy dynamic Visualforce pages.
In our previous post we talked about why exactly AngularJS is great for creating Visualforce pages. In this post, we will talk about the HOWS. I am assuming that you have some general understanding of AngularJS framework, Salesforce Visualforce pages, and have experience with JavaScript.
JavaScript saw a renewed interest partially because of the success of its frameworks and partially because of greater need for a more visually appealing mobile friendly single page application. In Visualforce pages, the backend part is not that flexible but that’s because of the level of security that comes with Visualforce. The frontend part, on the other hand, is all yours. So frontend frameworks like AngularJS are greatly preferred to create organized, structured applications having good response times.
Now considering that each Visualforce app involves around CRUD (create, read, update, delete) operations on Salesforce data, there are three prevalent approaches for fetching and binding data from Salesforce to Visualforce controllers.
Creating JavaScript Remote objects and using it with Visualforce,
Using JSON,
And using ForceTK libraries along with AngularJS libraries.The differences are subtle in small apps but as the complexity of your app grows, the difference would be more prominent.
The beauty of Visualforce pages is that you can start coding from the word go without opening or uploading multiple files to a server or such. So here I am assuming that you have an understanding about VF pages and can create a standalone page in the SFDC setup.
Hope this helps
Log In to reply.
Popular Salesforce Blogs
Benefits of Salesforce for FinTech: Boosting Efficiency and Scaling Growth
In recent years, the FinTech industry has boomed and transformed how people manage money, invest, and access financial products. However, with this growth, FinTech organizations…
How to Pass Salesforce Certification with Dumpsforsure?
Earning a Salesforce certification is one of the smartest ways to boost your career in cloud computing and CRM solutions. Salesforce is used by thousands…
The Future is Prompt: Salesforce Prompt Builder in 2025 and Beyond
The buzz around generative AI isn't fading; it's evolving, integrating deeper into our daily workflows. For Salesforce users, this evolution is epitomized by Prompt Builder,…
Popular Salesforce Videos
How Salesforce Supports Military Families
Join Rachel Dishman, Lead Solution Engineer at Salesforce, as she discusses the ways that Salesforce supports military families. By tuning in, you'll hear more about…
Salesforce Developer Tutorial - How and When to Use Apex Managed Sharing
In this episode, we go over what Apex Managed Sharing is in Salesforce when you should actually use apex managed sharing and how to actually…
Salesforce Summer 20 Dynamic Forms
Salesforce’s Summer ’20 Release Notes have now been published, we can now dive under the hood to see what the top features are! Historically, Summer…
