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 http://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 {
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
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">
<!--
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<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
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 http://webkul.com/ticket/index.php