{"id":354,"date":"2016-06-02T14:01:35","date_gmt":"2016-06-02T14:01:35","guid":{"rendered":"https:\/\/eshopsync.com\/?p=354"},"modified":"2025-10-14T10:24:36","modified_gmt":"2025-10-14T10:24:36","slug":"angular-js-visualforce-page","status":"publish","type":"post","link":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/","title":{"rendered":"Angular JS with Visualforce Page"},"content":{"rendered":"

In this post, I am going to share the information how you can use Angular JS with Visualforce <\/strong> to display records onto your Visualforce Page<\/p>\n

\n
\n

Angular JS<\/h3>\n<\/div>\n<\/div>\n
\n

Angular is a Google-produced MVC framework where you can generate web applications and maintain them. This is Javascript based component framework which is open source. Here Visualforce and Salesforce1 can be used for making Salesforce compatible with mobile and also for connecting people to the Salesforce data. AngularJS allows the easy development of Visualforce pages.
\nThis Approach have its on limitations and advantages<\/p>\n

1. AngularJS allows us to extend HTML vocabulary for dynamic applications.<\/p>\n

2. This allows developers to create reusable components with more efficiency.<\/p>\n

3. In salesforce we can use both AngularJS to build single page application.<\/p>\n

4. Angular is most used when you want to developed an UI or front<\/p>\n

5. ng-app <\/strong> Declares the root element of an AngularJS application,<\/p>\n

6. ng-bind<\/strong> Sets the text of a DOM element to the value of an expression.<\/p>\n

7. ng-model<\/strong> Similar to ng-bind, but establishes a two-way data binding between the view and the scope.<\/p>\n

8. ng-controller<\/strong> Specifies a JavaScript controller class that evaluates HTML expressions.<\/p>\n

9. ng-repeat <\/strong> Instantiate an element once per item from a collection.<\/p>\n

\n

To learn Basics of Angular JS ,please go through the link provided https:\/\/webkul.com\/blog\/starting-with-angularjs<\/a>.<\/p>\n<\/div>\n<\/div>\n

\n
\n

<\/i>Advantages and Limitations<\/h3>\n<\/div>\n<\/div>\n
\n

Advantage<\/strong><\/p>\n

1. Two way Data Binding.<\/p>\n

2. It support SPA(Single Page Application).<\/p>\n

3. MVC(Model View Controller) pattern supported.<\/p>\n

4. Less code<\/p>\n

Limitations<\/strong><\/p>\n

1.AngularJS Its have some limitation when we handling huge amount of data.<\/p>\n<\/div>\n

\n
\n

ANGULAR JS WITH VISUALFORCE PAGE<\/h3>\n<\/div>\n<\/div>\n
\n

Apex :: <\/strong><\/p>\n

public with sharing class AngularWithVfPage {\r\n\r\n public static String getContacts() {\r\n       return JSON.serialize([select id, name, email\r\n           from contact ]);\r\n   }\r\n}\r\n<\/pre>\n
Visualforce::<\/strong><\/p>\n
<apex:page showHeader=\"false\" applyHtmlTag=\"false\" docType=\"html-5.0\" controller=\"AngularWithVfPage\">\r\n\r\n<head>\r\n   <meta charset=\"utf-8\"\/>\r\n   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\/>\r\n\r\n   <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.2\/css\/bootstrap.min.css\"\/>\r\n   <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.11\/angular.min.js\"><\/script>\r\n   <script>\r\n     \r\n     var App = angular.module('myApp', []);\r\n \r\n     App.controller('myctrl', function ($scope) {   \r\n    \r\n         $scope.contacts = {!contacts}\r\n     });\r\n   <\/script>\r\n<\/head>\r\n<body ng-app=\"myApp\" class=\"container\" ng-controller=\"myctrl\">\r\n   <table class=\"table table-bordered\">\r\n     <tr>\r\n       <th>Name<\/th>\r\n       <th>Email<\/th>\r\n       <th>Id<\/th>\r\n     <\/tr>\r\n     <tr ng-repeat=\"contact in contacts | filter:query\">          \r\n       <td>{{contact.Name}}<\/td>\r\n       <td>{{contact.Email}}<\/td>\r\n       <td>{{contact.Id}}<\/td>\r\n     <\/tr>\r\n   <\/table>\r\n<\/body>\r\n<\/apex:page><\/pre>\n<\/div>\n
\n
\n
Output<\/h3>\n<\/div>\n<\/div>\n
\"Page<\/div>\n
\n
\n
<\/i>Support<\/h3>\n<\/div>\n<\/div>\n
\n
That\u2019s all for Angular JS with Visualforce Page in Salesforce, still have any issue feel free to add a ticket and let us know your views to make the product better https:\/\/webkul.com\/ticket\/index.php<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this post, I am going to share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page Angular JS Angular is a …<\/a><\/p>\n","protected":false},"author":4,"featured_media":356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"\nAngular JS with Visualforce Page<\/title>\n<meta name=\"description\" content=\"share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eshopsync.com\/angular-js-visualforce-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular JS with Visualforce Page\" \/>\n<meta property=\"og:description\" content=\"share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eshopsync.com\/angular-js-visualforce-page\/\" \/>\n<meta property=\"og:site_name\" content=\"eShopSync\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-02T14:01:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-14T10:24:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/05\/angular-salesforce.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nansi Kela\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nansi Kela\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/\"},\"author\":{\"name\":\"Nansi Kela\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#\\\/schema\\\/person\\\/2efe54edf3f05f1b1bff15ae7442c6a1\"},\"headline\":\"Angular JS with Visualforce Page\",\"datePublished\":\"2016-06-02T14:01:35+00:00\",\"dateModified\":\"2025-10-14T10:24:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/\"},\"wordCount\":298,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/angular-salesforce.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/\",\"url\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/\",\"name\":\"Angular JS with Visualforce Page\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/angular-salesforce.png\",\"datePublished\":\"2016-06-02T14:01:35+00:00\",\"dateModified\":\"2025-10-14T10:24:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#\\\/schema\\\/person\\\/2efe54edf3f05f1b1bff15ae7442c6a1\"},\"description\":\"share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#primaryimage\",\"url\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/angular-salesforce.png\",\"contentUrl\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/angular-salesforce.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/angular-js-visualforce-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/eshopsync.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular JS with Visualforce Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#website\",\"url\":\"https:\\\/\\\/eshopsync.com\\\/\",\"name\":\"eShopSync\",\"description\":\"Salesforce, SAP, Pardot Integration For E-Commerce Store\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/eshopsync.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#\\\/schema\\\/person\\\/2efe54edf3f05f1b1bff15ae7442c6a1\",\"name\":\"Nansi Kela\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f330d16c8f951a609b52375b27d65ca770ad3b17c39246e85f563004947de40a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f330d16c8f951a609b52375b27d65ca770ad3b17c39246e85f563004947de40a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f330d16c8f951a609b52375b27d65ca770ad3b17c39246e85f563004947de40a?s=96&d=mm&r=g\",\"caption\":\"Nansi Kela\"},\"url\":\"https:\\\/\\\/eshopsync.com\\\/author\\\/nansi-kela80\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular JS with Visualforce Page","description":"share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/","og_locale":"en_US","og_type":"article","og_title":"Angular JS with Visualforce Page","og_description":"share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page","og_url":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/","og_site_name":"eShopSync","article_published_time":"2016-06-02T14:01:35+00:00","article_modified_time":"2025-10-14T10:24:36+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/05\/angular-salesforce.png","type":"image\/png"}],"author":"Nansi Kela","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nansi Kela","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#article","isPartOf":{"@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/"},"author":{"name":"Nansi Kela","@id":"https:\/\/eshopsync.com\/#\/schema\/person\/2efe54edf3f05f1b1bff15ae7442c6a1"},"headline":"Angular JS with Visualforce Page","datePublished":"2016-06-02T14:01:35+00:00","dateModified":"2025-10-14T10:24:36+00:00","mainEntityOfPage":{"@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/"},"wordCount":298,"commentCount":0,"image":{"@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#primaryimage"},"thumbnailUrl":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/05\/angular-salesforce.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eshopsync.com\/angular-js-visualforce-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/","url":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/","name":"Angular JS with Visualforce Page","isPartOf":{"@id":"https:\/\/eshopsync.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#primaryimage"},"image":{"@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#primaryimage"},"thumbnailUrl":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/05\/angular-salesforce.png","datePublished":"2016-06-02T14:01:35+00:00","dateModified":"2025-10-14T10:24:36+00:00","author":{"@id":"https:\/\/eshopsync.com\/#\/schema\/person\/2efe54edf3f05f1b1bff15ae7442c6a1"},"description":"share the information how you can use Angular JS with Visualforce to display records onto your Visualforce Page","breadcrumb":{"@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eshopsync.com\/angular-js-visualforce-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#primaryimage","url":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/05\/angular-salesforce.png","contentUrl":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/05\/angular-salesforce.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/eshopsync.com\/angular-js-visualforce-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eshopsync.com\/"},{"@type":"ListItem","position":2,"name":"Angular JS with Visualforce Page"}]},{"@type":"WebSite","@id":"https:\/\/eshopsync.com\/#website","url":"https:\/\/eshopsync.com\/","name":"eShopSync","description":"Salesforce, SAP, Pardot Integration For E-Commerce Store","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eshopsync.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/eshopsync.com\/#\/schema\/person\/2efe54edf3f05f1b1bff15ae7442c6a1","name":"Nansi Kela","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f330d16c8f951a609b52375b27d65ca770ad3b17c39246e85f563004947de40a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f330d16c8f951a609b52375b27d65ca770ad3b17c39246e85f563004947de40a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f330d16c8f951a609b52375b27d65ca770ad3b17c39246e85f563004947de40a?s=96&d=mm&r=g","caption":"Nansi Kela"},"url":"https:\/\/eshopsync.com\/author\/nansi-kela80\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":7,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":13635,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts\/354\/revisions\/13635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/media\/356"}],"wp:attachment":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}