AngularJS in visualforce Pages With Data
Why This Post? In my Previous post , We have gone through AngularJS setup , Here is the our next step towards it . We will use few angularJS tags to make data search very easy over visualforce page.
Here is the sample code for same with explanation in comments.
<!- Visualforce Page Start-->
<apex:page >
<script>
<!- AngularJS static resource inclusion -->
<apex:includeScript value="{!$Resource.AngularJS}"/>
<!- Registers the area for which angularJS would work-->
var app = angular.module('myApp',[]);
<!- Creates a controller and bing with above area-->
app.controller("AccountController", function($scope) {
$scope.fastFriends= {};
<!-Supply a list of friends in the form of javascript object array-->
$scope.fastFriends.names= [ {name: "Ashish"}, {name: "Mohit"},
{name: "Udit"},{name:"Harish"},{name: "Vinay"},{name: "Mayank"},
{name: "Himanshu"},{name: "Atul"},
{name: "Jagdeep"},
{name:"Rinku"},
{name: "Rahul Palam"} ];
$scope.sortField = "name";
} );
</script>
<!-Body Starts-->
<body ng-app="myApp">
<div ng-controller="AccountController">
<!- Input field to search friends-->
<input type="text" ng-model="name"/>
<ul>
<!-List of all friends-->
<li ng-repeat="acct in fastFriends.names| filter:name
|orderBy:sortField:reverse">
{{acct.name}}
</li>
</ul>
</div>
</body>
<!-Body Ends-->
</apex:page>
<!- Visualforce Page Ends-->
Anatomy for above Page
1. Registers the area for which angularJS would work
var app = angular.module('myApp',[]);
2. Creates a controller for above 'myApp' area.
app.controller("AccountController", function($scope) {
$scope.fastFriends= {};
Supply a list of friends in the form of javascript object array
$scope.fastFriends.names= [ {name: "Ashish"}, {name: "Mohit"},
{name: "Udit"},{name:"Harish"},
{name: "Vinay"},{name: "Mayank"},
{name: "Himanshu"},{name: "Atul"},
{name: "Jagdeep"},
{name:"Rinku"},
{name: "Rahul Palam"} ];
$scope.sortField = "name";
} );
</script>
3. Here is the page body ,which is registered with angularJS
<body ng-app="myApp">
//Assigning controller to this area
<div ng-controller="AccountController">
<!- Input field to search friends-->
//Declaring a input field with model so this value will be available
to angularJS app.
<input type="text" ng-model="name"/>
<ul>
<!-List of all friends-->
<li ng-repeat="acct in fastFriends.names| filter:name
|orderBy:sortField:reverse">
{{acct.name}}
</li>
</ul>
</div>
</body>
4. Below is the list populated from controller ,we have below components in <li> tag
<ul>
<!-List of all friends-->
<li ng-repeat="acct in fastFriends.names| filter:name
|orderBy:sortField:reverse">
{{acct.name}}
</li>
</ul>
In above code Here is the main line which is explained below
ng-repeat="acct in fastFriends.names| filter:name |orderBy:sortField:reverse"
ng-repeat : It takes list of javascript object and displays it in list.
filter : Here we are using above declared model to filter list base on model value.
orderBy: It decides list order over field
Note:- It is not angularJS tutorial , but more of its usage with visualforce page.
Here i have hardcoded friend names ,In next post i will demonstrate same with salesforce data.
The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. jogos friv gratis
ReplyDeleteJogos online
jogos 4 school