Visualforce App Using AngularJs
AngularJs
Before look at code you should understand the angularJs factory function.
In AngularJS, services are reusable singleton objects that are used to organize and share code across your app. They can be injected into controllers,filters,directives. AngularJS provides you three ways : service, factory and provider to create a service.
Factory :
A factory is simple function which allows you to add some logic before creating the object. It returns the created object.
It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.
Syntax:
Before look at code you should understand the angularJs factory function.
In AngularJS, services are reusable singleton objects that are used to organize and share code across your app. They can be injected into controllers,filters,directives. AngularJS provides you three ways : service, factory and provider to create a service.
Factory :
A factory is simple function which allows you to add some logic before creating the object. It returns the created object.
It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.
Syntax:
- app.factory('serviceName',function(){ return serviceObj;})
Creating service using factory method:
<script>
var app = angular.module('app',[]);
app.factory(('myfactory',function (){
var serviceobj={};
serviceobj.function1=function (){
// To Do:
};
serviceobj.function2=function (){
// To Do:
};
return serviceobj;
});
</script>
AngularJS In Visualforce:
Visualforce Page:
<apex:page showHeader="false" Controller="ContactsController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script type="text/javascript">
var app = angular.module('MyApp',[]);
app.factory('VFRemotingFactory',function($q,$rootScope){
var factory = {};
factory.getData = function(searchText){
var deferred = $q.defer();
GetAllContactsByFilter(function(result){
$rootScope.$apply(function(){
deferred.resolve(result);
});
}, searchText);
return deferred.promise;
}
return factory;
});
function GetAllContactsByFilter(callback, searchText){
if(searchText == undefined)
{
searchText = '';
}
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.ContactsController.GetAllContactsByFilter}', searchText,
callback,
{escape: false}
);
}
app.controller('myController',function($scope,VFRemotingFactory){
$scope.mcm = {};
$scope.getFilteredData = function($event){
if($scope.mcm.searchText.length > 1)
{
var searchTxt = $scope.mcm.searchText;
VFRemotingFactory.getData(searchTxt).then(function(result){
$scope.ContactData = result;
});
}
else
{
var searchTxt = $scope.mcm.searchText;
VFRemotingFactory.getData().then(function(result){
$scope.ContactData = result;
});
}
};
$scope.Prafull = {};
VFRemotingFactory.getData().then(function(result){
$scope.ContactData = result;
});
});
</script>
<div ng-app="MyApp">
<div ng-controller="myController">
<label>Search: <input ng-model="mcm.searchText" ng-keyup="getFilteredData($event)"/></label>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Email</th>
<th>Title</th>
<th>Account Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactVar in ContactData">
<td>{{contactVar.FirstName}}</td>
<td>{{contactVar.LastName}}</td>
<td>{{contactVar.Phone}}</td>
<td>{{contactVar.Email}}</td>
<td>{{contactVar.Title}}</td>
<td>{{contactVar.Account.Name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</apex:page>
Apex Class:
public class ContactsController {
@RemoteAction
public static List<Contact> GetAllContactsByFilter(String searchText)
{
String searchString = '%' + searchText + '%';
List<Contact> contactList = [SELECT FirstName, LastName, Phone, Email, Title, Account.Name FROM Contact where FirstName like :searchString];
return contactList;
}
}
Result:
Here you can search for records based on FirstName.
Comments
Post a Comment