AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.
Want to know more and learn about angularJS Click here this is a re-post of the blog written by Vivek Deepak
Here is the page how its looks, the awesome thing about this page is angular the functionality in too much less coding, that what I just loved about AngularJS
Take a look at this
Here is the small controller class using remote Action to fetch the account records.
1: global class BlogOneController {
2: @RemoteAction
3: global static List<Account> getAllAccounts() {
4: return [SELECT Id,Name,BillingStreet,BillingCity,BillingState FROM Account];
5: }
6: }
Here is the code of the page using AngularJS to show the data on the page, using AngularJS and Bootstrap
1: <apex:page showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" controller="BlogOneController" >
2: <html ng-app="SampleApp" lang="en">
3: <apex:stylesheet value="{!URLFOR($Resource.bootstrap,'/boostrapStyle/css/bootstrap.css')}"/>
4: <apex:stylesheet value="{!URLFOR($Resource.bootstrap,'/boostrapStyle/css/ng-table.min.css')}"/>
5: <head>
6: <!-- Add CSS Files HERE -->
7: <script type="text/javascript">
8: var myapp = angular.module('SampleApp',['ui.bootstrap','mgcrea.ngStrap','ngTable']);
9: myapp.factory('FETCH_ACCOUNTS', ['$q','$log', function($q,$log){
10: var handleReq = function(remoteCall) {
11: var defer = $q.defer();
12: remoteCall(
13: function(result, event) {
14: if(event.status) {
15: defer.resolve(result);
16: }
17: else {
18: $log.error(event.message);
19: defer.reject(event.message);
20: }
21: },
22: {escape:false, buffer: false}
23: );
24: return defer.promise;
25: }
26: return {
27: getAllCustomers: function() {
28: return handleReq(BlogOneController.getAllAccounts);
29: }
30: }
31: }]);
32: myapp.controller('MainController',['$q','$log','$scope','FETCH_ACCOUNTS','ngTableParams',function($q,$log,$scope,FETCH_ACCOUNTS,ngTableParams){
33: $scope.loadingH = true;
34: var data = [];
35: var promise = FETCH_ACCOUNTS.getAllCustomers();
36: $scope.account_list = [];
37: promise.then(function(response){
38: data = response;
39: $scope.accountRecords.reload();
40: $scope.loadingH = false;
41: },function(error){
42: $log.error('ERROR' + JSON.stringify(error));
43: $scope.loadingH = false;
44: });
45: $scope.accountRecords = new ngTableParams({
46: page: 1, // show first page
47: count: 5
48: // count per page
49: }, {
50: counts:[],
51: total: data.length, // length of data
52: getData: function($defer, params) {
53: params.total(data.length);
54: $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
55: }
56: });
57: }]);
58: </script>
59: </head>
60: <body ng-controller="MainController" >
61: <div class="panel panel-primary">
62: <div class="panel-heading">
63: <h3 class="panel-title">Account Information</h3>
64: </div>
65: <div class="panel-body">
66: <table ng-table="accountRecords" class="table table-striped table-hover">
67: <thead>
68: <tr>
69: <th>#</th>
70: <th>Account Name</th>
71: <th>Street</th>
72: <th>State</th>
73: </tr>
74: </thead>
75: <tbody>
76: <tr ng-repeat="account in $data">
77: <td>{{$index+1}}</td>
78: <td>{{account.Name}}</td>
79: <td>{{account.BillingStreet}}</td>
80: <td>{{account.BillingCity}}</td>
81: </tr>
82: </tbody>
83: </table>
84: </div>
85: </div>
86: <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/angular.min.js')}"/>
87: <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/angular-strap.min.js')}"/>
88: <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/angular-strap.tpl.min.js')}"/>
89: <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/ng-table.min.js')}"/>
90: <apex:includeScript value="{!URLFOR($Resource.bootstraptpls, 'bootrapangular/ui-bootstrap-tpls-0.11.0.js')}"/>
91: <!-- Add JS Files HERE -->
92: </body>
93: </html>
94: </apex:page>
For the Angular and Boostrap files please click here
Happy coding!!
Salesforce Developer Training | 21cssindia
ReplyDeletewww.21cssindia.com/Salesforce-Developer-TrainingSalesforce Developer Training Click Here For Enquiry Force.com Code (Apex)