Our Blog

Angular JS with Visualforce Page

Angular JS with Visualforce Page

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 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.
This Approach have its on limitations and advantages

1. AngularJS allows us to extend HTML vocabulary for dynamic applications.

2. This allows developers to create reusable components with more efficiency.

3. In salesforce we can use both AngularJS to build single page application.

4. Angular is most used when you want to developed an UI or front

5. ng-app Declares the root element of an AngularJS application,

6. ng-bind Sets the text of a DOM element to the value of an expression.

7. ng-model Similar to ng-bind, but establishes a two-way data binding between the view and the scope.

8. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions.

9. ng-repeat Instantiate an element once per item from a collection.

To learn Basics of Angular JS ,please go through the link provided https://webkul.com/blog/starting-with-angularjs.

Advantages and Limitations

Advantage

1. Two way Data Binding.

2. It support SPA(Single Page Application).

3. MVC(Model View Controller) pattern supported.

4. Less code

Limitations

1.AngularJS Its have some limitation when we handling huge amount of data.

ANGULAR JS WITH VISUALFORCE PAGE

Apex ::

public with sharing class AngularWithVfPage {

 public static String getContacts() {
       return JSON.serialize([select id, name, email
           from contact ]);
   }
}

Visualforce::

<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="AngularWithVfPage">

<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
   <script>
     
     var App = angular.module('myApp', []);
 
     App.controller('myctrl', function ($scope) {   
    
         $scope.contacts = {!contacts}
     });
   </script>
</head>
<body ng-app="myApp" class="container" ng-controller="myctrl">
   <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>
</apex:page>

Output

Page Editor AngularJsWithVisualforce

Support

That’s 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

Leave a Comment

Comments (0)

Please verify that you are not a robot.

Welcome back

Welcome back! Please enter your details

One or more fields have an error. Please check and try again.

Forgot Password?

Tell us about Your Company

How can we help you with your business?